Flutter - Button Group style and position

Question

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.

gist.github.com/haidar786/9284ee57d6faad3585b121b476eb9c04 might help. — Hussnain Haidar
– Hussnain Haidar, Commented Dec 19, 2019 at 15:16

Omi Shah · Accepted Answer · 2022-09-30 07:25:03Z

Here's the complete code. I have just used Container and Row because I find it more suitable and easy to achieve without any headache. :P

If you want with RaisedButton, figure it out.

Source:

import 'package:flutter/material.dart';

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => new _DemoState();
}

class _DemoState extends State<Demo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("DEMO")),
        body: Padding( // used padding just for demo purpose to separate from the appbar and the main content
            padding: EdgeInsets.all(10),
            child: Container(
              alignment: Alignment.topCenter,
              child: Container(
                  height: 60,
                  padding: EdgeInsets.all(3.5),
                  width: MediaQuery.of(context).size.width * 0.9,
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.all(Radius.circular(15)),
                  ),
                  child: Row(
                    children: <Widget>[
                      Expanded(
                          child: InkWell(
                              onTap: () {},
                              child: Container(
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.only(
                                        bottomLeft: Radius.circular(12),
                                        topLeft: Radius.circular(12))),
                                child: Text("Referrals",
                                    style: TextStyle(
                                      color: Colors.blue,
                                      fontSize: 17,
                                    )),
                              ))),
                      Expanded(
                          child: InkWell(
                              onTap: () {},
                              child: Container(
                                alignment: Alignment.center,
                                child: Text("Stats",
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 17)),
                              ))),
                      Padding(
                          padding: EdgeInsets.symmetric(vertical: 5),
                          child: Container(color: Colors.white, width: 2)),
                      Expanded(
                          child: InkWell(
                              onTap: () {},
                              child: Container(
                                alignment: Alignment.center,
                                child: Text("Edit Profile",
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 17)),
                              )))
                    ],
                  )),
            )));
  }
}

Output Screenshot:

Please upvote too, if my response fulfilled your request. Thank you. :)
Since I asked for a solution for ButtonBar I accepted the first answer. I will however use your code. Thank you!

Crazy Lazy Cat · Accepted Answer · 2019-12-19 17:07:50Z

Check my ButtonGroup widget that I created

import 'package:flutter/material.dart';

class ButtonGroup extends StatelessWidget {
  static const double _radius = 10.0;
  static const double _outerPadding = 2.0;

  final int current;
  final List<String> titles;
  final ValueChanged<int> onTab;
  final Color color;
  final Color secondaryColor;

  const ButtonGroup({
    Key key,
    this.titles,
    this.onTab,
    int current,
    Color color,
    Color secondaryColor,
  })  : assert(titles != null),
        current = current ?? 0,
        color = color ?? Colors.blue,
        secondaryColor = secondaryColor ?? Colors.white,
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      color: color,
      borderRadius: BorderRadius.circular(_radius),
      child: Padding(
        padding: const EdgeInsets.all(_outerPadding),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(_radius - _outerPadding),
          child: IntrinsicHeight(
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: _buttonList(),
            ),
          ),
        ),
      ),
    );
  }

  List<Widget> _buttonList() {
    final buttons = <Widget>[];
    for (int i = 0; i < titles.length; i++) {
      buttons.add(_button(titles[i], i));
      buttons.add(
        VerticalDivider(
          width: 1.0,
          color: (i == current || i + 1 == current) ? color : secondaryColor,
          thickness: 1.5,
          indent: 5.0,
          endIndent: 5.0,
        ),
      );
    }
    buttons.removeLast();
    return buttons;
  }

  Widget _button(String title, int index) {
    if (index == this.current)
      return _activeButton(title);
    else
      return _inActiveButton(title, index);
  }

  Widget _activeButton(String title) => FlatButton(
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        disabledColor: secondaryColor,
        disabledTextColor: color,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.zero,
        ),
        child: Text(title),
        onPressed: null,
      );

  Widget _inActiveButton(String title, int index) => FlatButton(
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        color: Colors.transparent,
        textColor: Colors.white,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.zero,
        ),
        child: Text(title),
        onPressed: () {
          if (onTab != null) onTab(index);
        },
      );
}

You can use it like this

ButtonGroup(
  titles: ["Button1", "Button2", "Button3"],
  current: index,
  color: Colors.blue,
  secondaryColor: Colors.white,
  onTab: (selected) {
    setState(() {
      index = selected;
    });
  },
)

Example:

import 'package:flutter/material.dart';
import 'package:flutter_app_test2/btn_grp.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int current = 0;

  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ButtonGroup(
          titles: ["Button1", "Button2", "Button3", "Button3"],
          current: current,
          onTab: (selected) {
            print(selected);
            setState(() {
              current = selected;
            });
          },
        ),
      ),
    );
  }
}

Thanks for your answer, however, how to adjust the margin between text and the edges?

Harshvardhan Joshi · Accepted Answer · 2019-12-19 14:56:58Z

2

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

edited Dec 19, 2019 at 14:56

answered Dec 19, 2019 at 14:46

Harshvardhan Joshi

3,2032 gold badges22 silver badges32 bronze badges

6 Comments

Ciprian Over a year ago

Doesn't do anything.

Harshvardhan Joshi Over a year ago

sorry I forgot to add the other part of the solution, Answer updated.

Ciprian Over a year ago

The spacing issue is fixed. Thank you very much. Do you know how to float the buttons to the top of the container?

Harshvardhan Joshi Over a year ago

try Align widget and with alignment: Alignment.topCenter.

Harshvardhan Joshi Over a year ago

Source: stackoverflow.com/questions/53716571/…

|

Collectives™ on Stack Overflow

Flutter - Button Group style and position

3 Answers 3

3 Comments

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related