【 Divider 】区切り線を実装しよう！【Flutter】

「区切り線を実装したい！」

本記事ではそんな要望にお答えします。

区切り線を実装できるウィジェット、Divider ウィジェットについて解説します。

基本的な使い方からカスタマイズ方法まで詳細に解説します。

以下のような区切り線を実装することが可能です。

ぜひ読んでみてください！

基本的な使い方

区切り線を実装したい場所に、Divider()ウィジェットを配置することで区切り線が実装されます。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            const Divider(),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }
}

カスタマイズ方法

カスタマイズ方法について解説します。

高さ

Dividerの空白を含めた高さをheightで設定できます。

        Column(
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            const Divider(
              height: 50,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ],
        ),

色

区切り線の色をcolorにて設定可能です。

        Column(
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            const Divider(
              color: Colors.green,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ],
        ),

線の太さ

線の太さをthicknessで設定可能です。

        Column(
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            const Divider(
              thickness: 5,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ],
        ),

前後の余白

前後の余白をindent、endIndentにて設定可能です。

        Column(
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            const Divider(
              indent: 24,
              endIndent: 48,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ],
        ),

まとめ

本記事では区切り線を実装できるウィジェット、Divider ウィジェットについて解説しました。

基本的な使い方からカスタマイズ方法まで詳細に解説しました。

いかがだったでしょうか。

シンプルながら使い勝手の良いウィジェットかと思います。

ぜひ使ってUIを実装してみてください！

本記事があなたのアプリ開発の一助となれば幸いです。

編集後記（2022/11/24）