Flutterでテキストの色を変更する方法


  1. TextStyleを使用して色を変更する方法:

上記の例では、TextStyleを使用してテキストの色を赤色に変更しています。colorプロパティを使用して、任意の色を指定することができます。また、fontSizefontWeightなどのプロパティを使用して、さらにスタイリングを行うこともできます。

  1. Themeを使用して色を変更する方法:

上記の例では、Themeウィジェットを使用してテキストの色を青色に変更しています。textThemeプロパティを使用して、headline1などのテキストスタイルに対して色を設定することができます。

  1. 自作ウィジェットを使用して色を変更する方法:
class ColoredTitle extends StatelessWidget {
  final String title;
  final Color color;
  ColoredTitle({required this.title, required this.color});
  @override
  Widget build(BuildContext context) {
    return Text(
      title,
      style: TextStyle(color: color),
    );
  }
}

上記の例では、ColoredTitleというカスタムウィジェットを作成しています。このウィジェットでは、titlecolorを引数として受け取り、それに基づいてテキストの色を設定しています。使用する際は、以下のように呼び出すことができます:

これらはいくつかの基本的な方法ですが、Flutterではさまざまな方法でテキストのスタイリングが可能です。必要に応じて、上記の例を参考にして、自身の要件に合わせたスタイリングを行ってください。