Zenn
🐥

[Flutter]RichText、TextSpan Widgetなどの個人的まとめ

2022/08/12に公開
Flutter
Dart
tech

RichText とは

  • RichText Widgetとはテキストの一部だけ色やサイズなどを変えられるWidget。

RichText/TextSpan クラスの使い方

  • RichText()の中に引数text:を持たせその引数値(TextSpan)中で、区切りたい文字ごとにTextSpan()で囲っていく。
RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: const <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)

TextSpan()内での「recognizer:」って何？

  • recognizer プロパティでそれぞれの TextSpan のタップを検出できる。

テキストの指定した部分を大文字や太字にできたり、いわゆるHTML の <a> タグのような リンク などの仕組みが実現できるWidget

TextSpan(
  text: 'こちら',
  style: const TextStyle(
    color: Colors.blue),
    recognizer: TapGestureRecognizer()..onTap = (){
      print('アカウント作成');
      } //Tapするとprint('アカウント作成');が走るように設計
)

TextSpan()内での「recognizer:」の使い方

  • 区切るために使ってたTextSpan()直下のTextStyle()の引数としてrecognizer:プロパティを持たせる
  • recognizer:プロパティの引数としてTapGestureRecognizer()を配置し、そこのonTap()を呼び出す。



以上です。間違えが見つかり次第、或いは知識がアップデートされ次第改訂していきます。🙏

TapGestureRecognizer() class 公式
RichText() class 公式
参考記事

GitHubで編集を提案

Discussion