Zenn
🔖

【コラム】テキストに強弱をつける方法2戦

に公開
Flutter
tech

今日紹介するのはこんなUI

ポイント

  • 一つの文章の中でスタイリングが異なるテキストを表示する
  • Rowで文章を並べるのではなく、テキストとしてのWidgetを採用する

RichTextを使用する方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: RichText(
        overflow: TextOverflow.clip,
        text: TextSpan(
          children: [
            TextSpan(
              text: "olive_coffeeとは",
              style: TextStyle(
                color: Colors.black,
                fontSize: 24,
              ),
            ),
            TextSpan(
              text: "アカウント名をつけるときに",
              style: TextStyle(color: Colors.orange, fontSize: 18),
            ),
            TextSpan(
              text: "たまたま",
              style: TextStyle(
                color: Colors.red,
                fontSize: 24,
              ),
            ),
            TextSpan(
              text: "オリーブコーヒーの話をしていたからである",
              style: TextStyle(
                color: Colors.blue,
                fontSize: 30,
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

Text.richを使用する方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Text.rich(
        TextSpan(
          children: [
            TextSpan(
              text: "olive_coffeeとは",
              style: TextStyle(
                color: Colors.black,
                fontSize: 24,
              ),
            ),
            TextSpan(
              text: "アカウント名をつけるときに",
              style: TextStyle(color: Colors.orange, fontSize: 18),
            ),
            TextSpan(
              text: "たまたま",
              style: TextStyle(
                color: Colors.red,
                fontSize: 24,
              ),
            ),
            TextSpan(
              text: "オリーブコーヒーの話をしていたからである",
              style: TextStyle(
                color: Colors.blue,
                fontSize: 30,
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

アプリの規模やチームの方針もありますが、使いやすい方を選択してみてください！

Discussion