Question

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

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

我遵循this post作为指导。我的图片看起来像这样：

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

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

Answer 1

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

要完全控制按钮方面，您可能需要构建自定义窗口小部件（甚至是具有自定义Container的简单BoxDecoration来显示图像），并用手势识别器包装它来处理用户互动（在您的情况下，只需点击一下）。最简单的实现方式是使用GestureDetector，但还有其他小部件，例如InkWell，可在水龙头上的可轻敲小部件表面上呈现出材料设计的波纹。

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

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

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

Answer 5

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

Answer 6

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

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


      ),

Answer 8

截屏：

代码：

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 9

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

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

您可以添加图标和图片

Answer 11

将图像放置在gestureDetector中，如下所示：

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

Answer 12

图像按钮，底部具有波纹效果和文字

（当然您可以删除文本部分和堆栈）

"char" - int
"char" - int
"char" - int

Answer 13

我创建了自己的墨水瓶，有三个动画，可以带孩子和回调 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 为可选参数

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

13 个答案: