[Flutter]ListView.separatedの使い方

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

ListView.separatedの使い方を解説します。

使い方
まとめ

使い方

ListView.separatedを使うには、次の３つの引数を指定します。

itemBuilder : 表示する要素を指定
separatedBuilder : 要素の間に置きたいウェジェットを指定
itemCount : 要素数

この３つの引数を指定すれば、ListView.separatedを使うことが出来ます。

まず、itemBuilderには、「(context, index) {}」のような関数を指定し、戻り値としてリストで表示する要素を指定します。

次に、separatedBuilderは、itemBuilderと同じように指定し、戻り値として要素の間に置きたいウェジェットを指定します。

最後に、itemCountで要素数を指定します。

ListView.separated(
  itemBuilder: (context, index) {
    return /*要素*/;
  },
  separatorBuilder: (context, index) {
    return /*ウェジェット*/;
  },
  itemCount: /*要素数*/,
),

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.separated(
        itemBuilder: (context, index) {
          return Container(
            color: Colors.blue,
            height: 50,
          );
        },
        separatorBuilder: (context, index) {
          return Divider(
            height: 1,
          );
        },
        itemCount: 20,
      ),
    );
  }