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

Question

I want to make a list of buttons. how can I make buttons like this picture below?

Answer 1

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

Answer 2

You can check out the following code:

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

1. Make a column widget and use card as children
2. Use card and wrap it with gesture detector
3. set the background image of each card
4. on tap, change the background image by using index of card tapped