Zenn
🫥

【Flutter】Dividerのプロパティ

に公開
Flutter
tech

はじめに

ListViewにDividerを利用して区切りの線をつけたい場面があったので、Dividerについて設定できる項目をまとめました。

Dividerのプロパティ

  1. color:

    • 型: Color?
    • 説明: 区切り線の色を指定します。指定しない場合は、デフォルトでテーマの色が使用されます。
    • 例: color: Colors.grey

  2. height:

    • 型: double
    • 説明: Dividerウィジェット全体の高さを指定します。この高さには、線の厚みと前後の余白が含まれます。デフォルトで16.0になっているので、線の上下に謎の余白があると感じた場合は高さの設定が漏れているかもしれません。
    • 例: height: 20.0

  3. thickness:

    • 型: double?
    • 説明: 線自体の厚さを指定します。デフォルトでは、厚さは1ピクセルです。
    • 例: thickness: 2.0

  4. indent:

    • 型: double?
    • 説明: Dividerの開始位置に空けるスペース（インデント）を指定します。デフォルトは0.0です。
    • 例: indent: 16.0

  5. endIndent:

    • 型: double?
    • 説明: Dividerの終了位置に空けるスペース（エンドインデント）を指定します。デフォルトは0.0です。
    • 例: endIndent: 16.0

  6. key:

    • 型: Key?
    • 説明: ウィジェットツリー内でウィジェットを一意に識別するためのキーを指定します。

例

Column(
  children: [
    Text('Item 1'),
    Divider(
      color: Colors.grey, // 線の色
      height: 20.0, // Dividerの全体の高さ
      thickness: 2.0, // 線の厚さ
      indent: 16.0, // インデント
      endIndent: 16.0, // エンドインデント
    ),
    Text('Item 2'),
    Divider(
      color: Colors.blue, // 別の線の色
      height: 30.0, // 高さを変更
      thickness: 1.0, // 厚さを変更
      indent: 32.0, // インデントを変更
      endIndent: 32.0, // エンドインデントを変更
    ),
    Text('Item 3'),
  ],
)

DividerはListViewやColumnなどのウィジェットの子として使用され、要素間の区切りとして利用されます。

おわりに

プロパティに設定されているデフォルト値は見落としがちなポイントでした。VScodeならF１２で定義を確認できるので改めて積極的に利用していきたい所存。
最後までお読みいただき、ありがとうございました。

参考

https://api.flutter.dev/flutter/material/Divider-class.html

Discussion