【Flutter】​Textのアンダーバー完全ガイド！

Flutter標準

はじめに

Flutterを使用してアプリ開発を進める中で、テキスト表示のカスタマイズは避けて通れない重要な要素です。特にテキストにアンダーバーを追加することは、ユーザーにとって重要な情報を強調したり、インタラクティブな要素を加える上で非常に有効です。しかし、Flutterの豊富なウィジェットとスタイルオプションの中で、どのようにしてテキストのアンダーバーを効果的にカスタマイズできるのか、初心者にとっては戸惑うことも多いでしょう。

この記事では、テキストにアンダーバーを追加する基本的な方法から、部分的なアンダーバーの追加、さらにはアンダーバーのスタイルをカスタマイズする方法まで、具体的で分かりやすい手順を紹介しています。また、クリック可能なアンダーバー付きテキストの作成方法も解説。これらの知識を身につければ、あなたのアプリのUIはより洗練され、ユーザーにとって使いやすいものとなるでしょう。

さあ、Flutterでのテキストカスタマイズの世界へ一緒に飛び込んでみましょう。この記事を読み終えた時、あなたはきっと「これならできる！」という自信と共に、アプリ開発の新たなステップへと進んでいることでしょう。

アンダーバーの基本

Flutterでテキストにアンダーバーを追加する基本的な方法を学びましょう。これは初心者にとって非常に重要なスキルです。

TextウィジェットとTextStyleを使用する

Flutterでは、テキストを表示するためにTextウィジェットを使用します。このウィジェットにはstyleプロパティがあり、ここにTextStyleクラスのインスタンスを渡すことでテキストのスタイルをカスタマイズできます。例えば、フォントサイズやテキストの色を変更することができます。

TextDecorationを使ったアンダーバーの追加

アンダーバーをテキストに追加するためには、TextStyleのdecorationプロパティを使用します。このプロパティにTextDecoration.underlineを設定することで、テキストにアンダーバーを追加できます。以下はその簡単な例です。

Text(
  'これはアンダーバー付きのテキストです',
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
)

アンダーバーのスタイルの変更

さらに、アンダーバーのスタイルをカスタマイズすることも可能です。decorationStyleプロパティを使用すると、アンダーバーを点線や二重線に変更することができます。例えば、以下のコードは点線のアンダーバーを追加します。

Text(
  'これは点線のアンダーバー付きのテキストです',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dotted,
  ),
)

このように、TextウィジェットとTextStyleを使用することで、テキストにアンダーバーを簡単に追加し、そのスタイルをカスタマイズすることができます。これにより、アプリのUIをより魅力的にすることが可能です。

部分的なアンダーバーの追加

Flutterでは、テキストの一部分だけにスタイルを適用することも可能です。これにより、特定のテキスト部分を強調したり、異なるスタイルを適用することができます。

RichTextとTextSpanを使用する

RichTextウィジェットとTextSpanクラスを使用することで、テキストの一部分だけに異なるスタイルを適用することができます。RichTextウィジェットは、複数のTextSpanを子として持つことができ、それぞれのTextSpanに異なるスタイルを適用することが可能です。

例えば、以下のコードは「これは」の部分と「アンダーバー付きのテキストです」の部分に異なるスタイルを適用しています。

RichText(
  text: TextSpan(
    text: 'これは',
    style: TextStyle(fontSize: 20, color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: 'アンダーバー付きのテキストです',
        style: TextStyle(
          decoration: TextDecoration.underline,
        ),
      ),
    ],
  ),
)

複数のスタイルを適用する

この方法を使用することで、テキストの一部分だけを強調したり、異なるスタイルを適用することができます。例えば、リンクや強調したいキーワードにアンダーバーを追加することで、ユーザーの注意を引くことができます。

RichTextとTextSpanを使用することで、テキストの一部分だけにアンダーバーを追加したり、異なるスタイルを適用することが可能です。これにより、テキストをより魅力的で読みやすくすることができます。

アンダーバーのカスタマイズ

Flutterでは、テキストのアンダーバーをカスタマイズすることで、アプリケーションのUIをより魅力的にすることができます。アンダーバーの色、太さ、スタイルを変更することで、テキストに強調や装飾を加えることが可能です。

アンダーバーの色の変更

TextDecorationを使用してアンダーバーを追加した後、decorationColorプロパティを使用してアンダーバーの色を変更することができます。これにより、テキストの色とは異なる色のアンダーバーを設定することが可能です。

Text(
  'Hello World',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationColor: Colors.red,
  ),
)

アンダーバーの太さの調整

アンダーバーの太さは、decorationThicknessプロパティを使用して調整することができます。このプロパティには、アンダーバーの太さを表す数値を設定します。

Text(
  'Hello World',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationThickness: 2.0,
  ),
)

アンダーバーのスタイルの変更（点線、二重線、波線）

アンダーバーのスタイルは、decorationStyleプロパティを使用して変更することができます。利用可能なスタイルには、点線（TextDecorationStyle.dotted）、二重線（TextDecorationStyle.double）、波線（TextDecorationStyle.wavy）などがあります。

Text(
  'Hello World',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dotted,
  ),
)

FlutterではTextStyleクラスのプロパティを利用することで、テキストのアンダーバーを簡単にカスタマイズすることができます。これにより、アプリケーションのUIをより魅力的でユーザーフレンドリーにすることが可能です。

クリック可能なアンダーバー付きテキスト

Flutterでは、テキストにアンダーバーを付けてクリック可能にすることで、ユーザーに対して直感的な操作を提供することができます。これにより、ウェブサイトへのリンクやアプリ内の別の画面への遷移など、様々なアクションを実装することが可能です。

ここではurl_launcherパッケージを使用することで、テキストをクリックした際に外部のウェブサイトを開くことができますサンプルを見ていきます。これは、ユーザーがアプリ内で情報を得るだけでなく、関連する外部リソースにアクセスする際に非常に便利です。

TextButtonを使用した例

TextButtonウィジェットを使用することで、テキスト全体をクリック可能なエリアとして設定できます。これにより、ユーザーがテキストをタップしやすくなります。以下はTextButtonを使用した例です。

TextButton(
  onPressed: () async {
      final uri = Uri.parse('https://www.google.com');
      if (await canLaunchUrl(uri)) {
            await launchUrl(uri);
      } else {
            throw 'Could not launch $uri';
      }
  },
  child: Text(
    'Open Google',
    style: TextStyle(
      decoration: TextDecoration.underline,
      color: Colors.blue,
    ),
  ),
),

このコードでは、TextButtonウィジェットのonPressedプロパティにタップ時の処理を記述し、childプロパティにTextウィジェットを設定しています。Textウィジェットのスタイルにはアンダーバーと青色を設定しています。

InkWellを使用した例

InkWellウィジェットを使用することで、テキストにタップのフィードバックを提供し、クリック可能なエリアとして設定できます。以下はInkWellを使用した例です。

InkWell(
  onTap: () async {
      final uri = Uri.parse('https://www.google.com');
      if (await canLaunchUrl(uri)) {
            await launchUrl(uri);
      } else {
            throw 'Could not launch $uri';
      }
  },
  child: Text(
    'Open Google',
    style: TextStyle(
      decoration: TextDecoration.underline,
      color: Colors.blue,
    ),
  ),
),

このコードでは、InkWellウィジェットのonTapプロパティにタップ時の処理を記述し、childプロパティにTextウィジェットを設定しています。Textウィジェットのスタイルにはアンダーバーと青色を設定しています。InkWellウィジェットを使用することで、タップ時に水滴のようなアニメーションが表示され、ユーザーに対して視覚的なフィードバックを提供することができます。

RichTextとTextSpanを使用した例

RichTextウィジェットとTextSpanウィジェットを組み合わせることで、一部のテキストだけをクリック可能にすることもできます。以下はその例です。

import 'package:flutter/gestures.dart';

RichText(
  text: TextSpan(
    children: [
      TextSpan(
        text: 'Open ',
        style: TextStyle(
          color: Colors.black,
        ),
      ),
      TextSpan(
        text: 'Google',
        style: TextStyle(
          decoration: TextDecoration.underline,
          color: Colors.blue,
        ),
        recognizer: TapGestureRecognizer()
          ..onTap = () async {
                      final uri = Uri.parse('https://www.google.com');
                      if (await canLaunchUrl(uri)) {
                            await launchUrl(uri);
                      } else {
                            throw 'Could not launch $uri';
                      }
          },
      ),
    ],
  ),
),

このコードでは、RichTextウィジェットを使用しています。TextSpanウィジェットを配列としてchildrenプロパティに設定し、一部のテキストだけにスタイルを適用しています。'Google'というテキスト部分にはアンダーバーと青色を設定し、TapGestureRecognizerを使用してクリック時の処理を記述しています。
クリック可能なアンダーバー付きテキストを実装することで、ユーザーに対してより良い体験を提供することができます。url_launcherパッケージと各ウィジェットを使用することで、簡単に外部リンクやアプリ内アクションへのリンクを作成することが可能です。これにより、アプリの使い勝手が向上し、ユーザーの満足度を高めることができます。

アンダーバーとテキストの間隔の調整

テキストとアンダーバーの間隔を調整することで、UIの見た目を改善し、ユーザーにとって読みやすいコンテンツを提供することができます。適切な間隔は、テキストの可読性を高め、全体的なデザインの印象を向上させます。

ContainerウィジェットとPaddingを使用する

ContainerウィジェットとPaddingプロパティを使用することで、テキストとアンダーバーの間隔を調整することができます。これにより、デザインに合わせて細かい調整を行うことが可能です。

Container(
    padding: EdgeInsets.only(bottom: 8),
    decoration: BoxDecoration(
      border: Border(
            bottom: BorderSide(
          	color: Colors.black,
          	width: 2.0,
            ),
        ),
    ),
    child: Text('Adjusted Spacing'),
),

Q&A

Q1: Flutterでテキストにアンダーバーを追加する基本的な方法は何ですか？

A1: Flutterでは、TextウィジェットとTextStyleを使用してテキストにアンダーバーを追加することができます。具体的には、TextStyleのdecorationプロパティにTextDecoration.underlineを設定することで、テキストにアンダーバーを追加することが可能です。

Q2: アンダーバーのスタイルをカスタマイズする方法はありますか？

A2: はい、Flutterではアンダーバーの色、太さ、スタイル（点線、二重線、波線など）をカスタマイズすることができます。これはTextStyleのdecorationColor、decorationThickness、decorationStyleプロパティを使用して行います。これにより、アンダーバーの見た目を細かく調整し、アプリケーションのデザインに合わせることが可能です。

Q3: テキストの一部だけにアンダーバーを追加するにはどうすればよいですか？

A3: テキストの一部にのみアンダーバーを追加するには、RichTextウィジェットとTextSpanを使用します。RichTextウィジェット内でTextSpanを組み合わせることで、テキストの一部分に異なるスタイルを適用することができます。アンダーバーを追加したい部分のTextSpanでdecorationプロパティを設定することで、特定の部分にのみアンダーバーを追加することが可能です。

まとめ

この記事を通して、Flutterでのテキストのアンダーバーの基本から応用まで、幅広く学びました。TextウィジェットとTextStyleを使用して簡単にアンダーバーを追加し、そのスタイルを変更する方法を理解しました。また、RichTextとTextSpanを使用して部分的なアンダーバーを追加し、複数のスタイルを適用するテクニックも習得しました。

アンダーバーのカスタマイズに関しても、色の変更、太さの調整、さらにはスタイルの変更（点線、二重線、波線）まで、細かい部分にも触れることができました。クリック可能なアンダーバー付きテキストの作成方法も学び、url_launcherを使用してウェブサイトを開く方法や、タップジェスチャの追加とハンドリングについても理解を深めました。

以下は、この記事で学んだ重要なポイントをまとめたものです。

<div class="joplin-editable"><pre class="joplin-source" data-joplin-language="markdown" data-joplin-source-open="```markdown
" data-joplin-source-close="
```">- TextウィジェットとTextStyleを使用してアンダーバーを追加
- TextDecorationを使ったアンダーバーのスタイル変更
- RichTextとTextSpanを使用して部分的なアンダーバーを追加
- アンダーバーのカスタマイズ（色、太さ、スタイル）
- urllauncherを使用してクリック可能なアンダーバー付きテキストを作成
- タップジェスチャの追加とハンドリング
- アンダーバーとテキストの間隔の調整

参考

ソース(main.dartにコピペして動作確認用)

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Text Underline Sample'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              FilledButton(
                onPressed: () async {
                  final client = http.Client();
                  final response =
                      await client.get(Uri.parse('https://www.google.com'));
                  print(response.toString());
                },
                child: Text('google'),
              ),
              // 基本的なアンダーバーの付け方
              Text(
                'Basic Underline',
                style: TextStyle(
                  decoration: TextDecoration.underline,
                  decorationStyle: TextDecorationStyle.solid,
                ),
              ),
              SizedBox(height: 20),

              // アンダーバーのスタイル変更
              Text(
                'Dashed Underline',
                style: TextStyle(
                  decoration: TextDecoration.underline,
                  decorationStyle: TextDecorationStyle.dashed,
                ),
              ),
              SizedBox(height: 20),

              // 部分的なアンダーバーの追加
              RichText(
                text: TextSpan(
                  text: 'Partial ',
                  style: TextStyle(color: Colors.black),
                  children: <TextSpan>[
                    TextSpan(
                      text: 'Underline',
                      style: TextStyle(
                        decoration: TextDecoration.underline,
                        decorationStyle: TextDecorationStyle.double,
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 20),

              TextButton(
                onPressed: () async {
                  final uri = Uri.parse('https://www.google.com');
                  if (await canLaunchUrl(uri)) {
                    await launchUrl(uri);
                  } else {
                    throw 'Could not launch $uri';
                  }
                },
                child: Text(
                  'Open Google',
                  style: TextStyle(
                    decoration: TextDecoration.underline,
                    color: Colors.blue,
                  ),
                ),
              ),
              SizedBox(height: 16),

              // クリック可能なアンダーバー付きテキスト
              GestureDetector(
                onTap: () async {
                  final uri = Uri.parse('https://www.google.com');
                  final canLaunch = await canLaunchUrl(uri);
                  if (canLaunch) {
                    if (await launchUrl(uri)) {
                      return;
                    }
                  }
                },
                child: Text(
                  'Clickable Underline',
                  style: TextStyle(
                    decoration: TextDecoration.underline,
                    color: Colors.blue,
                  ),
                ),
              ),
              SizedBox(height: 16),

              RichText(
                text: TextSpan(
                  children: [
                    TextSpan(
                      text: 'Open ',
                      style: TextStyle(
                        color: Colors.black,
                      ),
                    ),
                    TextSpan(
                      text: 'Google',
                      style: TextStyle(
                        decoration: TextDecoration.underline,
                        color: Colors.blue,
                      ),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () async {
                          final uri = Uri.parse('https://www.google.com');
                          if (await canLaunchUrl(uri)) {
                            await launchUrl(uri);
                          } else {
                            throw 'Could not launch $uri';
                          }
                        },
                    ),
                  ],
                ),
              ),
              SizedBox(height: 32),

              // アンダーバーとテキストの間隔の調整
              Container(
                padding: EdgeInsets.only(bottom: 8),
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(
                      color: Colors.black,
                      width: 2.0,
                    ),
                  ),
                ),
                child: Text('Adjusted Spacing'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}