技術記事

micomia株式会社の畑井です。
今回はFlutterFlowに用意されているRich TextというWidgetについて解説していきます。
文の途中のこの単語だけ太字にしたいなどText装飾したい人は必見の機能です。

1.FlutterFlowでRich Textを選択

Rich Text Widgetを挿入するとこのような例文とともに画面に表示されます。

画像のように書き換えてみました。
作成にあたって、例えば、「こんにちは」のみを太字にしたいなど、他のテキストと何か違う装飾をつけたいなどがあればそれを分離して打ち込む必要があります。

今回は試しに「こんにちは」を装飾してみるので右隣の「A」マークを押してください。

「こんにちは」の部分のみのテキストを変更する画面に移動することができたと思います。
ここからは通常のText Widgetのように編集することができます。

オレンジを選択してみると、画像のように「こんにちは」のみオレンジ色になっています。

それぞれのテキストに対して編集画面が用意されていますが、このRich Text自体にも右側メニューをスクロールすると編集画面が現れます。
現時点では変更しても特別意味がないようです。

2.まとめ

今回はRich Textを紹介してみました。
今までTextをRowでWrapするなどして単語ごとに装飾をしていた人はこれを機会にぜひRich Textに切り替えて実装を効率的に行っていきましょう。

動画でもっと知りたい方はこちら