【Flutter】RichText|テキストの一部をスタイル変更する

今回はRichTextの基本的な使い方を紹介します。

Textでは全てのテキストスタイルを一括変更するのに対し、RichTextでは指定したテキストごとにスタイルを変更できます。

\ 世界最大級のオンライン学習サービス /

目次

RichTextの使い方

RichText(
  text: TextSpan(
    style: TextStyle(
      color: Colors.black,
      fontSize: 20,
    ),
    children: [
      TextSpan(
        text: 'Hello World ',
        style: TextStyle(
          color: Colors.orange,
          fontSize: 30,
        ),
      ),
      TextSpan(
        text: 'from ',
        style: TextStyle(
          fontStyle: FontStyle.italic,
        ),
      ),
      TextSpan(
        text: 'Fluter',
        style: TextStyle(
            color: Colors.blue,
            fontSize: 30,
            fontStyle: FontStyle.italic,
            backgroundColor: Colors.yellow),
      ),
    ],
  ),
),

RichTexttextの引数にTextSpanを渡しテキストのデフォルトスタイルを指定できます。

上記コードのようにchildrenでテキストごとにTextSpanでスタイルを変更できます。

RichTextの応用

child: RichText(
  text: TextSpan(
    children: [
      WidgetSpan(
        child: Icon(
          selected ? Icons.mark_email_read : Icons.email,
          color: selected ? Colors.grey : Colors.blue,
          size: 30,
        ),
      ),
      TextSpan(
        text: ' Check',
        style: TextStyle(
          color: Colors.blue,
          fontSize: 30,
        ),
        recognizer: TapGestureRecognizer()
          ..onTap = () => setState(() {
                selected = !selected;
              }),
      ),
    ],
  ),
),

childrenにはWidgetSpanを使用することで文字列以外のWidgetを使用できます。

またTextSpanrecognizerでテキストがタップされた際のイベントを指定できます。

サンプルコード

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FlutterZero')),
        body: Center(
          child: RichText(
            text: TextSpan(
              children: [
                WidgetSpan(
                  child: Icon(
                    selected ? Icons.mark_email_read : Icons.email,
                    color: selected ? Colors.grey : Colors.blue,
                    size: 30,
                  ),
                ),
                TextSpan(
                  text: selected ? ' Unread' : ' Read',
                  style: TextStyle(
                    color: selected ? Colors.grey : Colors.blue,
                    fontSize: 30,
                  ),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () => setState(
                          () {
                            selected = !selected;
                          },
                        ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次