Flutterラボ リリース3周年記念! プロコースが1ヶ月の料金で2ヶ月間受けられる、実質半額セール (2024年3月17日まで・先着)

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