如何制作一个按钮，它在 flutter 中有一个背景图像

Question

我想制作一个按钮列表。如何制作如下图所示的按钮？

Answer 1

制作一个栏目小部件并将卡片用作children
使用卡片并用手势检测器包裹起来
设置每张卡片的背景图片
点击时，使用点击的卡片索引更改背景图像

Answer 2

您可以查看以下代码：

Column(
              children: [
                GestureDetector(
                  onTap: () {
                    print('do something');
                  },
                  child: Container(
                      width: 60,
                      height: 80,
                      decoration: BoxDecoration(
                          border: Border.all(color: Colors.red, width: 4),
                          borderRadius: const BorderRadius.all(Radius.circular(20)),
                          image: const DecorationImage(
                              image: AssetImage("images/home_tr_location.png"),
                              fit: BoxFit.cover
                          )), // button text
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    print('do something');
                  },
                  child: Container(
                    width: 60,
                    height: 80,
                    decoration: BoxDecoration(
                        border: Border.all(color: Colors.red, width: 4),
                        borderRadius: const BorderRadius.all(Radius.circular(20)),
                        image: const DecorationImage(
                            image: AssetImage("images/home_tr_location.png"),
                            fit: BoxFit.cover
                        )), // button text
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    print('do something');
                  },
                  child: Container(
                    width: 60,
                    height: 80,
                    decoration: BoxDecoration(
                        border: Border.all(color: Colors.red, width: 4),
                        borderRadius: const BorderRadius.all(Radius.circular(20)),
                        image: const DecorationImage(
                            image: AssetImage("images/home_tr_location.png"),
                            fit: BoxFit.cover
                        )), // button text
                  ),
                ),
              //Add As many buttons as you like inside column
                  ],
                ),

Answer 3

You can use this code hope this will work for you, Thanks

    import 'package:flutter/material.dart';
    
    class Test extends StatefulWidget {
      const Test({Key? key}) : super(key: key);
    
      @override
      _TestState createState() => _TestState();
    }
    
    class _TestState extends State<Test> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Container(
            height: 500,
            width: MediaQuery.of(context).size.height,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.only(bottomRight: Radius.circular(150)),
              image: DecorationImage(image: NetworkImage('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg'),fit: BoxFit.cover)
            ),
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
              InkWell(
                onTap: (){},
                child: buildImage(height: 60,width: 60,image:'https://media.istockphoto.com/photos/winter-in-the-sequoias-picture-id1292624259?s=612x612' ),
              ),
                  SizedBox(height: 10,),
                  Padding(
                    padding: const EdgeInsets.only(right:10.0),
                    child: InkWell(
                      onTap: (){},
                      child:  buildImage(height: 40,width: 40,image:'https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?s=612x612' ),
                    ),
                  ),
                  SizedBox(height: 10,),
                  InkWell(
                    onTap: (){},
                    child:   buildImage(height: 60,width: 60,image:'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1140180560?s=612x612'),
                  ),
                  SizedBox(height: 10,),
                  Padding(
                    padding: const EdgeInsets.only(right:10.0),
                    child: InkWell(
                      onTap: (){},
                      child: buildImage(height: 40,width: 40,image:'https://media.istockphoto.com/photos/hot-air-balloons-flying-over-the-botan-canyon-in-turkey-picture-id1297349747?s=612x612' ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }
      Widget buildImage({String ?image,double? height,double? width}){
        return Container(
          height: height,
          width: width,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.0),
              border: Border.all(color: Colors.white,width: 2.0),
              image: DecorationImage(image: NetworkImage(image.toString()),fit: BoxFit.cover)
          ),);
      }
    }

如何制作一个按钮，它在 flutter 中有一个背景图像

how to make a button that it have a an image for background in flutter

flutter

flutter-layout