LoginSignup
2
0

【Flutter】Listview.builderを逆にする

Last updated at Posted at 2024-03-26

こんにちは。
今回は、Listview.builderを逆にする方法を紹介します。
LINEのチャット機能に使えます。

方法

スクリーンショット 2023-08-13 20.18.51.png

ListView.builderのプロパティのreverseをtrueにします。

使用例


final List<String> texts = [
   'text1', 'text2', 'text3', 'text4', 'text5', 'text6', 'text7', 'text8', 'text9',
   'text10', 'text11', 'text12', 'text13', 'text14', 'text15', 'text16', 'text17',
   'text18', 'text19', 'text20', 'text21', 'text22', 'text23', 'text24', 'text25',
   'text26', 'text27', 'text28', 'text29', 'text30', 'text31', 'text32', 'text33',
   'text34', 'text35', 'text36', 'text37', 'text38', 'text39', 'text40', 'text41',
   'text42', 'text43', 'text44', 'text45',
 ];

class MyHomePage extends StatefulWidget {
  MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        reverse: true,
        itemCount: texts.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('${texts[index]}'),
          );
        },
      ),
    );
  }
}

実行例

riverse.gif

最後に

ここまで読んでいただき、ありがとうございました!
いいねしてくれたら、スキップして喜びます:heartpulse:

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0