Ad

How To Make A Button That It Have A An Image For Background In Flutter

- 1 answer

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

Ad

Answer

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
                  ],
                ),
Ad
source: stackoverflow.com
Ad