Skip to content

Latest commit

 

History

History
50 lines (45 loc) · 2.08 KB

35074a8c3e65ec.md

File metadata and controls

50 lines (45 loc) · 2.08 KB
Raw
title emoji type topics published
[Flutter]RichText、TextSpan Widgetなどの個人的まとめ
🐥
tech
Flutter
Dart
true

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 の タグのような リンク などの仕組みが実現できる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 公式 参考記事