未経験から最短3カ月でプログラマーへ！！【０円スクール】
この記事はで読むことができます。
この記事でわかること
- Dividerウィジェットを使った横線の表示方法
- Containerを使ってカスタマイズ可能な横線を表示する方法
横線（Horizontal Divider）は、UIの区切り線として使われる便利な要素です。UIの構造を整理したり、コンテンツ間を区切る際に利用されます。Flutterには、簡単に横線を表示できる便利なウィジェットがあり、さらにカスタマイズも可能です。この記事では、Flutter初心者向けに2つの方法を使って横線を表示する方法を紹介します。
方法1: Dividerを使った横線の表示
Dividerは、Flutterに組み込まれているウィジェットで、簡単に横線を表示するための最も一般的な方法です。幅や太さ、色を指定して、見た目をカスタマイズできます。
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.blue, // 線の色
height: 20, // コンテンツ間の余白
thickness: 2, // 線の太さ
indent: 20, // 左側の余白
endIndent: 20, // 右側の余白
),
Text('下部のコンテンツ'),
],
),
),
);
}
}
色、太さ、余白などを調整することで、UIに合わせたカスタマイズが可能です。
方法2: Containerを使って横線を表示
Containerを使って横線をカスタマイズすることも可能です。サイズや色を自由に設定できるので、細かいデザイン調整が必要な場合に便利です。
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: Column(
children: [
Text('上部のコンテンツ'),
Container(
margin: EdgeInsets.symmetric(vertical: 10.0), // 上下に余白
height: 2, // 横線の太さ
width: double.infinity, // 横幅いっぱいに広げる
color: Colors.red, // 線の色
),
Text('下部のコンテンツ'),
],
),
),
);
}
}
Dividerに比べて、自由度が高く、特定のレイアウトやデザインに適した横線を作成できます。
横線を表示する方法は、Flutterで非常にシンプルです。Dividerを使えば基本的な横線を素早く表示でき、Containerを使うことでさらに柔軟なデザインを可能にします。UIに応じて、どちらの方法も使いこなせるようになると便利です。
方法1: Containerを使用すれば、カスタマイズ性の高い横線を作成することができます。
方法2: Dividerを使うと、シンプルで標準的な横線を手軽に追加できます。
ご質問があれば、どうぞお気軽にお尋ねください。
それでは、Happy Fluttering！
