1-3.リスト一覧を表示する

Flutter

2020.11.08

前回のコードを改良していきたいと思います。

以下のbody内のCenterウィジェットをリスト一覧を表示するListViewウィジェットに変更します。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('DogList'),
        ),
      ),
    );
  }
}

ListViewウィジェットだけは何も表示されないので、ListViewウィジェットの中にListTileウィジェットを追加します。

リストの要素はほぼ複数あるのでListViewウィジェットの中にListTileウィジェットは複数存在することになります。

前回にも紹介しましたがchildではなくchildren<widget>[ ]内にListTileウィジェットを入力しましょう。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: <widget>[
            ListTile(
              title: Text('name 1'),
              subtitle: Text('age 1'),
            ),
            ListTile(
              title: Text('name 2'),
              subtitle: Text('age 2'),
            ),
            ListTile(
              title: Text('name 3'),
              subtitle: Text('age 3'),
            ),
          ],
        ),
      ),
    );
  }
}

ListTileウィジェット内にTextウィジェットを使ってtitleに名前とsubtitleに年齢を表示させます。

この状態で実行してみると以下のように表示されます。

こう見るとアプリの上部がさみしく感じます。

よってアプリの上部にAppBarを追加しましょう。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dog List'),
        ),
        body: ListView(
          children: <widget>[
            ListTile(
              title: Text('name 1'),
              subtitle: Text('age 1'),
            ),
            ListTile(
              title: Text('name 2'),
              subtitle: Text('age 2'),
            ),
            ListTile(
              title: Text('name 3'),
              subtitle: Text('age 3'),
            ),
          ],
        ),
      ),
    );
  }
}

AppBarはbody下のListViewウィジェットより上にappBar下のAppBarウィジェット追加して、Textウィジェットを使ってtitleにアプリ名Dog Listと表示させます。

これで見た目が改善されました。

最後にアプリの下部にボタンを追加します。

このボタンは新規登録するために実装しておきます。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dog List'),
        ),
        body: ListView(
          children: <widget>[
            ListTile(
              title: Text('name 1'),
              subtitle: Text('age 1'),
            ),
            ListTile(
              title: Text('name 2'),
              subtitle: Text('age 2'),
            ),
            ListTile(
              title: Text('name 3'),
              subtitle: Text('age 3'),
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {},
        ),
      ),
    );
  }
}

今回はbody下のListViewウィジェットの下にfloatingActionButton下のFloatingActionButtonウィジェットを追加して、Iconウィジェットを使って＋のボタンを表示します。

そしてクリックしたときの動作を実装するためにonPressed : ( ) { } を追加しておきます。

これでリスト一覧を表示する画面ができました。

次回は新規登録や変更時に使用するために入力する画面を作成します。