Zenn
🤖

【コラム】ListTileのBorderには条件式をつける必要はない

に公開
Flutter
tech

今回作成するUI

ポイント

  • リストタイルの下辺にBorderを表示したい
  • 最初と最後の要素にはborderが不要

よく見る実装

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: ListView.builder(
      itemCount: list.length,
      itemBuilder: (context, index) {
        return Column(
          children: [
            Text(list[index]),
            if (index + 1 != list.length) // ここでindex.lastのみ表示させない条件をつける
              Divider(
                color: Colors.red,
              ),
          ],
        );
      },
    ),
  );
}

ListView.separatedを採用しよう！

@override
Widget build(BuildContext context) {
   return Scaffold(
      body: ListView.separated(
        itemCount: list.length,
        itemBuilder: (context, index) =>
            Text(list[index], textAlign: TextAlign.center),
        separatorBuilder: (context, index) => Divider(
          color: Colors.red,
        ),
      ),
    );
}

ListView.separatedを採用することで、各要素の間にのみ割り当てる要素を渡すことができます！
UIを表現するファイルに条件式を割り当てることなく、すっきりとしたコードで実装することができるので、おすすめです！！

Discussion