Flutterアプリ開発講座　UI基礎編　その７

７｜リストを作ってみる

今までの作ったものは一旦リセットして、新しく作っていきます。
こちらのコードをコピペしてまっさらな画面にしましょう。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(),
    );
  }
}

ではCenterをContainerに変更して、子要素としてListTileを持たせてみましょう。
ListTileはリストに必要な項目が簡単に作れるウィジェットです。
今回はListTileのtitleプロパティとleadingプロパティを設定してみましょう。

return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: ListTile(
          title: Text('ボールペンを買う'),
          leading: Radio<bool?>(value: false, groupValue: null, onChanged: null),
        ),
      ),
    );

変更後: Listの一行が表示されているはずです👇

これをColumnでたくさん並べてみましょう。

body: Container(
    child: Column(
      children: [
        ListTile(
          title: Text('ボールペンを買う'),
          leading: Radio<bool?>(value: false, groupValue: null, onChanged: null),
        ),
        ListTile(
          title: Text('ボールペンを買う'),
          leading: Radio<bool?>(value: false, groupValue: null, onChanged: null),
        ),
        ListTile(
          title: Text('ボールペンを買う'),
          leading: Radio<bool?>(value: false, groupValue: null, onChanged: null),
        ),
        ListTile(
          title: Text('ボールペンを買う'),
          leading: Radio<bool?>(value: false, groupValue: null, onChanged: null),
        ),
        ListTile(
          title: Text('ボールペンを買う'),
          leading: Radio<bool?>(value: false, groupValue: null, onChanged: null),
        ),
      ],
    ),
  ),

変更後: このようになっているはずです👇

上のようにColumnで並べることも可能ですが、今度はListViewを使ってみましょう。
ListViewのitemCountプロパティにリストの行数を、itemBuilderプロパティに何を表示するのかを設定できます。

body: Container(
    child: ListView.builder(
      itemCount: 10,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('ボールペンを買う'),
          leading:
              Radio<bool?>(value: false, groupValue: null, onChanged: null),
        );
      },
    ),
  ),

変更後: リストが10行表示されているはずです👇