Zenn
🧑‍💻

Flutterアプリのコメント機能で用いた小技

2021/09/13に公開
Flutter
Dart
アプリ開発
小ネタ
tech

はじめに

以前、アプリ開発の中でコメント機能のUIを修正するIssueがあり、そのときに時間を要した点をこの記事にまとめます。誰かの助けになれば幸いです！

やりたいこと

実際に見ていただいたほうが早いと思うので、アプリの一部を載せます。
「コメント〜件すべて見る」をタップするとコメント一覧のモーダルが開くといった箇所で、画像ではコメント３２件のうち最新のコメント２件を表示させています。

この最新のコメント２件を表示させるのに用いた工夫(小技？)を紹介したいと思います！

ベースとなるコードを確認

child: ListView.builder(
  physics: const NeverScrollableScrollPhysics(),
  padding: const EdgeInsets.only(bottom: 50),
  shrinkWrap: true,
  itemCount: comments.length > 1 ? 2 : 1,//コメント数最大２件表示するための三項演算子
  itemBuilder: (context, index) {
    final lastCommnet = comments.toList()[index]; 
    return CommentListTile(comment: lastCommnet);//コメント１件ずつのスタイルを担う自作Widget
  },
),

このベースとなるコードでは、単にリストの上から２件（コメント１,コメント２）が表示されるだけです。
表示させたいのは最新のコメント2件（コメントn-1,コメントn）です。

List を反転させる reversed を使用

Flutter には List 型に reversed というプロパティがあります。
名の通り List 内の要素を反転してくれます。

child: ListView.builder(
  physics: const NeverScrollableScrollPhysics(),
  padding: const EdgeInsets.only(bottom: 50),
  shrinkWrap: true,
  itemCount: comments.length > 1 ? 2 : 1,
  itemBuilder: (context, index) {
    final lastCommnet = comments.reversed.toList()[index];  //変更  
    return CommentListTile(comment: lastCommnet);
  },
),

ただこれだと反転させただけなので、表示させたい順番が違います。

--

ListView(reverse property）使用

先程の List の reversed 同様に ListView にも reverse というプロパティがあります。

child: ListView.builder(
  physics: const NeverScrollableScrollPhysics(),
  padding: const EdgeInsets.only(bottom: 50),
  shrinkWrap: true,
  reverse: true,//追記
  itemCount: comments.length > 1 ? 2 : 1,
  itemBuilder: (context, index) {
    final lastCommnet = comments.reversed.toList()[index];    
    return CommentListTile(comment: lastCommnet);
  },
),

今回のケースでは表示される２件のコメントを更に反転されるので期待した表示になりました！

以上になります！
Flutter 関連の記事作成これから増やしていこうと思っています😆

Discussion