CODEWITHSUNDEEP
flutterflutter-layout
user3249753
user3249753

Reputation:

Flutter - Row of buttons with first and last having rounded end shape

How can I build a row of buttons with rounded left and right ends in Flutter? I'd like to add something like this to my first flutter app. The example on imgur.com is taken from the Messaging app on my Huawei phone.

enter image description here

I can do a series of individual FloatingActionButton.extended that sit side by side in a row. Or a row of RaisedButtons with RoundedRectangleBorder. But these both look a bit strange - Two rounded buttons

I guess something like

shape: new LeftRoundedRectangleBorder(borderRadius: new BorderRadius.circular(30)),

followed by

shape: new RightRoundedRectangleBorder(borderRadius: new BorderRadius.circular(30)),

might be ok, except they don't actually exist.

How should I put together my Widgets to make a toolbar at the bottom of my app like this? I guess I should also be open to this being a totally non-standard design, which is why I'm finding it a bit of a challenge to code. Thanks.

Upvotes: 0

Views: 2080

Answers (1)

Ahmed
Ahmed

Reputation: 2329

enter image description here

    class RoundedButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: SizedBox(
        height: 60.0,
        width: 250.0,
        child: Material(
          shape: StadiumBorder(),
          textStyle: Theme.of(context).textTheme.button,
          elevation: 6.0,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Expanded(
                child: RaisedButton(
                  elevation: 0.0,
                  color: Colors.white,
                  shape: new RoundedRectangleBorder(
                      borderRadius:
                          BorderRadius.horizontal(left: Radius.circular(50))),
                  child: Padding(
                    padding: const EdgeInsets.all(0.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(
                          Icons.add,
                          color: Colors.green,
                          size: 30.0,
                        ),
                        Text("New Message")
                      ],
                    ),
                  ),
                  onPressed: () {},
                ),
              ),
              Expanded(
                child: RaisedButton(
                  elevation: 0.0,
                  color: Colors.white,
                  shape: new RoundedRectangleBorder(
                      borderRadius:
                          BorderRadius.horizontal(right: Radius.circular(50))),
                  child: Padding(
                    padding: const EdgeInsets.all(2.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(
                          Icons.more_vert,
                          color: Colors.green,
                          size: 30.0,
                        ),
                        Text("More")
                      ],
                    ),
                  ),
                  onPressed: () {},
                ),
              ),
            ],
          ),
        ),
      ),
      body: Container(),
    );
  }
}

Upvotes: 4

Related Questions