Flutterデモアプリをカスタマイズしてみよう⑤

概要

Flutterデモアプリを少しずつ弄っていってFlutterに慣れていくのが目的です

前回の記事はこちら

前回までの画面の状態とコードは以下のようになっています

▼ main.dartをクリックで展開

import 'package:flutter/material.dart';

import 'next_page.dart';

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("フラッターデモホームページ"),
        actions: [
          Icon(Icons.adb_outlined),
        ],
      ),
      body: Center(
        child: Column(mainAxisSize: MainAxisSize.min, children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'ボタンを押した回数は  ',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headline4,
              ),
              Text(
                '  回',
              ),
            ],
          ),
          RaisedButton(
            child: Text('ボタン'),
            color: Colors.blue,
            textColor: Colors.white,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
            onPressed: _incrementCounter,
          ),
        ]),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.arrow_forward),
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => NextPage()),
          );
        },
      ),
    );
  }
}

▼next_page.dartをクリックで展開

import 'package:flutter/material.dart';

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("次のページ"),
        actions: [
          Icon(Icons.adb_outlined),
        ],
      ),
      body: Container(
        color: Colors.red,
        child: Center(
            child: Column(mainAxisSize: MainAxisSize.min,
                children: [
                  Text('遷移しましたっ！',
                      style: TextStyle(
                        fontSize: 30,
                        fontWeight: FontWeight.bold,
                      )),
        ])),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.arrow_back),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}

今回行うこと(画像表示)

今回は画像の表示をやっていきたいと思います

• 画像表示
  • ネット上にある画像をURLで呼び出す方法
  • アプリ自体に画像を保存しておく方法
• 画像の大きさの変更

画像の表示

画像の表示の仕方には２つあります

• ネット上にある画像をURLで呼び出す方法
• アプリ自体に画像を保存しておく方法

ネット上にある画像をURLで呼び出す方法

画像をURLで呼び出す方法は２つあります。
今回は公式ドキュメントに紹介されてある画像を呼び出してみます
やり方はとても簡単で一つ目が

Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',)

二つ目が

const Image(
  image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)

と記述するだけです
(どちらでもやっていることは変わりません。好きな方でやってみましょう！)

今回はTextの上に画像を表示させてみます
実際にコードに打ち込んでみましょう

body: Container( //Containerを追加
  child: Center( //その子供にCenter
    child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Image.network( //Image.networkを追加
            'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'ボタンを押した回数は  ',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headline4,
              ),
              Text(
                '  回',
              ),

ホットリロードしてみます

画像が表示されました！

アプリ自体に画像を保存しておく方法

今度はローカル環境に保存されている画像を
アプリに保存し表示させてみます
どんな画像でも良いですが
公式ドキュメントからフクロウの画像を保存しておきましょう

・imagesフォルダの作成
Project内のこのアプリの名前のところで右クリックを押し
new→Directoryを選択し、imagesフォルダを作ります

以下のように作成されていれば成功です

Finderなどから先ほど保存した画像をドラック＆ドロップしてimagesフォルダの中に入れていきます

フォルダ内に画像ファイルがあれば成功です

・pubspec.yamlに記述
保存した画像を読み込ませる為には
pubspec.yamlにその画像がどこにあるのか記載しておかなければいけません
pubspec.yamlとはProject内のファイルにあります
開いてみると色々書いてあります
読みにくいのでコメントアウトを削除しておきます

すっきりしました！

では画像の場所の記載をしていきます
一番下の

flutter:
  uses-material-design: true

の下にこう記述します

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

assets内に保存した画像の場所を書いていく訳です

準備が終わりました
画像を表示されてみましょう
main.dartにて
先ほど追加した画像の下に追記していきましょう

Image.network(
  'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
),
Image.asset('images/owl.jpg'), //追記

このような画面になったと思います
表示が変なことになっていますがアプリ内に保存されている画像の表示が出来ました！

今回は「ネット上にある画像をURLで呼び出す方法」で表示させているコードは消しておきます

画像の大きさの変更

現在の表示はこのようになっています

画像の大きさを変更していきましょう

Image.asset('images/owl.jpg',
  height: 250,
  width: 250,
),

heightとwidthの値を指定するだけです

画像のサイズ変更が出来ました！
お好きなサイズに変更してみてください

まとめ

今回は画像の表示を行いました
表示の仕方には２つありましたが、必要に応じてやり方を変えてみると良いのかもしれませんね
私はその違いの理解はしていません笑