Scroll Carousel, Default Tab Controller & GridView as one in flutter

Question

I have a design like this.

What I want is that as I scroll up the GridView the Carousel scrolls up and the tab controller stays at the top fixed. All of this should be done in one scroll. I have done this before with custom scroll and sliver GridView but I have no idea as to how I can also add a Default Tab controller in the custom scrollView and make it stay fixed at the top.

Thanks for your help :)

Solution 1

See this DartPad for running ex. PinnedAppBar_SliverAppBar_NestedScrollView

    NestedScrollView(
          controller: ScrollController(),
          physics: ClampingScrollPhysics(),
          headerSliverBuilder: (context, value) {
            return [
              SliverAppBar(
                pinned: true,
                backgroundColor: Colors.white,
                flexibleSpace: FlexibleSpaceBar(
                  background: 
                  /// _buildCarousel() in your case....
                  Container(
                    height: 200,
                    child: Center(
                      child: Text("Your Carousel will be here"),
                    )
                  ),
                ),
                expandedHeight: 250.0, /// your Carousel + Tabbar height(50)
                floating: true,
                bottom: TabBar(
                  labelColor: Colors.blue,
                  unselectedLabelColor: Colors.black,
                  controller: tb,
                  tabs: <Widget>[
                    Tab(child: Text("tab1"),),
                    Tab(child: Text("tab2"),)
                  ],
                ),
              ),
            ];
          },
          body: TabBarView(
            controller: tb,
            children: <Widget>[
              GridView.count(
                  crossAxisCount: 3,
                  children: List.generate(10,
                          (index) =>  Icon(Icons.grid_off)
                  ).toList()
              ),
              GridView.count(
                  crossAxisCount: 3,
                  children: List.generate(5,
                          (index) =>  Icon(Icons.grid_on)
                  ).toList()
              ),
            ],
          ),
        )

Solution 2

I tried below code hope it solves your problem....

You can also play with this code at DartPad NestedScrollView

NestedScrollView(
      physics: ClampingScrollPhysics(),
      headerSliverBuilder: (context, value) {
        return [
          SliverToBoxAdapter(
            /// _buildCarousel() in your case....
            child: Container(
              height: 200,
              child: Center(
                child: Text("Your Carousel will be here"),
              )
            ),
          ),
          SliverToBoxAdapter(
            child: TabBar(
              labelColor: Colors.blue,
              unselectedLabelColor: Colors.black,
              controller: tb,
              tabs: <Widget>[
                Tab(child: Text("tab1"),),
                Tab(child: Text("tab2"),)
              ],
            )
          ),
        ];
      },
      body: TabBarView(
        controller: tb,
        children: <Widget>[
          GridView.count(
            physics: NeverScrollableScrollPhysics(),
              crossAxisCount: 3,
              children: List.generate(10,
                      (index) =>  Icon(Icons.grid_off)
              ).toList()
          ),
          GridView.count(
              physics: NeverScrollableScrollPhysics(),
              crossAxisCount: 3,
              children: List.generate(5,
                      (index) =>  Icon(Icons.grid_on)
              ).toList()
          ),
        ],
      ),
    )

Comments

[Darshan Rathod]

api.flutter.dev/flutter/widgets/SliverGrid-class.html

[L.Goyal]

@D.R. That only scrolls the Sliver GridView. I want to put all 3 components in a single scroll. How can I put the carousel and Default Tab controller which are both RenderObject rather than RenderSliver?

[Darshan Rathod]

So, your requirement can only be possible with CustomScrollView()....

[Darshan Rathod]

this can be achieved by CustomScrollView() but only drawback is you have to use FixedHeight Container because of TabBarView()....

[Darshan Rathod]

is there a different tabs depend on DefaultTabController?

[Darshan Rathod]

i got it, please see the second answer, don't forget to upvote if you like

[Ishwar Chandra Tiwari]

@L.Goyal your question saved my day

[L.Goyal]

Thanks a lot. It worked like a charm. But just asking, is there any way to make the tabs stay fixed at the top after the carousel is scrolled up?

[Darshan Rathod]

i will try that tabs stay fixed, any post answer if i get that....