Flutter 文字列の途中の文字のみ色を変更したり、タップイベントを受ける方法まとめ

はじめに

様々なサービスのログイン画面で、アカウントを持っていない方向けに
「アカウントを作成していない方はこちら」とあり
「こちら」や「ここ」の文字列色が違い、リンクになっている表示をよく見かけます。
登録を必要とするサービスを作成するにあたって必須となるアイテムです。

今回はこの実装をする方法を以下の3つ紹介します。
1.TextButtonを使用する
2GestureDetectorを使用する
3RichTextを使用する

なお、Flutterでの開発経験が浅いため、至らぬ箇所があれば指摘お願いいたします。

1.TextButtonを使用する

これは目的を達成できているか微妙なところですが一つの手法として記載します。
テキストの途中でテキストボタンを表示する方法です。
これには一つ注意点があり、無駄な空白をなくすことが出来ません。
（改善策はあるかもしれませんが、今の自分の技量ではなくすことはできませんでした。）

  // RowWidgetで横並びにする
  Row(
    // 中央寄せ
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text('アカウントを作成していない方は'),
      TextButton(
        // できるだけボタンを小さくする
        style: TextButton.styleFrom(minimumSize: Size(1, 1)),
        onPressed: () {
            // タップ時の処理
            print('タップされました');
      },
        child: Text('ここ'),
        ),
        Text('をクリック'),
    ],
  ),

↓このように、少し空白ができます。
色をつけたり、タップしてみると分かりますが、あくまでボタンなので、ボタンのスペースがとられてしまいます。

2.GestureDetectorを使用する

テキストの途中に、ジェスチャー・タップなどのイベントを検出するウィジェットを配置する方法です。
このウィジェットをイベントを受けたいテキストにラップさせることで、onTapイベントを受けることができるようになります。

  Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text('アカウントを作成していない方は'),
      GestureDetector(
        onTap: () {
          // タップ時の処理
          print('タップされました!');
        },
          child: Text('ここ', style: TextStyle(color: Colors.blue),)),
      Text('をクリック'),
    ],
  ),

結果は↓の通りです。

3.RichTextを使用する

  RichText(
    text: TextSpan(
      style: TextStyle(color: Colors.black),
      children: [
        TextSpan(text: 'アカウントを作成していない方は'),
        TextSpan(text: 'ここ',
          style: TextStyle(color: Colors.blue),
          recognizer: TapGestureRecognizer()..onTap = () {
            // タップ時の処理
            print('タップされました');
          }
        ),
        TextSpan(text: 'をクリック'),
      ]
    ),
  ),

こちらも2のGestureDetectorを使用した時と同じ見た目になります。

さいごに

今回のようなケースでは、TextButtonを使用することはほとんどないかと思います。
GestureDetectorを使用するか、RichTextを使用するかは、正直好みかと思います。
ケースバイケースで、コードをスッキリ書ける方を選択するのが良いでしょう。