Flutter RichTextを使ってみた

Sunday, September 15, 2019 | Sunday, September 15, 2019 | Flutter

Table of Contents

成果
RichTextとText
RichTextの基本構成
例
感想
参考

成果

今回、RichTextを使ってみた結果を貼っておきます。

Textの細かい設定を調整できるのはRichTextの魅力だと思います。例えば、部分の文字をリンク化にしたり、文字色を変更したら、文字サイズを変更したり、自動改行の設定も簡単にできます。

RichText result

RichTextとText

RichTextはTextより簡単に文字列を調整できるWidgetです。

RichTextの基本構成

RichTextで多彩な文字ができる理由は、一つのRichTextには複数TextSpanの組合せができることです。

TextSpanには、文字色、文字サイズなどの文字スタイルの設定できますので、色んなTextSpanを組み合わせると豊かな文字列ができるようになります。

例

Ex1：タイトルと本文の表示

RichText title_description

一つのRichTextで上記の表示をしたいため、タイトル部分と本文部分のTextSpanを作成し、文字Styleを調整する。

Container(
  child: RichText(
    text: TextSpan(
      text: "Title",
      style: TextStyle(
        color: Colors.black, fontSize: 18
      ),
      children: <TextSpan>[
        TextSpan(
          text: "\n"
        ),
        TextSpan(
          text: "description",
          style: TextStyle(
            color: Colors.grey, fontSize: 14
          )
        )
      ]
    ),
  ),
);

Ex2：link

RichText link

リンク化の文字をタップして、ブラウザを起動することについて、外部のライブラリを利用していますので、pubspec.yamlに url_launcher: ^3.0.2 を追加する必要があります。　

Container(
  child: RichText(
      text: TextSpan(
        text: "Search something by Google.",
        style: TextStyle(color: Colors.black, fontStyle: FontStyle.italic),
        children: <TextSpan>[
          TextSpan(
            text: "\nTap ",
            style: TextStyle(color: Colors.black, fontStyle: FontStyle.italic)
          ),
          TextSpan(
            text: "[Google]",
            style: TextStyle(color: Colors.blue, decoration: TextDecoration.underline, fontWeight: FontWeight.bold),
            recognizer: new TapGestureRecognizer()..onTap = () {
              _launchURL();
            }
          ),
          TextSpan(
              text: " will show you the Google Search website.",
              style: TextStyle(color: Colors.black, fontStyle: FontStyle.italic)
          ),
        ]
      )
  ),
);

// need "url_launcher" lib. (I use url_launcher: ^3.0.2.)
_launchURL() async {
  const url = 'https://www.google.com';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

Ex3：自動改行、Max行数、MAX行数に超える時の表示

SoftWrapは文字の長さがオーバーする時に改行するかの設定です。 https://api.flutter.dev/flutter/widgets/RichText/softWrap.html

以下はSoftWrap、overflow、maxLinesの設定例です。

RichText maxLines

SoftWrap: false

RichText(
    softWrap: false,
    text: TextSpan(
        text: "SoftWrap: false",
        style: TextStyle(color: Colors.black, fontSize: 18),
        children: <TextSpan>[
          TextSpan(
              text: "\nthis is a very ",
              style: TextStyle(color: Colors.grey)
          ),
          TextSpan(
              text: "long long long long long long long long long long long long long long long ",
              style: TextStyle(color: Colors.white, backgroundColor: Colors.black)
          ),
          TextSpan(
            text: "text.",
            style: TextStyle(color: Colors.grey),
          )
        ]
    )
)

SoftWrap: true

RichText(
    softWrap: true,
    text: TextSpan(
        text: "SoftWrap: true(Defalt)",
        style: TextStyle(color: Colors.black, fontSize: 18),
        children: <TextSpan>[
          TextSpan(
              text: "\nthis is a very ",
              style: TextStyle(color: Colors.grey)
          ),
          TextSpan(
              text: "long long long long long long long long long long long long long long long ",
              style: TextStyle(color: Colors.white, backgroundColor: Colors.black)
          ),
          TextSpan(
            text: "text.",
            style: TextStyle(color: Colors.grey),
          )
        ]
    )
),

overflow

overflow時に、語尾を「…」にします。 maxLinesは３行にします。　

RichText(
    softWrap: true,
    overflow: TextOverflow.ellipsis,
    maxLines: 3,
    text: TextSpan(
        text: "Overflow and MaxLine",
        style: TextStyle(color: Colors.black, fontSize: 18),
      children: <TextSpan>[
        TextSpan(
            text: "\nthis is a very ",
            style: TextStyle(color: Colors.grey)
        ),
        TextSpan(
          text: "long long long long long long long long long long long long long long long ",
          style: TextStyle(color: Colors.white, backgroundColor: Colors.black)
        ),
        TextSpan(
          text: "text.",
          style: TextStyle(color: Colors.grey),
        )
      ]
    )
),

感想

今回の例をText Widgetでも作成できますが、RichTextを使うとより簡単、且つ少ないコード数でできようになりますので、凄く使いやすいWidgetなので、これからのFlutter実装には、TextだけではなくRichTextもどんどん使っていきたいです。　

参考

https://api.flutter.dev/flutter/widgets/RichText-class.html https://medium.com/flutter-community/make-text-styling-more-effective-with-richtext-widget-b0e0cb4771ef https://androidkt.com/flutter-richtext-widget-example/