不推荐使用 Flutter FlatButton - 替代解决方案答案

【问题标题】：Flutter FlatButton is deprecated - alternative solution不推荐使用 Flutter FlatButton - 替代解决方案
【发布时间】：2021-10-23 06:43:15
【问题描述】：

这是我的平面按钮。如何使用 textButton 或提升按钮解决？

Center(
  child: FlatButton(
    onPressed: () {  },
    child: Container(
      margin:EdgeInsets.only(top: 25),
      child: image != null 
        ? Image.file(image,width:140,height:192,fit:BoxFit.fill) 
        : Container(
          width: 240, 
          height: 200, 
          child: Icon(Icons.camera_front, size: 100, color:Colors.grey,)
        ),
      ),
    ),
),

【问题讨论】：

标签： flutter dart deprecated flatbutton

【解决方案1】：

只需将FlatButton 更改为TextButton 或ElevatedButton。

【讨论】：

【解决方案2】：

将平面按钮更改为文本按钮。

Center(
  child: TextButton(
    onPressed: () {  },
    child: Container(
      margin:EdgeInsets.only(top: 25),
      child: image != null 
        ? Image.file(image,width:140,height:192,fit:BoxFit.fill) 
        : Container(
          width: 240, 
          height: 200, 
          child: Icon(Icons.camera_front, size: 100, color:Colors.grey,)
        ),
      ),
    ),
),

对于使用 TextButton 的样式，

            TextButton(
              style: TextButton.styleFrom(
                padding: const EdgeInsets.all(16.0),
                primary: Colors.white,
                textStyle: const TextStyle(fontSize: 20),
              ),
              onPressed: () {},
              child: const Text('Gradient'),
            ),

【讨论】：

【解决方案3】：

FlatButton 替换为 TextButton，RaisedButton 替换为 ElevatedButton。

这是带有样式的TextButton的代码

TextButton(
    onPressed: () {  },
    style: ButtonStyle(
      backgroundColor: MaterialStateProperty.all(Colors.deepPurple)
    ),
    child: Container(
      margin:EdgeInsets.only(top: 25),
      child: image != null
          ? Image.file(image,width:140,height:192,fit:BoxFit.fill)
          : Container(
          width: 240,
          height: 200,
          child: Icon(Icons.camera_front, size: 100, color:Colors.grey,)
      ),
    ),
  ),

【讨论】：