【Flutter】ListViewの要素同士のパディングを設定する方法

2024年2月5日2025年2月24日

未経験から最短3カ月でプログラマーへ！！【０円スクール】

この記事はで読むことができます。

この記事でわかること

SizedBoxを使用したパディング
ListView.separatedとSizedBoxを使用したパディング

アプリ開発に必須なキャッチコピーやテキストをAI（人工知能）が自動作成

目次閉じる

はじめに
まとめ

はじめに

Flutterにおいて、リストビュー（ListView）内の要素同士に適切なパディングを設定することは、見た目やユーザーエクスペリエンスの向上に寄与します。この記事では、初心者向けにListViewの要素同士にパディングを設定する2つの方法に焦点を当て、それぞれの特徴を紹介します。

方法1: SizedBoxを使用したパディング

要素の間にSizedBoxを配置し、引数「height」でパディングにしたい値を設定します。

Dart

child: ListView(
  children: [
    SizedBox(
      height: 10 /*パディング*/,
    ),
    ListTile(
      title: Text('リストアイテム1'),
    ),

    SizedBox(
      height: 10 /*パディング*/,
    ),
  ],
),

簡単な構造で、要素同士の垂直方向のパディングを指定できます。

方法2: ListView.separatedとSizedBoxを使用したパディング

ListView.separatedを使用し、要素と要素の間にSizedBoxを挟んでパディングを設定します。

Dart

ListView.separated(
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('リストアイテム ${index}'),
    );
  },
  separatorBuilder: (context, index) {
    return SizedBox(
      height: 5, // パディング
    );
  },
  itemCount: 10, // 要素数
),

separatorBuilderでパディングの高さを指定でき、要素数が変動しても対応できます。