[Flutter]リストビュー(listview)を動的に作るには？

どうも、ちょげ(@chogetarou)です。

ListViewを動的に作る方法を紹介します。

方法

ListViewを動的に作るには、「ListView.builder」を使います。

ListView.builderでは、まず「itemCount」に要素数を指定します。

ListView.builder(
  itemCount: /*要素数*/,
),

そして、引数「builder」にリストの要素を戻り値とする「(context, index){}」のような関数を指定します。

「builder」に指定する関数の第２引数で、「０、１、２・・・」のように割り振られている要素の番号を取得することが出来ます。

この第２引数を使うことで、リストなどの要素にアクセスすることが出来ます。

ListView.builder(
  itemCount: /*要素数*/,
  itemBuilder: (BuildContext context, index) {
    return /*表示するリストの要素*/
  },
),

以下は、実際の使用例です。

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextField(
        controller: _controller,
        onChanged: (String? value) {
          _editText = value!;
        },
        decoration: InputDecoration(
          suffixIcon: IconButton(
            onPressed: () {
              _fruits.add(_editText);
              setState(() {
                _controller.clear();
              });
            },
            icon: Icon(Icons.add),
          ),
        ),
      ),
    ),
    ListView.builder(
      shrinkWrap: true,
      itemCount: _fruits.length,
      itemBuilder: (BuildContext context, index) {
        return Card(
          child: ListTile(
            title: Text(
              _fruits[index],
            ),
          ),
        );
      },
    ),
  ],
),

まとめ

ListViewを動的に作るには、「ListView.builder」を使います。

「ListView.builder」は、引数「itemCount」に要素数、引数「itemBuilder」でリストの要素を返す関数を指定します。

使用したコード

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

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

class _HomeState extends State<Home> {
  var _controller = TextEditingController();
  var _editText = '';
  var _fruits = <String>['Apple', 'Banana', 'Grape', 'Strawberry'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextField(
                controller: _controller,
                onChanged: (String? value) {
                  _editText = value!;
                },
                decoration: InputDecoration(
                  suffixIcon: IconButton(
                    onPressed: () {
                      _fruits.add(_editText);
                      setState(() {
                        _controller.clear();
                      });
                    },
                    icon: Icon(Icons.add),
                  ),
                ),
              ),
            ),
            ListView.builder(
              shrinkWrap: true,
              itemCount: _fruits.length,
              itemBuilder: (BuildContext context, index) {
                return Card(
                  child: ListTile(
                    title: Text(
                      _fruits[index],
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}