在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

我认为，更简单也最通用的方法是使用 GestureDetector，因为它允许您为不同的手势调用不同的功能，例如单击、双击、长按等。

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

Answer 3

我认为这也应该起作用。只需将FlatButton的填充指定为零即可。

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

Answer 4

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

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

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

可以使用 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 7

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

Answer 8

在a内放置图片FlatButton可能不符合您的要求，因为它会自行处理某些样式（例如padding）。

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