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

Question

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

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

我按照这篇文章作为指导。 我的图像如下所示：

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

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

Answer 1

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

Answer 5

截屏：

---

代码：

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,
      ),
    ),
  ),
)

Answer 6

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

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

Answer 7

可以为此使用 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,
                    ),
                  ),
                )

Answer 8

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

Answer 9

将您的图像放置在一个gestureDetector中，如下所示：

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

Answer 10

您可以使用 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,
                ),
              ),
            ),
          ),
        ],


      ),

Answer 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 是可选参数

Answer 12

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

您可以添加图标和图像

Answer 13

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

（当然可以去掉文字部分和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)),
          ),
        )
      ],
    ),
  );

Answer 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,
                                    ),
                                  ))
                            ],
                          ),
                        ),
                      ),