【Flutter】縦線（区切り線）を表示する方法

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

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

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

この記事でわかること

VerticalDividerを使った縦線の表示方法
Containerを使ってカスタマイズ可能な縦線を表示する方法

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

目次閉じる

はじめに
まとめ

はじめに

縦線（Vertical Divider）は、UIの区切りやコンテンツの区分けに役立ちます。Flutterでは、簡単に縦線を表示することができ、特にUIのデザインやコンテンツを視覚的に整理したいときに活躍します。この記事では、初心者向けに2つの方法を使って縦線を表示する方法を解説します。

方法1: VerticalDividerを使った縦線の表示

VerticalDividerは、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('VerticalDividerの例'),
        ),
        body: Row(
          children: [
            Text('左側のコンテンツ'),
            SizedBox(
              height: 20,
              child: VerticalDivider(
                width: 10, // 縦線の横幅
                thickness: 2, // 縦線の太さ
                color: Colors.blue, // 縦線の色
              ),
            ),
            Text('右側のコンテンツ'),
          ],
        ),
      ),
    );
  }
}

幅、太さ、色を自由に設定することができ、UIのデザインに合わせた調整が可能です。

方法2: Containerを使ってカスタマイズ可能な縦線を表示

Containerを使うことで、縦線をより柔軟に作成することができます。Containerのサイズや色を指定することで、自由なデザインの縦線を作ることが可能です。

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('Containerを使った縦線の例'),
        ),
        body: Row(
          children: [
            Expanded(
              child: Text('左側のコンテンツ'),
            ),
            Container(
              width: 2, // 縦線の横幅
              height: double.infinity, // 縦線を画面全体に表示
              color: Colors.red, // 縦線の色
            ),
            Expanded(
              child: Text('右側のコンテンツ'),
            ),
          ],
        ),
      ),
    );
  }
}

Containerを使うことで、幅や高さを自由に設定し、任意の場所に縦線を表示できます。