Expand Column children inside ElevatedButton

Viewed 43

I have this code that I want the green container expanded to the full width of the ElevatedButton to make something like a bar on the button:

Card(
        elevation: 20,
        shadowColor: Colors.green,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(15),
          ),
        ),
        child: ElevatedButton(
          style: ButtonStyle(
            shape: MaterialStateProperty.all(
              RoundedRectangleBorder(
                borderRadius: BorderRadius.all(
                  Radius.circular(15),
                ),
              ),
            ),
            shadowColor: MaterialStateProperty.all(Colors.green),
            backgroundColor: MaterialStateProperty.all(Colors.red),
          ),
          onPressed: () {
            Navigator.push(
              c,
              MaterialPageRoute(builder: (c) => route),
            );
          },
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              ClipRRect(
                borderRadius: BorderRadius.only(topRight: Radius.circular(15), topLeft: Radius.circular(15)),
                child: Container(
                  height: 45,
                  color: Color.fromARGB(255, 0, 176, 44),
                  child: Image.asset(
                    "assets/icons/${icon}",
                  ),
                ),
              ),
              Text(
                label,
                style: const TextStyle(color: Colors.black),
              ),
            ],
          ),
        ),
      )

But what I'm getting is this instead:

ButtonPicture,

I already tried Expanded, CrossAxisAligment.Stretch on the column, but it feels like the Button itself add some constraints to its children!

1 Answers

It is coming from ButtonStyle of default padding, set it 0, EdgeInsets.zero.

 ElevatedButton(
     style: ButtonStyle(
         padding:
            MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(0)),
         shape:

More about ButtonStyle

Related