【Flutter】RichTextでテキストを自由自在に装飾

2023年5月29日
2023年5月27日
Widget
Flutter, WidgetOfTheWeek

Widget

対象者

Flutterの基本的な概念と使用方法について学びたいと考えているソフトウェアエンジニアまたはUI/UXデザイナー
テキストのスタイリングオプションについて特に興味があり、リッチテキストの概念とその実装方法を理解したい人
自身のスキルセットを拡張し、より競争力のあるプロフェッショナルになりたいと考えている人

はじめに

テキストのスタイリングは、デジタルプロダクトのユーザエクスペリエンスを大きく左右します。特にFlutterを使用してアプリケーションを開発している方々にとって、テキストの視覚的な表現は重要な技術の一つと言えるでしょう。しかし、テキストの装飾は一見すると複雑に見え、どのように取り組めば良いか迷うこともあるかもしれません。

本記事では、そのような疑問を解消するために、FlutterでのRichText の使用方法を詳しく解説します。RichText とは何か、その構造や用途、そして具体的な実装方法など、基本的な概念から応用までを一通りカバーしています。また、RichTextとText.richの違いとそれぞれの用途も触れています。

RichText というのは、日本語で「豊富なテキスト」あるいは「リッチなテキスト」の意味です。プログラムの世界では一般的に、多様なスタイルを適用したテキストを表現するための手法や機能ということを示します。
Flutterにおいては、テキストに複数のスタイルを適用するためのウィジェットです。そのため、単一のテキストブロック内で異なるスタイルのテキストを表現することができます。
実際のアプリとしては、一つの文節内で色やフォントサイズなどを変更するといったケースにおいて、RichTextを利用するとそのような機能を容易に実現することができます。

RichTextとは

Flutterの開発において、テキストは必須の要素です。しかし、テキストが一貫したスタイルだけでなく、様々なスタイルを同時に適用する必要がある場合もあります。このような状況で役立つのが、RichTextというウィジェットです。

RichTextの基本的な概念

RichTextは、一つの段落に複数のスタイルを適用できるようにするFlutterのウィジェットです。複数のスタイルを適用するためには、TextSpanというオブジェクトのツリー構造を使用します。各TextSpanは、それ自体が異なるスタイルを持つことができます。

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)

上記のコードは、”Hello “、”bold”、” world!”という3つの異なるテキストフラグメントを持つRichTextウィジェットを作成します。”bold”というテキストフラグメントだけが太字になっています。

RichTextの用途と利点

RichTextの主な用途は、単一のテキストブロック内で異なるスタイルを適用することです。これにより、一部のテキストを強調したり、異なる色やフォントサイズでテキストを表示したりできます。これは、ユーザーインターフェースの視覚的な一貫性を維持しながら、重要な情報を強調するのに役立ちます。

また、RichTextを使用すると、異なるスタイルのテキストを含む段落を簡単に作成できるため、コードの複雑さが減ります。これは、特に大規模なアプリケーションや多くのカスタムスタイルテキストを持つアプリケーションで有用です。

RichTextの詳細

Flutter開発において、テキスト表示は極めて重要です。しかし、一貫したスタイルだけではなく、複数のスタイルを持つテキストを表示する必要がある場合、RichTextウィジェットがそのニーズを満たします。次に、RichTextの詳細について深掘りしていきます。

RichTextの構造

RichTextウィジェットはTextSpanオブジェクトのツリーを利用します。これにより、テキストの一部に異なるスタイルを適用することが可能になります。具体的には、TextSpanオブジェクトはテキストとスタイルを保持し、その子供としてさらにTextSpanを持つことができます。このツリー構造により、テキストの部分的なスタイリングが可能になります。

例えば、以下のようなコードは、”Hello”と”world”という2つのテキストフラグメントを持つRichTextウィジェットを作成しますが、”world”だけが赤色になっています。

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'world', style: TextStyle(color: Colors.red)),
    ],
  ),
)

TextSpanとの関連性

TextSpanはRichTextにとって重要な役割を果たしています。それは、RichTextが複数のスタイルを持つテキストを表示するための機能を提供してくれるからです。TextSpanはテキストとそのスタイルを保持し、子としてさらにTextSpanを持つことができます。このツリー構造により、複雑なテキストスタイリングが可能になります。

RichTextコンストラクタの詳細

RichTextウィジェットを作成するためのコンストラクタはいくつかの引数を取ります。主要なものは以下の通りです。

text: これはTextSpanオブジェクトで、表示するテキストとそのスタイリングを定義します。
textAlign: これはテキストの整列方法を定義します。値はTextAlign enum（left, right, center, justifyなど）から選択できます。
softWrapとoverflow: これらはテキストがウィジェットの境界を超えたときの振る舞いを制御します。
textScaleFactor: これはテキストのスケールを定義します。

RichTextの実装方法

次に、具体的なRichTextの実装方法について解説します。以下では、RichTextの基本的な使い方から始め、その後で複数のスタイルを適用する方法を説明します。

RichTextの基本的な使い方

RichTextウィジェットの使用は、他の多くのFlutterウィジェットと同様に、非常に直感的です。まず、RichTextウィジェットを作成し、その中にTextSpanを挿入します。このTextSpanは、テキストとそのスタイルを指定します。

RichText(
  text: TextSpan(
    text: 'Hello, Flutter!',
    style: TextStyle(color: Colors.blue, fontSize: 24),
  ),
)

このコードは、青色で24pxのフォントサイズのテキスト”Hello, Flutter!”を表示するRichTextウィジェットを作成します。

複数のスタイルを適用する方法

RichTextの真のパワーは、同じ段落の中で複数のスタイルを適用する能力にあります。これはTextSpanのchildrenプロパティを使用して達成できます。childrenは、さらにTextSpanのリストを受け入れ、それぞれに異なるスタイルを適用できます。

RichText(
  text: TextSpan(
    text: 'Hello, ',
    style: TextStyle(color: Colors.blue, fontSize: 24),
    children: <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)

このコードは、”Hello, “、”bold”、” world!”という3つの異なるテキストフラグメントを持つRichTextウィジェットを作成します。”bold”というテキストフラグメントだけが太字になっています。

このように、RichTextとTextSpanを使用すると、Flutterアプリケーションで高度にカスタマイズ可能なテキストスタイリングを実現できます。

Text.richの利用

次に、Text.richの利用について解説します。Flutterでテキストを表示するためのもう1つのウィジェットであるText.richについての基本的な概念と、それがRichTextとどのように異なるのか、そしてそれぞれがどのように利用されるべきかを説明します。

Text.richとは何か？

Flutterでは、RichTextウィジェットの他にもText.richウィジェットを使用してリッチテキストを表示することができます。Text.richはTextSpanを引数とし、リッチテキストを簡単に表示するための方法を提供します。

Text.rich(
  TextSpan(
    text: 'Hello, ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'Flutter', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: '!'),
    ],
  ),
)

上記のコードは、Text.richウィジェットを使用して”Hello, Flutter!”というテキストを表示します。このうち”Flutter”だけが太字になっています。

Text.richとRichTextの違いと用途

RichTextとText.richはどちらもFlutterのウィジェットで、混合スタイルのテキストの段落を表示することができます。RichTextとText.richの主な違いは、RichTextがウィジェットで、Text.richがコンストラクタであることです。

RichTextはTextSpanウィジェットの上に構築されており、スタイルを変えたいテキストの各スパンに異なるTextStyleを指定することができます。そして、RichTextウィジェットのchildrenプロパティにTextSpanオブジェクトのリストを渡すことで、混合スタイルのテキストを表示することができます。
一方、Text.richは、Textウィジェットのコンストラクタで、混合スタイルのテキストの段落をスタイル設定することができます。このコンストラクタは、TextSpanウィジェットを使って作成したTextSpanオブジェクトを引数にとります。TextSpanオブジェクトは、複数のTextSpanを含むことができ、それぞれが独自のTextStyleを持ちます。

まとめると、RichTextとText.richはどちらもFlutterで混合スタイルのテキストを表示するのに使えますが、RichTextはウィジェットツリーに挿入できるウィジェットで、他のウィジェットと同様にスタイルや位置を設定できるのに対し、Text.richは混合スタイルテキストのパラグラフをスタイル設定できるTextウィジェットのコンストラクタです。

サンプルコードの紹介

以下に示すコードは、RichTextとText.richの利用例です。

RichText(
  text: TextSpan(
        text: 'Hello, ',
        style: TextStyle(color: Colors.red),
        children: <TextSpan>[
          TextSpan(
              text: 'Rich',
              style: TextStyle(
                  fontWeight: FontWeight.bold, color: Colors.blue),
              children: [TextSpan(text: 'Text')]),
          TextSpan(text: '!'),
        ],
  ),
),
Text.rich(
  TextSpan(
        text: 'Hello, ',
        style: TextStyle(color: Colors.red),
        children: <TextSpan>[
          TextSpan(
              text: 'Text.',
              style: TextStyle(
                  fontWeight: FontWeight.bold, color: Colors.blue),
              children: [TextSpan(text: 'rich')]),
          TextSpan(text: '!'),
        ],
  ),
),

Q&A

Q: RichTextとText.richの主な違いは何ですか？

A: RichTextとText.richは両方ともテキストに複数のスタイルを適用するために使用されます。しかし、主な違いはその使用方法です。RichTextはより広範なカスタマイズを可能にしますが、その分コードが少し複雑になる傾向があります。一方、Text.richはよりシンプルで、親のテキストスタイルを継承するためのメソッドが組み込まれています。そのため、基本的な要件のためにはText.richが推奨されます。

Q: RichTextで複数のスタイルを適用するにはどうすれば良いですか？

A: RichTextを使用して複数のスタイルを適用するには、TextSpanウィジェットを使用します。これらはchildrenプロパティを通じてRichTextに提供され、それぞれに異なるスタイルを適用することができます。これにより、1つのRichTextウィジェット内で異なるスタイルのテキストを表示することが可能になります。

Q: FlutterのRichTextの主な利点は何ですか？

A: RichTextはFlutterで強力なテキストスタイリングとカスタマイズを可能にします。これは、異なるスタイルを含むテキストブロックを表示する必要がある場合や、特定の単語やフレーズを強調する必要がある場合に特に役立ちます。これにより、アプリケーションのユーザー体験を向上させることができます。

まとめ

私たちはRichTextとその用途を学びました。それはFlutterの重要な部分であり、テキストに対する強力なスタイリングとカスタマイズの機能を提供します。基本的な概念を把握し、その構造とTextSpanとの関連性を理解しました。また、RichTextコンストラクタの詳細を見てきました。

次に、RichTextの実装方法を学びました。基本的な使い方から始め、複数のスタイルを適用する方法までを探りました。そして、RichTextとは別に存在するText.richの利用方法も見てきました。これら二つの間には微妙な違いがあり、それぞれが特定のシナリオで有用であることを理解しました。

最後に、具体的なコード例を通じてこれらの概念がどのように実践的に適用されるかを学びました。これにより、理論的な知識が実際の開発作業にどのように役立つかを確認しました。

参考

ソース(main.dartにコピペして動作確認用)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter RichText Example'),
        ),
        body: Column(
          children: [
            RichText(
              text: TextSpan(
                text: 'Hello ',
                style: DefaultTextStyle.of(context).style,
                children: <TextSpan>[
                  TextSpan(text: 'world', style: TextStyle(color: Colors.red)),
                ],
              ),
            ),
            RichText(
              text: TextSpan(
                text: 'Hello, ',
                style: TextStyle(color: Colors.red),
                children: <TextSpan>[
                  TextSpan(
                      text: 'Rich',
                      style: TextStyle(
                          fontWeight: FontWeight.bold, color: Colors.blue),
                      children: [TextSpan(text: 'Text')]),
                  TextSpan(text: '!'),
                ],
              ),
            ),
            Text.rich(
              TextSpan(
                text: 'Hello, ',
                style: TextStyle(color: Colors.red),
                children: <TextSpan>[
                  TextSpan(
                      text: 'Text.',
                      style: TextStyle(
                          fontWeight: FontWeight.bold, color: Colors.blue),
                      children: [TextSpan(text: 'rich')]),
                  TextSpan(text: '!'),
                ],
              ),
            ),
            RichText(
              textAlign: TextAlign.center,
              softWrap: true,
              overflow: TextOverflow.fade,
              textScaleFactor: 2,
              text: TextSpan(
                text: 'Hello',
                style: DefaultTextStyle.of(context)
                    .style
                    .copyWith(color: Colors.red),
                children: <TextSpan>[
                  TextSpan(
                      text: ' beautiful',
                      style: TextStyle(fontStyle: FontStyle.italic)),
                  TextSpan(
                      text: ' world',
                      style: TextStyle(fontWeight: FontWeight.bold)),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}