SliverGrid not working with CustomScrollView, SliverAppBar and TabBar/TabBarView

Question

I am trying to implement a SliverAppBar with a TabBar. In one tab I want to put the SliverGrid and in another I want to put a SliverList. The base code to get the SliverAppBar and TabBar is as follows. The tab content is just the Text() element. What I want is an expanded app bar which contains an image and some other controls. A tab bar below that and the tab bar containing grid/list etc. When the user scrolls up, the app bar with title should be pinned at the top and the tab bar should be pinned below it

  Widget _buildUI(Device data) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          floating: true,
          snap: true,
          pinned: true,
          expandedHeight: 250,
          flexibleSpace: FlexibleSpaceBar(
            title: Text('Page Title'),
            background: Image.network(
              'http://img1.mukewang.com/5c18cf540001ac8206000338.jpg',
              fit: BoxFit.cover,
            ),
          ),
        ),
        SliverPersistentHeader(
          // TabBar with a ceiling)
          pinned: true,
          delegate: StickyTabBarDelegate(
            child: TabBar(
              labelColor: Colors.black,
              controller: this.tabController,
              tabs: <Widget>[
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
              ],
            ),
          ),
        ),
        SliverFillRemaining(
          // TabBarView, the remaining supplement)
          child: TabBarView(
            controller: this.tabController,
            children: <Widget>[
              Center(child: Text('Content of Tab 1')),
              Center(child: Text('Content of Tab 2')),
            ],
          ),
        ),
      ],
    );
  }

Now when I try to add the SliverGrid instead of the Text() element, I get the following error,

SliverFillRemaining(
          // TabBarView, the remaining supplement)
          child: TabBarView(
            controller: this.tabController,
            children: <Widget>[
              Center(
                  child: SliverGrid.count(
                crossAxisCount: 3,
                children:
                    colorList.map((color) => Container(color: color)).toList(),
              )),
              Center(child: Text('Content of Tab 2')),
            ],
          ),
        )

Error thrown by flutter,

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following assertion was thrown building KeyedSubtree-[<0>]:
A RenderPositionedBox expected a child of type RenderBox but received a child of type RenderSliverGrid.

RenderObjects expect specific types of children because they coordinate with their children during layout and paint. For example, a RenderSliver cannot be the child of a RenderBox because a RenderSliver does not understand the RenderBox layout protocol.
The RenderPositionedBox that expected a RenderBox child was created by: Center ← KeyedSubtree-[<0>] ← RepaintBoundary ← IndexedSemantics ← NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← KeyedSubtree-[Key <[<0>]>] ← _SliverFillViewportRenderObjectWidget ← _SliverFractionalPadding ← SliverFillViewport ← Viewport ← ⋯
The RenderSliverGrid that did not match the expected child type was created by: SliverGrid ← Center ← KeyedSubtree-[<0>] ← RepaintBoundary ← IndexedSemantics ← NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← KeyedSubtree-[Key <[<0>]>] ← _SliverFillViewportRenderObjectWidget ← _SliverFractionalPadding ← SliverFillViewport ← ⋯
The relevant error-causing widget was: 
  TabBarView file:///E:/Aviraj/Projects/syl/repo/ampere-iot-framework/mobile/flutter/sylcloud/lib/screens/device/device_details_screen.dart:108:18
When the exception was thrown, this was the stack: 
#0      RenderObjectWithChildMixin.debugValidateChild.<anonymous closure> (package:flutter/src/rendering/object.dart:2866:9)
#1      RenderObjectWithChildMixin.debugValidateChild (package:flutter/src/rendering/object.dart:2893:6)
#2      SingleChildRenderObjectElement.insertChildRenderObject (package:flutter/src/widgets/framework.dart:5459:25)
#3      RenderObjectElement.attachRenderObject (package:flutter/src/widgets/framework.dart:5295:35)


#4      RenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5058:5)

Is there any way by which a SliverGrid can be added in the TabBarView above?

Answer 1

Use GridView instead

SliverFillRemaining(
  // TabBarView, the remaining supplement)
  child: TabBarView(
    controller: this.tabController,
    children: <Widget>[
      Center(
        child: GridView.count( //TODO: Change here
          crossAxisCount: 3,
          children:
              colorList.map((color) => Container(color: color)).toList(),
        ),
      ),
      Center(child: Text('Content of Tab 2')),
    ],
  ),
)