Reputation: 161

Create a button in flutter with image in background

I'm trying to create a Button in Flutter, that has an image in the background and Containers above, but i want the Container to have a individual shape. The image below is just an example. I want to make a couple of these buttons.

I figured, that I might want to use a Stack and a GestureDetector to achieve this, but how am I going to "reshape" the orange and grey Containers above the image?

I would really appreciate a hint on how to achieve this. Thank you in advange guys .

Upvotes: 0

Answers (5)

Sintayew Zebene

Reputation: 81

yeah you are right you have to use stack and gesture detector but also you need to use Custom Paint flutter widget in order to draw the orange and grey shape if you want to know how to draw shapes in flutter visit this site Drawing shapes in Flutter with CustomPaint and Shape Maker

Upvotes: 1

Mohammad K. Albattikhi

Reputation: 737

To make any widget clickable, wrap it with a InkWell widget

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

Upvotes: 0

monzim

Reputation: 636

There are multiple ways to do this. Here is an example:

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

Upvotes: 0

Hemal Moradiya

Reputation: 2097

You can Ink widget like this with container

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

Upvotes: 1

Ravindra S. Patil

Reputation: 14775

Try to below code hope it help to you

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

Screen->

Upvotes: 0

Create a button in flutter with image in background

Answers (5)

Related Questions