Flutter ローカル環境にある画像の表示方法

今回はFlutterでの画像の表示方法に関して解説していこうと思います。

画像の準備

保存するための画像を準備しましょう。

今回は下のような画像を準備しました。
この画像を今回表示していこうと思います。

画像の導入

次に画像の導入をしましょう。

pubspec.yamlを開き次のような記述を加えます。

pubspec.yaml

flutter:
  uses-material-design: true

+ assets:
+   - assets/images/hime.jpg

今回はassets/imagesというディレクトリを作成しその中に画像を保存します。

画像を複数保存したい場合は

pubspec.yaml

flutter:
  uses-material-design: true
  assets:
    - assets/images/hime.jpg
    - assets/images/...
    - assets/images/...

といった形で追加できます。(ディレクトリの名前はそれぞれ自分のものに合わせて変更してください)

その後、Android Studioの上部にあるpub getボタンをクリック、もしくは下記コマンドを作成プロジェクト内で実行します。

$ flutter pub get

これで画像の導入は完了しました。

画像の表示

それでは実際画像を表示してみましょう。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('画像表示'),
      ),
      body: Center(
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          Image.asset('assets/images/hime.jpg'),
        ]),
      ),
    );
  }
}

上記のソースで

このように画像が表示できました。




お疲れ様でした。
ここまでご覧戴き、ありがとうございました。