【Flutter】OutlinedButtonのテキストの色を変える方法

未経験から最短3カ月でプログラマーへ！！【０円スクール】

この記事はで読むことができます。

この記事でわかること

OutlinedButtonのスタイルを使ってテキストの色を変更する方法
Textウィジェットのスタイルを使ってテキストの色を変更する方法

アプリ開発に必須なキャッチコピーやテキストをAI（人工知能）が自動作成

目次閉じる

はじめに
まとめ

はじめに

OutlinedButtonはFlutterでよく使われるボタンウィジェットですが、そのままだとデフォルトの色で表示されます。デザインに合わせてボタンのテキストカラーを変更したい場合も多いでしょう。この記事では、OutlinedButtonのテキストの色を変更する2つの方法を初心者向けに解説します。

OutlinedButton.styleFromを使ってテキストの色を変える

最も簡単な方法は、OutlinedButtonのstyleプロパティにOutlinedButton.styleFrom()を使うことです。このメソッドのforegroundColor引数に色を指定することで、ボタンのテキストカラーを変更できます。

Dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('OutlinedButton テキストの色変更'),
        ),
        body: Center(
          child: OutlinedButton(
            style: OutlinedButton.styleFrom(
              foregroundColor: Colors.red, // テキストカラーを赤に設定
            ),
            onPressed: () {
              print('ボタンが押されました');
            },
            child: Text('赤いテキスト'),
          ),
        ),
      ),
    );
  }
}

OutlinedButton.styleFrom()を使うだけで簡単にテキストカラーを変更できます。

Textウィジェットのスタイルを使って色を変える

もう一つの方法は、Textウィジェットに直接スタイルを適用してテキストの色を変更することです。この方法では、TextStyleを使い、そのcolorプロパティに希望する色を指定します。

Dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('OutlinedButton Textスタイル'),
        ),
        body: Center(
          child: OutlinedButton(
            onPressed: () {
              print('ボタンが押されました');
            },
            child: Text(
              '黄色のテキスト',
              style: TextStyle(
                color: Colors.yellow, // テキストカラーを黄色に設定
              ),
            ),
          ),
        ),
      ),
    );
  }
}

TextStyleを使うことで、色だけでなくフォントサイズや太さなども一緒にカスタマイズできます。

まとめ

この記事では、OutlinedButtonのテキストカラーを変更する2つの方法を紹介しました。初心者でも実装しやすい手法なので、ぜひ試してみてください。

方法1では、OutlinedButton.styleFrom()を使って簡単にテキストカラーを変更する方法を学びました。この方法は、ボタンの全体的なスタイルを一括で設定できるのが特徴です。
方法2では、Textウィジェットのstyleプロパティを利用して、個別にテキストの色を変更する方法を学びました。この方法では、テキスト自体により詳細なスタイルを適用することができます。

デザインに応じて、適切な方法を選んで実装してみてください。色の変更だけでアプリの印象は大きく変わるので、こだわりのデザインを作りましょう！

ご質問があれば、どうぞお気軽にお尋ねください。
それでは、Happy Fluttering！

Post Views: 440