Search code examples
fluttercontainerswidthmaterialbutton

Flutter container width inside MaterialButton


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

Solution

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