在 Flutter 中创建一个带有图像的按钮？答案

【问题标题】：Create a button with an image in Flutter?在 Flutter 中创建一个带有图像的按钮？
【发布时间】：2019-05-07 12:56:18
【问题描述】：

如何使用 Flutter 创建带有图像的按钮？这似乎是最简单的事情，但图像并没有完全填充父小部件。这就是我所拥有的：

Container(child: ConstrainedBox(
    constraints: BoxConstraints.expand(),
    child: FlatButton(onPressed: null,
        child: Image.asset('path/the_image.png'))))

我遵循this post 作为指导。我的图像如下所示：

注意 PNG 图像周围的填充 - 它不在代码中。它从何而来？ PNG 本身没有画布填充，因此这一定不是正确的技术。

我所需要的只是一个按钮，其图像填充整个FlatButton，或者我可以添加动作的另一个小部件，而不会扭曲图像。

【问题讨论】：

标签： flutter dart button flutter-layout

【解决方案1】：

在FlatButton 中包含图像可能不符合您的要求，因为它会自行处理一些样式（如填充）。

要完全控制您的按钮方面，您可能需要构建一个自定义小部件（甚至是一个简单的 Container 和一个自定义 BoxDecoration 来显示图像）并用手势识别器包装它以处理用户交互（a简单的点击，在你的情况下）。最简单的实现是使用GestureDetector，但也有其他小部件，例如InkWell，它在点击时在可点击的小部件表面上呈现材料设计波纹。

【讨论】：

这行得通。我最终做了以下事情：Expanded( child: Container( child: ConstrainedBox( constraints: BoxConstraints.expand(), child: Ink.image( image: AssetImage( 'path/the_image.png'), fit: BoxFit.fill, child: InkWell( onTap: null, ), ), ), ), ),
我建议使用IconButton，请参阅下面的一些答案。

【解决方案2】：

我认为这也应该有效。只需将 FlatButton 的填充指定为零。

Container(child: ConstrainedBox(
constraints: BoxConstraints.expand(),
child: FlatButton(
         onPressed: null,
         padding: EdgeInsets.all(0.0),
         child: Image.asset('path/the_image.png'))))

【讨论】：

非常正确，注意应该是EdgeInsets.all(0.0)。
FlatButton 现在已弃用。请改用IconButton。

【解决方案3】：

按下时在图像上显示带有波纹效果的图像图标按钮：

          Material(
            // needed
            color: Colors.transparent,
            child: InkWell(
              onTap: () => myOnTap, // needed
              child: Image.asset(
                "assets/resize.png",
                width: 22,
                fit: BoxFit.cover,
              ),
            ),
          )

【讨论】：

根据材料指南，这是推荐的... 需要在任何小部件上进行波纹触摸。 IconButton 也可以正常工作！ ;-)
我无法让这个版本显示连锁反应。（我使用 FlatButton 获得了更好的涟漪效果，但涟漪只在按钮的框架周围，而不是在图像上方。）

【解决方案4】：

我认为，更简单且用途最广泛的方法是使用 GestureDetector，因为它允许您为不同的手势调用不同的函数，例如单击、双击、长按等。

GestureDetector(
                onTap: () => _yourFunction('yourParameter'),
                child: Image.asset('yourimagefolder/yourimage.png'),
              ),

【讨论】：

【解决方案5】：

IconButton(
  icon: Image.asset('path/the_image.png'),
  iconSize: 50,
  onPressed: () {},
)

【讨论】：

【解决方案6】：

将您的图片放在gestureDetector 中，如下所示：

GestureDetector(
    onTap: () {}
    child: Image.asset('path/the_image.png')
)

【讨论】：

欢迎来到 SO！手势检测器还有另一个答案，那么您的回复有哪些好处？

【解决方案7】：

您可以使用 Stack 轻松做到这一点

      Stack(
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height / 3.6,
            width: MediaQuery.of(context).size.width / 2.2,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child:imageLoader1(img),
             /* Image.asset(
                "$img",
                fit: BoxFit.cover,
              ),*/
            ),
          ),

          Positioned(
            right: -10.0,
            bottom: 3.0,
            child: RawMaterialButton(
              onPressed: (){},
              fillColor: Colors.white,
              shape: CircleBorder(),
              elevation: 4.0,
              child: Padding(
                padding: EdgeInsets.all(5),
                child: Icon(
                  isFav
                      ?Icons.favorite
                      :Icons.favorite_border,
                  color: Colors.red,
                  size: 17,
                ),
              ),
            ),
          ),
        ],


      ),

【讨论】：

【解决方案8】：

GestureDetector(
    onTap: () {print('click on edit');},
    child: Image(
        image: AssetImage('assets/images/icons/edit-button.png'),
        fit: BoxFit.cover,
        height: 20,
    )
),

【讨论】：

请尽量解释代码块而不是直接给出，解释可能对社区有所帮助
复制自here。

【解决方案9】：

底部带有波纹效果和文字的图像按钮

（当然可以去掉文字部分和Stack）

  Material(
    elevation: 4.0,
    clipBehavior: Clip.hardEdge,
    color: Colors.transparent,
    child: Stack(
      alignment: Alignment.bottomCenter,
      fit: StackFit.passthrough,
      children: [
        Ink.image(
          image: AssetImage(imagePath),
          fit: BoxFit.cover,
          width: 120,
          height: 120,
          child: InkWell(onTap: () {}),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(label, style: const TextStyle(fontSize: 20)),
          ),
        )
      ],
    ),
  );

【讨论】：

【解决方案10】：

截图：

代码：

InkWell(
  onTap: () {}, // Handle your callback.
  splashColor: Colors.brown.withOpacity(0.5),
  child: Ink(
    height: 100,
    width: 100,
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('your_image_asset'),
        fit: BoxFit.cover,
      ),
    ),
  ),
)

【讨论】：

【解决方案11】：

我正在创建自己的墨水池，它有三重动画，可以带孩子和回调 onPress 对于像图像这样的非透明背景

class InkWellApp extends StatelessWidget {
  final Function onTap;
  final Widget child;
  final EdgeInsets margin;

  final BorderRadius borderRadius;

  const InkWellApp(
      {Key key,
      this.onTap,
      this.child,
      this.borderRadius = BorderRadius.zero,
      this.margin = EdgeInsets.zero})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: margin,
      child: Stack(
        children: [
          child,
          Positioned.fill(
            child: Material(
              color: Colors.transparent,
              borderRadius: borderRadius,
              child: InkWell(
                borderRadius: borderRadius,
                onTap: onTap,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

然后你可以在应用程序中使用它与任何像这样的小部件或图像

 InkWellApp(
        onTap: (){
                //your code here
           },
        child: yourWidget,
  ),

注意：borderRadius 和 margin 是可选参数

【讨论】：

【解决方案12】：

可以为此使用 TextButton。

 TextButton.icon(
                  style: ButtonStyle(
                      backgroundColor:
                          MaterialStateProperty.all(Colors.white)),
                  onPressed: () {},
                  icon: Image.asset('path/the_image.png'),
                  label: Text(
                    'Button Text',
                    style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                )

【讨论】：

【解决方案13】：

FlatButton(
                onPressed: (){},
                color: Colors.orange,
                padding: EdgeInsets.all(10.0),
                child: Column( 
                  children: <Widget>[
                   Image.asset(name),
                    Text("Add")
                  ],
                );

您可以添加图标和图像

【讨论】：

FlatButton 现在已弃用。请改用IconButton。

【解决方案14】：

如果您有一个圆角矩形按钮，请按照以下代码进行操作

TextButton(
                        style: TextButton.styleFrom(
                          alignment: Alignment.topLeft,
                          backgroundColor: Colors.lightBlue,
                          minimumSize: const Size(double.infinity, 200),
                          padding: const EdgeInsets.all(0),
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(20)),
                        ),
                        onPressed: () => null,
                        child: SizedBox(
                          height: 100,
                          width: 500,
                          child: Stack(
                            children: [
                              **Positioned(
                                top: 0,
                                left: 0,
                                right: 0,**
                                child: ClipRRect(
                                  borderRadius: const BorderRadius.vertical(
                                    top: Radius.circular(20),
                                  ),
                                  child: Image.asset(
                                    'assets/miniMartGrocery.png',
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ),
                              Positioned(
                                  top: 10,
                                  left: screenSize.width * 0.84,
                                  child: Container(
                                    width: 40,
                                    height: 40,
                                    decoration: BoxDecoration(
                                        borderRadius:
                                            BorderRadius.circular(100),
                                        color: Colors.white),
                                    child: IconButton(
                                      icon: Icon(
                                        FontAwesomeIcons.flag,
                                      ),
                                      onPressed: () => null,
                                    ),
                                  ))
                            ],
                          ),
                        ),
                      ),

【讨论】：