【Flutter】点線のDividerの作り方

2024年1月9日

記事内に商品プロモーションが含まれる場合があります

今のところ標準のDividerウィジェットには線を点線にする設定がないため、自作するかパッケージを使う必要があります。

このページではListViewを使った点線のDividerを作成するコードを紹介します。

完成コード

import 'package:flutter/material.dart';

class DottedDivider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final double lineWidth = constraints.maxWidth;  // Dividerの横幅
        final double dashWidth = 5.0; // 点線の幅
        final double dashSpace = 5.0; // 線と線の間隔

         // 点線の個数を計算
        int dashCount = (lineWidth / (dashWidth + dashSpace)).floor();

        return Container(
          width: lineWidth,
          height: 1.0, // Dividerの高さ
          child: ListView.builder(
            itemCount: dashCount,
            scrollDirection: Axis.horizontal,
            itemBuilder: (BuildContext context, int index) {
              // 各点線の描画
              return Container(
                width: dashWidth,
                height: 1.0, // 点線の高さ
                color: Colors.black, // 点線の色
                margin: EdgeInsets.symmetric(horizontal: dashSpace),
              );
            },
          ),
        );
      },
    );
  }
}

LayoutBuilder ウィジェットは、親の制約に基づいてウィジェットを構築するためのものです。ここでは、Dividerの横幅を取得します。
dashWidth は各点線の幅を、dashSpace は各点線の間隔を表します。
dashCount は、線全体に収まるように点線の個数を計算します。(全体の線の長さ÷(点線の幅 + 線と線の間隔の幅))で、点線を表示する個数を算出しています。
ListView.builderでのdashCount個数分、線を表示しています。

点線の幅、間隔、および色は調整可能です。

上記の例では、点線の幅は5.0、線と線の間隔も5.0としていますが、必要に応じて変更できます。

使い方

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dotted Divider Example'),
        ),
        body: Center(
          child: DottedDivider(),
        ),
      ),
    ),
  );
}