Flutter container width inside MaterialButton

1.4k Views Asked by At

I am trying for hours to set my container width to its parent, which is a MaterialButton. I want the container to fill the entire width of the MaterialButton.

I tried to set the container width to "double.infitiy" or to "MediaQuery.of(context).size.width". Also played with "Expanded" etc. None of it worked. Not sure what I am doing wrong, thanks.

@override
  Widget build(BuildContext context) {
    return Material(
      **child: MaterialButton(
        minWidth: MediaQuery.of(context).size.width,
        onPressed: onPressed,
        child: Container(
          width: double.infinity,**
          margin: EdgeInsets.all(8.0),
          padding: EdgeInsets.all(8.0),
          decoration: BoxDecoration(
              color: Colors.greenAccent,
              borderRadius: BorderRadius.circular(10.0)),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(text),
              SizedBox(
                height: 8.0,
              ),
              SvgPicture.asset(
                'images/medaillen.svg',
                width: 80,
              ),
              SizedBox(
                height: 15.0,
              ),
              Text(
                textTopThree,
                maxLines: 3,
              ),
            ],
          ),
        ),
      ),
    );
1

There are 1 best solutions below

2
On BEST ANSWER

I recommend you to replace the Material Button with InkWell, you can wrap any widget and get the onTap.

This should work:

InkWell(
            onTap: () {},
            child: Container(
              width: double.infinity,
              padding: EdgeInsets.all(8.0),
              decoration: BoxDecoration(
                color: Colors.greenAccent,
                borderRadius: BorderRadius.circular(10.0),
              ),
              child: Column(
                children: [
                  Text('Button Text'),
                  SizedBox(
                    height: 8.0,
                  ),
                  Image.asset(
                      'images/medaillen.svg',
                      width: 80,
                    ),                    
                  SizedBox(
                    height: 15.0,
                  ),
                  Text(
                    'textTopThree',
                    maxLines: 3,
                  ),
                ],
              ),
            ),
          ),

If for some reason you need to use MaterialButton, then you should delete the Container and use the properties of the Material Button, like this:

MaterialButton(
            onPressed: () {},
            color: Colors.greenAccent,
            minWidth: double.infinity,
            padding: EdgeInsets.all(8.0),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(18.0),
            ),
            child: Column(
              children: [
                SizedBox(
                  height: 8.0,
                ),
                Text('Button Text'),
                SizedBox(
                  height: 8.0,
                ),
                Image.asset(
                  'images/medaillen.svg',
                  width: 80,
                ),           
                SizedBox(
                  height: 15.0,
                ),
                Text(
                  'textTopThree',
                  maxLines: 3,
                ),
                SizedBox(
                  height: 8.0,
                ),
              ],
            ),
          ),