TabView inside CustomScrollView

Question

Wrapping TabBarView with SliverFillRemaining (fill remaining empty space like Expanded) gives the following error output.

flutter: A RenderPositionedBox expected a child of type RenderBox but received a child of type flutter: RenderSliverList.

TabController tabContoller;
    @override
  void initState() {
    tabContoller = new TabController(
      vsync: this,
      length: 3,
    );


 @override
 Widget build(BuildContext context) {
    return new Scaffold(
        floatingActionButton:floatActionBtn(...),
        bottomNavigationBar: bottomNavigationBar(...),
        appBar: apBar(),
        body: Stack(
          children: <Widget>[
            CustomScrollView(
              slivers: <Widget>[
                SliverAppBar(
                  backgroundColor: Colors.transparent,
                  automaticallyImplyLeading: false,
                  expandedHeight: 195.0,
                  flexibleSpace: FlexibleSpaceBar(
                    background: new Stack(
                        children: <Widget>[
                          ...

                        ]),
                  ),
                ),
                  new SliverFillRemaining(
                    child: TabBarView(
                      controller: tabContoller,
                      children: <Widget>[
                        Tab(...),
                        Tab(...),
                        Tab(...)
                      ],
                    ),
                  ),
              ],
            ),
          ],

        )

Possible duplicate of [how to implement a sliverAppBar with a tabBar](https://stackoverflow.com/questions/50741732/how-to-implement-a-sliverappbar-with-a-tabbar) — Jamie White, Jan 07 '19 at 14:58
Oh boy, thanks ! I've spent a few hours trying to embed my TabBarView, and had completely forgotten about SliverFillRemaining ! — Yannick Mauray, Apr 10 '22 at 13:52

score 26 · Answer 1 · answered Jan 06 '19 at 23:59

26

Don't forget the DefaultTabController, this code is working fine:

         @override
          Widget build(BuildContext context) {
            return DefaultTabController(
              length: 3,
              child: Container(
                  child: CustomScrollView(slivers: <Widget>[
                SliverAppBar(),
                new SliverFillRemaining(
                  child: TabBarView(
                    children: <Widget>[
                      Text("Tab 1"),
                      Text("Tab 2"),
                      Text("Tab 3"),
                    ],
                  ),
                ),
              ])),
            );
          }

answered Jan 06 '19 at 23:59

diegoveloper

93,875
20
236
194

2

Hi, I am have similar code like yours but in the **children** each widget have ListView. I would like when listView is scrolled the SliverAppBar to be scrolled to is it possible? – Nux Apr 01 '20 at 09:11
1

I have asked similar question here https://stackoverflow.com/questions/60967806/make-sliverappbar-scrollable-when-tabbarview-child-is-scrolled – Nux Apr 01 '20 at 09:36
Can you help me with similar situation. https://stackoverflow.com/questions/62437049/flutter-listview-builder-inside-sliverlist – Roxx Jun 18 '20 at 18:19
Nice, SliverFillRemaining is the one that I wanted. Thank You – Anthony FSS Jul 29 '21 at 03:34

score 2 · Answer 2 · answered May 01 '22 at 11:15

You can use NestedScrollView like this

@override
  Widget build(BuildContext context) {
    return  DefaultTabController(
      length: 3,
      child: Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                forceElevated: innerBoxIsScrolled,
                automaticallyImplyLeading: false,
                expandedHeight: 195.0,
                flexibleSpace: FlexibleSpaceBar(
                ),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                      (_, int index) {
                    return Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        TabBar(
                          labelColor: AppColors.black,
                          unselectedLabelColor: AppColors.gray,
                          indicatorColor: AppColors.primaryColor,
                          indicatorWeight: 4,
                          indicatorPadding: EdgeInsets.symmetric(horizontal: 16),
                          labelPadding: EdgeInsets.zero,
                          tabs: [
                            Text("FIRST"),
                            Text("SECOND"),
                            Text("THIRD"),
                          ],
                        )
                      ],
                    );
                  },
                  childCount: 1,
                ),
              ),
            ];
          },
          body: TabBarView(
            children: <Widget>[
              Text("FIRST TAB"),
              Text("SECOND TAB"),
              Text("THIRD TAB"),
            ],
          ),
        ),
      ),
    );
  }

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, May 02 '22 at 13:45

TabView inside CustomScrollView

2 Answers2

Linked