Zenn
🔖

Flutterで箇条書きを毎回書くのが面倒？BulletText Widgetで解決しよう

に公開
Flutter
idea

🔰 はじめに

アプリ内でちょっとした説明文や注意書きを書くとき、「・」付きの箇条書きを使いたくなることはありませんか？

FlutterではこれをRowなどを使って簡単に表現できますが、毎回書くのは面倒です。
今回は、「・」のバレット付きテキストを再利用可能なWidgetとしてまとめる方法を紹介します。

🧩 基本的な実装

まずはRowで「・」とテキストを並べるだけのシンプルな実装です。

Row(
  children: const [
    Text('・'),
    SizedBox(width: 4),
    Expanded(
      child: Text('これは箇条書きのテストです。'),
    ),
  ],
);

ポイント

  • Text('・') でバレットを表示
  • SizedBox(width: 4) でバレットと本文に少しスペース
  • Expanded を使うことで、長文が折り返されてもレイアウトが崩れません

🛠 クラス化して再利用可能にする

同じようなバレット付きテキストを何度も書くのは非効率です。
そこで、BulletText という名前の StatelessWidget に切り出して再利用可能にします。

class BulletText extends StatelessWidget {
  final String text;

  const BulletText({super.key, required this.text});

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text('・'),
        const SizedBox(width: 4),
        Expanded(child: Text(text)),
      ],
    );
  }
}

これで BulletText(text: '〜') と書くだけで簡単に箇条書きを作れるようになります。

✅ 完全版のコード

DartPadでそのまま貼って動かせる、最終形のコードです。
Column を使って複数表示できるようになっています。

import 'package:flutter/material.dart';

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

/// 再利用可能なバレット付きテキスト
class BulletText extends StatelessWidget {
  final String text;

  const BulletText({super.key, required this.text});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text('・'),
          const SizedBox(width: 4),
          Expanded(child: Text(text)),
        ],
      ),
    );
  }
}

/// 実際にバレット付きテキストを表示する画面
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const items = [
      'これは1つ目の項目です。',
      'これはとても長い2つ目の項目です。改行されても左側に揃います。',
      '3つ目の項目です。',
    ];

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('箇条書きテスト')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: items.map((text) => BulletText(text: text)).toList(),
          ),
        ),
      ),
    );
  }
}

🧭 おわりに

FlutterでのUI開発では、こうした小さなUIパーツを再利用可能なWidgetに切り出す習慣がとても大事です。
プロダクトコードの可読性も保たれ、保守もしやすくなります。

簡単なRowの組み合わせからでも、立派な「部品」を作ることができるので、ぜひ試してみてください！

Discussion