[Flutter]ListView.builderを逆順にするには？

Flutter

2021.10.28

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

ListView.builderを逆順にする方法を紹介します。

方法
まとめ

方法

ListView.builderを逆順にする方法は３つあります。

reverse

１つ目は、ListView.builderの引数「reverse」を使う方法です。

具体的には、引数「reverse」に「true」を指定します。

ListView.builder(
  reverse: true,
  itemCount: /*count*/,
  itemBuilder: (context, index) {
    return Widget();
  },
)

itemCount – index

２つ目は、要素数とitemBuilderの引数で取得するインデックスを使う方法です。

具体的には、インデックスを、「要素数 – index」に置き換えます。

以下は、使用例です。

ListView.builder(
  itemCount: _list.length,
  itemBuilder: (context, index) {
    var _reverseIndex = _list.length - index; //逆向きのインデックス
    return ListTile(
      title: Text('$_reverseIndex'),
    );
  },
)

List.reverse

３つ目は、Listの「reverse」メソッドを使う方法です。

Listの変数を使っている場合に、便利な方法です。

具体的には、reverseメソッドでListの変数を逆順にします。

  var _list = <int>[1, 2, 3, 4, 5];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: _list.length,
        itemBuilder: (context, index) {
          var _reverseList = _list.reversed.toList();
          return ListTile(
            title: Text('${_reverseList[index]}'),
          );
        },
      ),
    );
  }