Flutter开发中如何将FlatButton替换为TextButton并保留原有功能

Flutter 2.0及以上版本中FlatButton已被弃用，替换为TextButton后无法直接通过color参数设置背景色，需要通过style属性配置样式，修改后可完全保留原有功能和视觉效果。

核心修改点 #

• 组件替换为TextButton
• 背景色通过TextButton.styleFrom的backgroundColor参数设置
• 补充配置去除默认内边距、圆角，确保和原有FlatButton布局完全一致
• 补充空child参数，符合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: TextButton(
        style: TextButton.styleFrom(
          backgroundColor: color,
          padding: EdgeInsets.zero,
          shape: const RoundedRectangleBorder(borderRadius: BorderRadius.zero),
          minimumSize: const Size(double.infinity, double.infinity),
        ),
        onPressed: () {
          playSound(soundNumber);
        },
        child: const SizedBox.shrink(),
      ),
    );
  }

  @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),
            ],
          ),
        ),
      ),
    );
  }
}

修改后运行效果和原有实现完全一致，点击对应色块会播放对应音频，布局、背景色、交互效果无差异。

内容的提问来源于stack exchange，提问作者user15255934