Search code examples
flutterdartlayoutappbarui-design

How to add a second AppBar below the primary AppBar in Flutter?

I'm aiming to create a Flutter layout with two AppBars stacked on top of each other, similar to this design:

enter image description here

Currently, my layout looks like this:

enter image description here

My code:

class HomePageTimerUI extends StatelessWidget {
bool PomoRed = false;
bool ShortYellow = false;
bool LongBlue = false;
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 600,
        width: double.infinity,
        child: DefaultTabController(
            length: 3,
            child: Scaffold(
                bottomNavigationBar: BottomBar(),
                appBar: AppBar(
                  elevation: 1.0,
                  backgroundColor: Colors.transparent,
                  bottom: PreferredSize(
                    preferredSize: Size.fromHeight(55),
                    child: Container(
                      color: Colors.transparent,
                      child: SafeArea(
                        child: Column(
                          children: <Widget>[
                            TabBar(
                                indicator: UnderlineTabIndicator(
                                    borderSide: BorderSide(
                                        color: Color(0xff3B3B3B), width: 4.0),
                                    insets: EdgeInsets.fromLTRB(
                                        12.0, 12.0, 12.0, 11.0)),
                                indicatorWeight: 15,
                                indicatorSize: TabBarIndicatorSize.label,
                                labelColor: Color(0xff3B3B3B),
                                labelStyle: TextStyle(
                                    fontSize: 12,
                                    letterSpacing: 1.3,
                                    fontWeight: FontWeight.w500),
                                unselectedLabelColor: Color(0xffD7D7D7),
                                tabs: [
                                  Tab(
                                    text: "POMODORO",
                                    icon: Icon(Icons.work_history, size: 40),
                                  ),
                                  Tab(
                                    text: "SHORT BREAK",
                                    icon: Icon(Icons.ramen_dining, size: 40),
                                  ),
                                  Tab(
                                    text: "LONG BREAK",
                                    icon: Icon(Icons.battery_charging_full_rounded,
                                        size: 40),
                                  ),
                                ])
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
                body: TabBarView(
                  children: <Widget>[
                    Center(
                      child: StartPomodoro(),
                    ),
                    Center(
                      child: ShortBreak(),
                    ),
                    Center(
                        child: LongBreak()
                    ),
                  ],
                ))));

  }
}

I've tried directly copying and pasting the AppBar code below the existing one, but it doesn't display correctly. I suspect this might be due to having multiple containers.

How can I achieve the desired layout with two AppBars in Flutter?

Thanks for your help!

Solution

  • You can use BottomNavigationBar to achieve this.

    Check for more info : https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html