how to set CupertinoSegmentedControl height? - dart

Question

I am trying to use CupertinoSegmentedControl from the flutter Cupertino library in the AppBar using the bottom attribute to achieve the following design (height = 32)
so I tried the following :
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 2,
backgroundColor: Colors.white,
centerTitle: true,
title: Text(this.widget.title, style: TextStyle(color: Colors.black)),
bottom: PreferredSize(
child: Padding(
padding: const EdgeInsets.only(top: 8, bottom: 12),
child: Row(
children: <Widget>[
SizedBox(width: 24),
Expanded(
child: CupertinoSegmentedControl(
children: this.widget.tabs,
groupValue: this._selectedTab,
onValueChanged: (value) {
this.setState(() => this._selectedTab = value);
this._tabController.animateTo(value);
}
),
),
SizedBox(width: 24)
],
),
),
preferredSize: Size(double.infinity, 48)
)
),
body: new TabBarView(
controller: this._tabController,
children: this.widget.views,
));
}

Answer 1

Is something like that similar to the layout that you want? (Removing the green color of course ^_^)
Play around with the Container and PreferredSize heights to adjust the height to fit your needs.
Scaffold(
appBar: AppBar(
elevation: 2,
backgroundColor: Colors.white,
centerTitle: true,
title:
Text(this.widget.title, style: TextStyle(color: Colors.black)),
bottom: PreferredSize(
child: Row(
children: [
Expanded(
child: Container(
height: 48,
color: Colors.lightGreenAccent,
child: CupertinoSegmentedControl(
children: children,
groupValue: this._selectedTab,
onValueChanged: (value) {
this.setState(() => this._selectedTab = value);
}),
),
)
],
),
preferredSize: Size(double.infinity, 48))),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('hello')
]
)
)
);
UPDATE:
As kazimad pointed out, if you want to increase the segmented control height and not only add padding to it insiede the app bar, you can add a Padding widget to your tabs, like that:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 2,
backgroundColor: Colors.white,
centerTitle: true,
title:
Text(this.widget.title, style: TextStyle(color: Colors.black)),
bottom: PreferredSize(
child: Padding(
padding: const EdgeInsets.only(top: 8, bottom: 12),
child: Row(
children: <Widget>[
SizedBox(width: 24),
Expanded(
child: CupertinoSegmentedControl(
children: const <int, Widget>{
0: Padding(
padding: EdgeInsets.all(8.0),
child: Text('Midnight')),
1: Padding(
padding: EdgeInsets.all(8.0),
child: Text('Viridian')),
2: Padding(
padding: EdgeInsets.all(8.0),
child: Text('Cerulean'))
},
groupValue: this._selectedTab,
onValueChanged: (value) {
// TODO: - fix it
}),
),
SizedBox(width: 24)
],
),
),
preferredSize: Size(double.infinity, 48))),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text('hello')])));
}

Answer 2

just add Padding widget, or margin property to Container and wrap your Widgets in your "tabs" collection (in you case it is this.widget.tabs) with it
in my case
CupertinoSegmentedControl<int>(
children: segmentTextWidgets,
...
),
final Map<int, Widget> segmentTextWidgets = <int, Widget>{
0: Container(
margin: const EdgeInsets.symmetric(vertical: 16),
child: Text("Tab 1 title"),
),
1: Container(
margin: const EdgeInsets.symmetric(vertical: 16),
child: Text("Tab 2 title"),
),
};