Flutter入門

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


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

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

想定読者

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

記事の結論

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

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

Divider ウィジェットとは?

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

Divider class – material library – Flutter API

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

  • 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 ウィジェットが実装できました。

まとめ

Divider ウィジェットはUIを細かく調整するオプションが用意されており非常に使いやすいウィジェットです。

ぜひこの機会にマスターして開発で利用してみてください!

最新のFlutterの勉強方法 まとめ

Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。

Flutterの勉強方法を知る

Flutterを動画で学習する

Flutterを書籍で学習する