画像を表示させるには、 Image を使います。
ネット上の画像を表示したり、 アプリ内に保存した画像を表示できます。
①ネット上の画像を表示する
ネット上の画像を表示するには、
Image.network('https://images.unsplash.com/photo-1519052537078-e6302a4968d4?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE1ODB9'),のように書きます。
②アプリ内に保存した画像を表示する
アプリ内に保存した画像を表示するには、3つの手順があります。
①画像を保存する
プロジェクトの直下に images フォルダを作り、そこに画像を入れます。
② pubspec.yaml ファイルを編集する
pubspec.yaml の flutter ブロックの中に assets ブロックを作り、保存した画像名を書きます。
flutter:
assets:
- images/cat.jpg
最後に main.dart に
Image.asset('images/cat.jpg'),と書くことで表示されます。
画像表示のコード例
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
children: <Widget>[
Image.network('https://images.unsplash.com/photo-1519052537078-e6302a4968d4?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE1ODB9'),
Image.asset('images/cat.jpg'),
],
),
);
}
}
スクリーンショット
