Chapter 06

画像を配置する

今回は、画像を配置する方法について学んでいきましょう。

動画では以下が該当します。

まずは準備

前回の画面遷移で値を渡すところまでの動画で、main.dartのbuild関数は以下のようになっていると思います。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('KBOYのFlutter大学'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('次へ'),
          onPressed: () {
            // ここにボタンを押した時に呼ばれるコードを書く
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => NextPage('KBOY')),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

ここにきて、余計な物を取り払っていきましょう。まずは、floatingActionButtonは消します。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('KBOYのFlutter大学'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('次へ'),
          onPressed: () {
            // ここにボタンを押した時に呼ばれるコードを書く
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => NextPage('KBOY')),
            );
          },
        ),
      ),
    );
  }

ここから続きやっていきましょう。

方針としては、RaisedButtonの上に、画像のWidgetを置く って感じでいきたいと思いますが、ここまでの勉強で、どのような構成でWidgetを組むかイメージできますでしょうか？ちゃんと勉強してきたなら、なんとなく分かってるはずです。

正解は、「ColumnでRaisedButtonを囲み、RaisedButtonの上に画像のWidgetを追加する」です。分からなかった方は、３章の基本的なWidgetの使い方を復習してください。

では、この方針でやっていきましょう。

Columnで囲んでからImageウィジェットを配置

RaisedButtonをColumnで囲んでから、RaisedButtonの上にImageウィジェットを配置しましょう。Image() は一旦仮です。

そしたら、簡略化するとこんな感じのイメージになります。

        Column(
          children: [
            Image(),
            RaisedButton(),
          ],
        )

全体としては今こんな感じ。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('KBOYのFlutter大学'),
      ),
      body: Center(
        child: Column(
          children: [
            Image(),
            RaisedButton(
              child: Text('次へ'),
              onPressed: () {
                // ここにボタンを押した時に呼ばれるコードを書く
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => NextPage('KBOY')),
                );
              },
            ),
          ],
        ),
      ),
    );
  }

ちなみにこの状態だと、ビルドしても画面が赤くなっていると思います。画像に対して、urlや画像のpathを指定してないためです。

Imageのドキュメントを確認しよう

Widget catalogの中からAssets, images, and icon widgetsを選択して、画像の配置方法について調べていきましょう。こんな感じで、公式ドキュメントを見て勉強になると、自学自習が効率良くなるので、是非覚えてください。日本語教材がないとコードが書けない人になってしまうと、どこかで必ず行き詰まるので。。。

ってことで、記事を見てみると、以下のように４種類表示されているので、この中からImageを選びましょう。

ネット上の画像を表示する

Flutterで画像を表示するためには２種類の方法があります。

ネットにある画像を表示する
スマホに入ってる画像を表示する

この２つです。このうち、サクッと画像表示を体験できるのは、前者の方なので、まずはネットにある画像を表示してみましょう。ドキュメントの真ん中の方に、以下のようなサンプルコードがあると思います。

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

これを使いましょう。すでに、ネット上にある https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg というurlの画像をflutterアプリで表示する、ということです。
ためしに、以下のurlに飛んでみると画像が見れるので確認してみてください。

ってことでコードに戻りましょう。先程、Image() と書いたところを、この Image.network に変更します。そしたらbody以下はこんなかんじ↓

      body: Center(
        child: Column(
          children: [
            Image.network(
                'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
            RaisedButton(
              child: Text('次へ'),
              onPressed: () {
                // ここにボタンを押した時に呼ばれるコードを書く
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => NextPage('KBOY')),
                );
              },
            ),
          ],
        ),
      ),

アプリは、以下みたいになっています。

これで画像が表示できました！！！他にもネット上の別の画像にURLを変えて試してみてください。

まとめ

今回の記事はここで終わります。動画では、スマホのローカルに入れた画像を表示する方法やアイコンを表示する方法も合わせて解説しているので、ぜひぜひ合わせて見ていただくと知識がより定着するかと思います。

まずは準備

Columnで囲んでからImageウィジェットを配置

Imageのドキュメントを確認しよう

ネット上の画像を表示する

まとめ

参考文献