Search code examples
flutterflutter-layout

Flutter - Button Group style and position


I am trying to create something like the attached image. I got this far ...

     Expanded(
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(32),
              topRight: Radius.circular(32),
            ),
          ),
          child: ButtonTheme(
            child: ButtonBar(
              alignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                  onPressed: () => print('hi'),
                  child: Text('Referals'),
                  color: Color(0xff2FBBF0),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(15.0),
                        topLeft: Radius.circular(15.0)),
                  ),
                ),
                RaisedButton(
                  onPressed: () => print('hii'),
                  child: Text('Stats'),
                  color: Color(0xff2FBBF0),
                ),
                RaisedButton(
                  onPressed: () => print('hiii'),
                  child: Text('Edit Profile'),
                  color: Color(0xff2FBBF0),
                  // color: Colors.white,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                        bottomRight: Radius.circular(15.0),
                        topRight: Radius.circular(15.0)),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),

But I don't really feel like it will look like the image.

I would also like the button group to be at the top of the Container. Now they're in the absolute center. Just like they would be if wrapped in a Center widget.

enter image description here

enter image description here


Solution

  • try adding following in all RaisedButton widgets:

    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,

    and buttonPadding: EdgeInsets.all(1), in ButtonBar

    Source: https://api.flutter.dev/flutter/material/MaterialTapTargetSize-class.html