Flutter トークアプリ風ListViewを作る

やってみたいこと：LINEやTwitterのDMみたいなレイアウト・動作を作ってみる。

色んなやり方はあるかと思いますが、今回はListView.builderを使って実現します。

ListView.builder側の準備

まずはベースとなるListView.builderを準備します。

ListView.builder( 
  scrollDirection: Axis.vertical, 
  shrinkWrap: true, 
  reverse: true, 
  controller: _scrollController, 
  itemBuilder: (BuildContext context, int index) { 
    if (index > itemListOrderByNewDesc.length - 1) return null; 
    else return _chatItemBuilder( itemListOrderByNewDesc[index]); 
  }, 
),

reverse:trueとすることで、scrollControllerインスタンスのanimateTo()を0.0と指定すると一番下(トークの最新値)の場所まで飛べる様になります。

_scrollController.animateTo( 0.0, curve: Curves.easeOut, duration: const Duration(milliseconds: 300), );

また、アイテム配列に関しては上記の設定や最新値が下に来る様にしたい関係から、日付の降順です。添字[0]が一番新しいアイテムが来る様にしましょう。state管理さえできていれば、アイテムを追加した際に上記スクロール処理を行えば、最新値が追加されたら強制スクロールすることができます。

今回はitemBuilderのところで別メソッドを呼び出しWidgetを返す様にしています。なので、

Widget _chatItemBuilder(String text){
  return ListTile(
    ~~~~~ 
  )
}

の様なメソッドを作成して、そこでいい感じのWidgetを返す様にしてください。

まとめ

ListView.builderを使えば難しい処理を実装しなくても設定値を変えるだけでトークアプリライクなUIが簡単に実装できます。この辺りがXamarinだと大変だった思い出があります。Flutterは特に凝ったUIに関しては簡単に実現できてしまうのが非常に助かります。