dartfluttersegmentedcontrol

how to set CupertinoSegmentedControl height?

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)

cupertino segmented control

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,
                ));
    }
Solution

  • 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.

    enter image description here

    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:

    enter image description here

    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')])));
}