在 flutter 中创建一个带有背景图像的按钮

Question

我正在尝试在 Flutter 中创建一个 Button，它在背景中有一个图像，上面有容器，但我希望 Container 具有单独的形状。下图只是一个例子。我想做几个这样的按钮。

我想，我可能想使用 Stack 和 GestureDetector 来实现这一点，但我要如何“重塑”图像上方的橙色和灰色容器？

如果能提供有关如何实现此目标的提示，我将不胜感激。谢谢大家。

Answer 1

试试下面的代码希望对你有帮助

Container(
          width: 100.0,
          height: 50.0,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black87),
            image: DecorationImage(
              image: NetworkImage(
                'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png',
              ),
            ),
            shape: BoxShape.rectangle,
          ),
          child: TextButton(
            onPressed: () {
              print('Pressed');
            },
            child: Icon(Icons.check, color: Colors.black),
          ),
        ),

屏幕->

Answer 2

您可以 Ink 使用容器

这样的小部件

Container(
      height: 100,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
      ),
      child: Ink(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          image: DecorationImage(
            image: AssetImage(
              'images/car_poster.png',
            ),
            fit: BoxFit.cover,
          ),
        ),
        child: InkWell(
          borderRadius: BorderRadius.circular(20),
          onTap: () {},
          child: Center(
            child: Text(
              'title',
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 30,
                  fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ),
    );

Answer 3

有多种方法可以做到这一点。这是一个例子：

    Container(
        height: 200,
        width: 300,
        color: Colors.grey,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(20.0),
            child: Material(
              child: InkWell(
                onTap: () {
                  //Here you can call your own animation for animate the Image
                },
                // Add Your Own Image
                child: Image.network(
                  'https://images.pexels.com/photos/75973/pexels-photo-75973.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
                  height: 200,
                  width: 300,
                  fit: BoxFit.fill,
                ),
              ),
            ),
          ),
        ),
      ),

Answer 4

要使任何小部件可点击，请使用 InkWell 小部件将其包装起来

InkWell(
    onTap: () {
    toggle();
    },
    child: Container(
    decoration: BoxDecoration(
    image: DecorationImage( 
       Image: NetworkImage(ImageURL)    //or AssetImage(ImageURL)
    BoxFit.Cover)),

Answer 5

是的，你是对的，你必须使用堆栈和手势检测器，但你还需要使用 Custom Paint flutter widget 来绘制橙色和灰色的形状，如果你想知道如何在 flutter 中绘制形状，请访问此站点 Drawing shapes in Flutter with CustomPaint and Shape Maker

在 flutter 中创建一个带有背景图像的按钮

Create a button in flutter with image in background

button

flutter

flutter-layout