【Flutter】画像の表示｜ネコでもわかるFlutter大辞典

画像を表示させるには、 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'),
        ],
      ),
    );
  }
}