'TabView inside CustomScrollView

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(...)
                      ],
                    ),
                  ),
              ],
            ),
          ],

        )


Solution 1:[1]

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

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 diegoveloper
Solution 2 Noushin