【Flutter】画像を表示する
Flutter で画像を表示する方法
画像を配置する
images フォルダをプロジェクト直下に作成します。
表示したい画像をその中に入れます。
設定ファイルを編集
pubspec.yaml ファイルを編集します。
1
2
3
4
5
6
7
| flutter:
assets:
# 画像を指定する場合
- images/sample.jpg
# ファルダを指定する場合
- images/
|
実行コード
Image.asset('images/sample.jpg') を使用して画像を読み込みます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Image.asset('images/sample.jpg');
}
}
|
参考
