【Flutter】Divider（区切り線）の色を変える方法

2024年9月8日2025年2月24日

未経験から最短3カ月でプログラマーへ！！【０円スクール】

この記事はで読むことができます。

この記事でわかること

Dividerウィジェットを使って色を変更する方法

アプリ開発に必須なキャッチコピーやテキストをAI（人工知能）が自動作成

目次閉じる

はじめに
まとめ

はじめに

区切り線（Divider）は、コンテンツ間の視覚的な区切りをつけるためによく使用されるUI要素です。Flutterでは、簡単に色やスタイルを変更できるため、デザインに合わせてカスタマイズすることができます。この記事では、FlutterでDividerの色を変更する方法を紹介します。

方法1: Dividerウィジェットで色を変更する

Dividerウィジェットは、Flutterで簡単に区切り線を表示するための標準的なウィジェットです。このウィジェットを使うことで、手軽に色やサイズを変更することができます。

Dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dividerの色変更例'),
        ),
        body: Column(
          children: [
            Text('上部のコンテンツ'),
            Divider(
              color: Colors.red,  // 区切り線の色を赤に変更
              height: 20,         // 区切り線の上下余白
              thickness: 2,       // 区切り線の太さ
              indent: 20,         // 左の余白
              endIndent: 20,      // 右の余白
            ),
            Text('下部のコンテンツ'),
          ],
        ),
      ),
    );
  }
}

既存のデザインにピッタリな区切り線を作りたい場合に有効です。