今回、RichTextを使ってみた結果を貼っておきます。
Textの細かい設定を調整できるのはRichTextの魅力だと思います。 例えば、部分の文字をリンク化にしたり、文字色を変更したら、文字サイズを変更したり、自動改行の設定も簡単にできます。
RichTextはTextより簡単に文字列を調整できるWidgetです。
RichTextで多彩な文字ができる理由は、一つのRichTextには複数TextSpanの組合せができることです。
TextSpanには、文字色、文字サイズなどの文字スタイルの設定できますので、 色んなTextSpanを組み合わせると豊かな文字列ができるようになります。
一つの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
)
)
]
),
),
);
リンク化の文字をタップして、ブラウザを起動することについて、 外部のライブラリを利用していますので、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';
}
}
SoftWrapは文字の長さがオーバーする時に改行するかの設定です。 https://api.flutter.dev/flutter/widgets/RichText/softWrap.html
以下はSoftWrap、overflow、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は3行にします。
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/