3
votes

I want to build a UI where I have some fixed widgets (visible on all tabs) on top of my screen and then below them I want a TabBarView (with the tab bar at the bottom), is this possible without making your own tab widget or does the TabBarView have to take the whole screen?

2

2 Answers

0
votes

This is how I did it:

return Scaffold(
        body: Stack(
      children: [
        Container(
            alignment: Alignment.topCenter,
            child: Image.asset('assets/images/logo.png',
                fit: BoxFit.fitWidth, width: Get.width / 2.5)),
        Align(
          alignment: Alignment.bottomCenter,
          child: DraggableScrollableSheet(
            initialChildSize: 0.7,
            minChildSize: 0.7,
            builder:
                (BuildContext context, ScrollController scrollController) =>
                    SingleChildScrollView(
              controller: scrollController,
              child: DefaultTabController(
                  initialIndex: 0,
                  length: 2,
                  child: Column(
                    children: [
                      TabBar(tabs: <Widget>[
                        Tab(child: Text('Text1')),
                        Tab(child: Text('Text2'))
                      ]),
                      Container(
                        height: MediaQuery.of(context).size.height,
                        child: TabBarView(
                          children: <Widget>[Widget1(), Widget2()],
                        ),
                      )
                    ],
                  )),
            ),
          ),
        ),
      ],
    ));