How to change the width to the CupertinoSlidingSegmentedControl in Flutter

user_13084721 0
Viewed 989

I am using the Cupertino design library for Android developing in Flutter. I want to change the width of the CupertinoSlidingSegmentedControl. This is what I have

 final Map<int, Widget> myTabs = const <int, Widget>{
   0: Text("Doctor"),
   1: Text("Pacient")
 };

CupertinoSlidingSegmentedControl(
                   groupValue: segmentedControlGroupValue,
                   children: myTabs,
                   onValueChanged: (i){
                     setState(() {
                       segmentedControlGroupValue = i;
                     });
                   },
                 ),
dart flutter
2 Answers

Wrap it in SizedBox:

SizedBox(
  width: double.infinity,
  child: CupertinoSlidingSegmentedControl(...),
)
user_10372950

I achieved it by wrapping every Text widget with a Container of width double.maxFinite:

final Map<int, Widget> myTabs = const <int, Widget>{
   0: Container(width: double.maxFinite, child: Text("Doctor"),),
   1: Container(width: double.maxFinite, child: Text("Pacient"),),
 };

Extra tip: if you want to change the height of CupertinoSlidingSegmentedControl's children (option buttons), you can set the height of the Container, or you can use padding property, like this:

Container(
  padding: EdgeInsets.symmetric(vertical: 10.0),
  width: double.maxFinite,
  child: Text("Doctor"),
);
user_21011170
Related