🧑‍💻

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

2 min read

はじめに

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


やりたいこと

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

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


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

以下 comments とありますが、ここではコメントが n 件格納された List と解釈してください

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

このベースとなるコードでは、単にリストの上から2件(コメント1,コメント2)が表示されるだけです。
表示させたいのは最新のコメント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);
  },
),       

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

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

Discussion

ログインするとコメントできます