いちのこんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです
この記事を読んでわかること
- Flutterで文字列間に区切り線を実装する方法
- 区切り線のカスタマイズ方法
- 実践的なFlutterのコード例
開発環境
- Dart 3.0.0
- Flutter 3.10.0
1. Flutterにおける区切り線の基本
概要
Flutterでは、Dividerウィジェットを使用して簡単に区切り線を追加できます。このセクションでは、最も基本的なDividerの使用方法を説明します。
サンプルコード1: 基本的なDividerの実装
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('区切り線のデモ'),
),
body: Column(
children: <Widget>[
Text('上のテキスト'),
Divider(),
Text('下のテキスト'),
],
),
),
);
}
}サンプルコードの解説
- 1行目: FlutterのMaterial Designライブラリをインポートします。
- 3行目: アプリケーションのエントリポイントです。
- 7-25行目:
MyAppクラスは、アプリのルートウィジェットを定義しています。 - 11行目:
Scaffoldウィジェットを使用して、基本的なマテリアルデザインのレイアウトを作成します。 - 12-21行目:
AppBarとColumnウィジェットを使用して、画面のレイアウトを構築します。 - 18行目:
Dividerウィジェットを使用して、2つのテキストウィジェットの間に区切り線を挿入します。
表示確認
いちのそれでは、表示を確認してみましょ〜
2. 文字列間に区切り線を実装する方法
概要
次に、より実践的な形で文字列間に区切り線を実装する方法を見ていきます。
サンプルコード2: ListViewを使用した区切り線の実装
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('区切り線のリストデモ'),
),
body: ListView.separated(
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('アイテム $index'),
);
},
separatorBuilder: (BuildContext context, int index) => Divider(),
),
),
);
}
}サンプルコードの解説
- 15行目:
ListView.separatedコンストラクタを使用して、アイテム間に自動的に区切り線を挿入するリストを作成します。 - 16行目:
itemCountプロパティでリストのアイテム数を指定します。 - 17-21行目:
itemBuilderプロパティで、リストの各アイテムのレイアウトを定義します。 - 22行目:
separatorBuilderプロパティで、アイテム間に挿入される区切り線のウィジェットを定義します。
表示確認
いちのそれでは、表示を確認してみましょ〜
リスト(ListView)の要素を削除する方法にご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。
3. 区切り線のカスタマイズ
概要
Flutterでは、Dividerウィジェットのcolor、height、thickness、indent、endIndentプロパティを使用して、区切り線の見た目をカスタマイズできます。
サンプルコード3: カスタマイズされたDividerの実装
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('カスタマイズされた区切り線のデモ'),
),
body: Column(
children: <Widget>[
Text('上のテキスト'),
Divider(
color: Colors.blue,
height: 20,
thickness: 5,
indent: 20,
endIndent: 20,
),
Text('下のテキスト'),
],
),
),
);
}
}サンプルコードの解説
- 18行目:
Dividerウィジェットのcolorプロパティを使用して、区切り線の色を青に設定します。 - 20行目:
heightプロパティを使用して、区切り線の上下の空白の高さを20に設定します。 - 21行目:
thicknessプロパティを使用して、区切り線の太さを5に設定します。 - 22-23行目:
indentとendIndentプロパティを使用して、区切り線の左右のインデント（余白）を20に設定します。
表示確認
いちのそれでは、表示を確認してみましょ〜
まとめ
いかがでしたでしょうか？今回は、文字列間の区切り線(Divider)を実装しカスタマイズする方法を実践的なサンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！
いちの自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。
実践的なリストの使い方についてご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。
コメント
コメント一覧 （2件）
[…] 【Flutter】文字列間の区切り線(Divider)を実装しカスタマイズするまでの完全… […]
[…] 【Flutter】文字列間の区切り線(Divider)を実装しカスタマイズするまでの完全… […]