【5分でわかる】区切り線(divider)を表示する方法

ども、木村です。本業はデータサイエンティスト、副業でアプリ開発をしています。

本記事では、Flutterで区切り線(divider)を表示する方法をご紹介します。

想定読者

Flutterで区切り線(divider)を表示したい方

記事の結論

Flutterで区切り線(divider)を表示したい場合は、

Divider ウェジェットで実現できます。

Divider ウィジェットとは？
Divider ウィジェットの実装方法

Divider ウィジェットの書き方
Divider ウィジェットを実装する

まとめ

Divider ウィジェットとは？

Divider ウィジェットとは、FlutterのUI上で区切り線を表現したい時に利用されるウィジェットです。

Divider class - material library - Dart API

API docs for the Divider class from the material library, for the Dart programming language.

以下のようなオプションが用意されています。

height：線の高さ
thickness：線の太さ
indent：左端の余白スペース
endIndent：右端の余白スペース
color：線の色

Divider ウィジェットの実装方法

Divider ウィジェットの書き方

基本的には以下のような様式でDivider ウィジェットを設定していきます。

const Divider(
    height: 20,
    thickness: 5,
    indent: 20,
    endIndent: 0,
    color: Colors.black, ),

Divider ウィジェットを実装する

では実際にDivider ウィジェットを実装してみましょう

Flutterデフォルトアプリのmain.dartを以下のように書き換えてください。

import 'package:flutter/material.dart';
 void main() => runApp(const MyApp());
 class MyApp extends StatelessWidget {
   const MyApp({Key? key}) : super(key: key);
 static const String _title = 'Divider Sample';
 @override
   Widget build(BuildContext context) {
     return MaterialApp(
       title: _title,
       home: Scaffold(
         appBar: AppBar(title: const Text(_title)),
         body: const MyStatelessWidget(),
       ),
     );
   }
 }

class MyStatelessWidget extends StatelessWidget {
   const MyStatelessWidget({Key? key}) : super(key: key);
 @override
   Widget build(BuildContext context) {
     return Center(
       child: Column(
         children: [
           Expanded(
             child: Container(
               color: Colors.amber,
               child: const Center(
                 child: Text('Above'),
               ),
             ),
           ),
           const Divider(
             height: 20,
             thickness: 5,
             indent: 20,
             endIndent: 0,
             color: Colors.black,
           ),
           Container(
             padding: const EdgeInsets.only(left: 20),
             child: Align(
               alignment: AlignmentDirectional.centerStart,
               child: Text(
                 'Subheader',
                 style: Theme.of(context).textTheme.caption,
                 textAlign: TextAlign.start,
               ),
             ),
           ),
           Expanded(
             child: Container(
               color: Theme.of(context).colorScheme.primary,
               child: const Center(
                 child: Text('Below'),
               ),
             ),
           ),
         ],
       ),
     );
   }
 }

（※上記ソースコードはDivider class – material library – Flutter APIから引用）

これでDivider ウィジェットが実装できました。