Question

我要在此应用程序上更改的最后一件事是文本的颜色，以使其与每个栏的背景色更好地融合。

例如，我想将“红色”文本更改为黄色。我想将“浅蓝色”文本更改为橙色。

import 'package:audioplayers/audio_cache.dart';
import 'package:flutter/material.dart';

void main() => runApp(XylophoneApp());

class XylophoneApp extends StatelessWidget {
  void buttonSound(int noteNumber) {
    final player = AudioCache();
    player.play('note$noteNumber.wav');
  }

  Expanded buildKey(
      {Color color, int noteNumber, String text}) {
    return Expanded(
      child: FlatButton(
        color: color,
        onPressed: () {
          buttonSound(noteNumber);
        },
        child: Center(
          child: Text(
            text,
            style: TextStyle(
              fontFamily: 'Vast Shadow',
              fontSize: 20,
              color: Colors.black.withOpacity(0.5),
              fontWeight: FontWeight.w700,
              letterSpacing: 2,
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              buildKey(color: Colors.red, noteNumber: 1, text: 'Red'),
              buildKey(color: Colors.blue, noteNumber: 2, text: 'Light Blue'),
              buildKey(color: Colors.orangeAccent, noteNumber: 3, text: 'Orange Accent'),
              buildKey(color: Colors.deepPurpleAccent, noteNumber: 4, text: 'Purple'),
              buildKey(color: Colors.lightGreen, noteNumber: 5, text: 'Key Lime'),
              buildKey(color: Colors.blueGrey, noteNumber: 6, text: 'Blue Grey'),
              buildKey(color: Colors.lime, noteNumber: 7, text: 'Yellow Accent'),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

为文本颜色添加另一个参数

      {Color color, int noteNumber, String text, Color textColor}) {
    return Expanded(
      child: FlatButton(
        color: color,
        onPressed: () {
          buttonSound(noteNumber);
        },
        child: Center(
          child: Text(
            text,
            style: TextStyle(
              fontFamily: 'Vast Shadow',
              fontSize: 20,
              color: textColor,
              fontWeight: FontWeight.w700,
              letterSpacing: 2,
            ),
          ),
        ),
      ),
    );
  }

然后调用传递文本颜色的方法

buildKey(color: Colors.red, noteNumber: 1, text: 'Red', textColor: Colors.yellow)

确保您传递了textColor。

如何更改每个颜色栏中文本的颜色？

1 个答案: