テキストの色

CoddyのFlutterジャーニー「はじめてのアプリ」セクションの一部。レッスン 9/32。

TextStyleのcolor:は文字の色を設定します。FlutterにはColorsという色の一覧が用意されています。

Text(
  'Go',
  style: TextStyle(color: Colors.green),
)

Colors.に続けて名前を入力します。Colors.red、Colors.blue、Colors.orange、Colors.purpleなどがあります。末尾にAccentを付けると、より明るい色になるものもあります。たとえばColors.redAccentです。これは別の色です。

チャレンジ

簡単

Stopを赤色にします。TextStyleにcolor: Colors.redを追加します。

自分で試してみよう

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Text('Stop', style: TextStyle(fontSize: 48)),
        ),
      ),
    );
  }
}