Flutter Tips💡 – Dividerで区切り線を表示する

区切り線とは?

”区切り線”は、コンテンツをグループ分けするために使われます🙌

よく、リストなんかにも使われているのを目にしますね✨

写真でも分かる通り、

左側はコンテンツの分かれ目がわかりづらいですよね…。

でも右側はどうでしょう。区切り線があるだけで整ったデザインになっていますね👌

ではFlutterでは、どのように表示するのでしょうか?

今回はそんな”区切り線の付け方”についてご紹介します😆✨

Dividerウィジェット

Flutterで区切り線を簡単につけるには、

Dividerウィジェット

を使用します🙌

Dividerウィジェットでは区切り線をカスタマイズすることもでき、アプリのデザインに合わせた表現が可能です😆

上の写真のコードはこちらです↓

// 省略

      body: Center(
        child: Column(
          children: <Widget>[

            // 上の余白
            SizedBox( height: 30 ),

            // タイトル文字
            _titleText(),

            // 区切り線
            Divider(
              height: 40,
              thickness: 3,
              color: Colors.amber,
              indent: 16,
              endIndent: 16,
            ),

            // コンテンツ
            _logoBox(),

            // 区切り線
            Divider(
              height: 40,
              thickness: 3,
              color: Colors.white,
              indent: 16,
              endIndent: 16,
            ),

            // コンテンツ
            _logoBox(),

          ],
        ),
      ),

// 省略

そんなに難しそうじゃないですよね😉

では、Dividerウィジェットのカスタマイズについて見ていきましょう✨🙌

太さを指定する – thickness:

(左)デフォルト、(右)3.0
  • 太さを表す数値を指定する
  • 無指定だと、DividerThemeData.dividerThicknessが使用される。
  • DividerThemeData.dividerThicknessもnullだった場合のデフォルトは0.0(1デバイスピクセル)
// 省略

            Divider(
              thickness: 3.0,
            ),

// 省略

色を指定する – color:

  • 色を表すColorオブジェクトを指定する
  • 無指定だと、DividerThemeData.colorが使用される。
  • DividerThemeData.colorもnullだった場合のデフォルトはThemeData.dividerColor
// 省略

            Divider(
              thickness: 3.0,
              color: Colors.amber,
              // color: Colors.white,
            ),

// 省略

高さを指定する – height

  • 高さを表す数値を指定する
  • 例えば40を指定した場合は、”上下に40ずつ”ではなく”40の高さの中心”に描画される
  • 無指定だと、DividerThemeData.spaceが使用される。
  • DividerThemeData.spaceもnullだった場合のデフォルトは16.0
// 省略

            Divider(
              height: 40.0,
            ),
// 省略

先頭&末尾の余白を指定する – indent:/endIndent:

  • 余白を表す数値を指定する
  • ”indent”は「先頭」の余白
  • ”endIndent”は「末尾」の余白
  • ”indent”が無指定の場合、DividerThemeData.indentが使用され、それもnullなら0.0。
  • ”endIndent”が無指定の場合、DividerThemeData.endIndentが使用され、それもnullなら0.0。
// 省略

            Divider(
              indent: 36.0,
              endIndent: 36.0,
            ),
// 省略