用于 flutter 的 Dart 函数，用 TextButton 替换 FlatButton

Question

如何用 TextButton 替换 FlatButton，同时保留相同的功能？

我需要知道要在 TextButton 的 Expanded buildKey({Color color, int soundNumber}) 中放入什么，因为 color: color 对 TextButton 不起作用

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

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

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

  Expanded buildKey({Color color, int soundNumber}) {
    return Expanded(
      child: FlatButton(
        color: color,
        onPressed: () {
          playSound(soundNumber);
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              buildKey(color: Colors.red, soundNumber: 1),
              buildKey(color: Colors.orange, soundNumber: 2),
              buildKey(color: Colors.yellow, soundNumber: 3),
              buildKey(color: Colors.green, soundNumber: 4),
              buildKey(color: Colors.teal, soundNumber: 5),
              buildKey(color: Colors.blue, soundNumber: 6),
              buildKey(color: Colors.purple, soundNumber: 7),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

请尝试一下这个

Expanded buildKey({Color color, int soundNumber}) {
  return Expanded(
    child: TextButton(
      onPressed: () {
        playSound(soundNumber);
      },
      style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color)),
      child: Text('Button Name'),
    ),
  );
}