创建具有自定义背景和文本的按钮

【问题标题】：Creating button with custom backgrouind and text创建具有自定义背景和文本的按钮
【发布时间】：2022-01-23 22:02:10
【问题描述】：

我正在尝试创建一个以图像为背景的自定义按钮，但是我遇到了一个问题，并且按钮变小并以图像为中心会产生不良影响。最好的方法是什么？另外最好不要有点击的背景色效果。

         Container(
                                width: double.infinity,
                                height: 40,
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                  image: DecorationImage(
                                    image: AssetImage('assets/images/btn_bg.jpg')
                                  )
                                ),
                                child: TextButton(
                                  child: Text("test"),
                                  onPressed: () {},
                                )
                              ),

【问题讨论】：

你用图标按钮试过了吗

标签： flutter

【解决方案1】：

[复制] “RaisedButton”是一个材质组件，它的形状取决于“材质设计”角色，您可以创建自己的自定义按钮小部件。链接：Button with Image Background Flutter

 GestureDetector(
  child: Container(
   width:120,
   height: 40,
   decoration: BoxDecoration(
     color: Colors.black,
     image: DecorationImage(
       image:AssetImage("assets/background_button.png"), 
       fit:BoxFit.cover
     ),
   child: Text("clickMe") // button text
   )
  ),onTap:(){
   print("you clicked me");
  }
)

有关 GestureDetector 的更多信息链接：https://api.flutter.dev/flutter/widgets/GestureDetector-class.html

【讨论】：