広告

Flutterラボの

プレミアム会員になる

【Flutter】RichTextでテキストの途中で色やサイズを変更する

2021.12.09

文字を表示するのはTextウィジェットですが、RichTextを使うことでテキストの途中でスタイルを変えることができます。

RichText(
  text: TextSpan(
    style: Theme.of(context).textTheme.bodyText2,
    children: const [
      TextSpan(
          text: 'Flutter',
          style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold, color: Colors.blue)
      ),
      TextSpan(
          text: 'ラボ',
          style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.blue)
      ),
      TextSpan(
        text: 'は あらゆる角度から',
        style: TextStyle(fontSize: 18)
      ),
      TextSpan(
        text: 'Flutter',
        style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold, color: Colors.blue)
      ),
      TextSpan(
        text: 'が学べるサービスです',
        style: TextStyle(fontSize: 18)
      ),
    ]
  ),
)

FlutterラボのWEBサイトでも多用しています。

Flutterラボ|動画で学ぶFlutter学習サイト Flutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで flutterlabo.tech


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ 広告のECサイトを開発(https://ec-ad.tech/)