can SliverList be used inside TabBarView or vice versa?

Issue

I am trying to used SliverList inside TabBarView but I keep getting these
errors:

  1. Failed assertion: line 5966 pos 12: ‘child == _child’: is not true.
  2. A RenderRepaintBoundary expected a child of type RenderBox but received a
    child of type RenderSliverFillRemainingWithScrollable.
    Here is the code.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MoboApp(),
    );
  }
}

class MoboApp extends StatefulWidget {
  @override
  _MoboAppState createState() => _MoboAppState();
}

class _MoboAppState extends State<MoboApp> with SingleTickerProviderStateMixin {
  
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              leading: Icon(
                Icons.list,
                color: Color(0xFFFBF3F3),
              ),
              actions: [
                Icon(
                  Icons.more_vert,
                  color: Color(0xFFFBF3F3),
                )
              ],
              title: Text(
                'mobo app',
                style: TextStyle(
                  color: Color(0xFFFBF3F3),
                  fontSize: 25.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              centerTitle: true,
              pinned: true,
              floating: false,
              expandedHeight: 100.0,
              bottom: TabBar(
                unselectedLabelColor: Color(0xFFE0A1A1),
                tabs: <Widget>[
                  Tab(
                    text: 'Home',
                  ),
                  Tab(
                    text: 'Feed',
                  ),
                  Tab(
                    text: 'Profile',
                  ),
                  Tab(
                    text: 'Setting',
                  )
                ],
              ),
              backgroundColor: Color(0xFFBB1A1A),
            ),
            TabBarView(
              children: [
                // FIRST TabBarView
                SliverList(
                  delegate: SliverChildListDelegate(
                    [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              color: Colors.white,
                              width: double.infinity,
                              child: Image.network(
                                'https://cdn.britannica.com/24/58624-050-73A7BF0B/valley-Atlas-Mountains-Morocco.jpg',
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 10.0,
                      ),
                      Row(
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              color: Colors.white,
                              width: double.infinity,
                              child: Text('text'),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),

                // SECOND TabBarView
                SliverList(
                  delegate: SliverChildListDelegate(
                    [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              color: Colors.white,
                              width: double.infinity,
                              child: Image.network(
                                'https://cdn.britannica.com/24/58624-050-73A7BF0B/valley-Atlas-Mountains-Morocco.jpg',
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 10.0,
                      ),
                      Row(
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              color: Colors.white,
                              width: double.infinity,
                              child: Text('text'),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),

                //THIRD TabBarView
                SliverList(
                  delegate: SliverChildListDelegate(
                    [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              color: Colors.white,
                              width: double.infinity,
                              child: Image.network(
                                'https://cdn.britannica.com/24/58624-050-73A7BF0B/valley-Atlas-Mountains-Morocco.jpg',
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 10.0,
                      ),
                      Row(
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              color: Colors.white,
                              width: double.infinity,
                              child: Text('text'),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),

                //FOURTH TabBarView
                SliverList(
                  delegate: SliverChildListDelegate(
                    [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              color: Colors.white,
                              width: double.infinity,
                              child: Image.network(
                                'https://cdn.britannica.com/24/58624-050-73A7BF0B/valley-Atlas-Mountains-Morocco.jpg',
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 10.0,
                      ),
                      Row(
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              color: Colors.white,
                              width: double.infinity,
                              child: Text('text'),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

Solution

So… I tried not to change your code too much :-). This Code works on Android:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MoboApp(),
    );
  }
}

class MoboApp extends StatefulWidget {
  @override
  _MoboAppState createState() => _MoboAppState();
}

class _MoboAppState extends State<MoboApp> with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Builder(builder: (BuildContext context) {
        return NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                leading: Icon(
                  Icons.list,
                  color: Color(0xFFFBF3F3),
                ),
                actions: [
                  Icon(
                    Icons.more_vert,
                    color: Color(0xFFFBF3F3),
                  )
                ],
                title: Text(
                  'mobo app',
                  style: TextStyle(
                    color: Color(0xFFFBF3F3),
                    fontSize: 25.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                centerTitle: true,
                pinned: true,
                floating: false,
                expandedHeight: 100.0,
                bottom: TabBar(
                  unselectedLabelColor: Color(0xFFE0A1A1),
                  tabs: <Widget>[
                    Tab(
                      text: 'Home',
                    ),
                    Tab(
                      text: 'Feed',
                    ),
                    Tab(
                      text: 'Profile',
                    ),
                    Tab(
                      text: 'Setting',
                    )
                  ],
                ),
                backgroundColor: Color(0xFFBB1A1A),
              ),
            ];
          },
          body: TabBarView(
            children: [
              // FIRST TabBarView
              CustomScrollView(
                slivers: [
                  SliverList(
                    delegate: SliverChildListDelegate(
                      [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            Expanded(
                              child: Container(
                                color: Colors.white,
                                width: double.infinity,
                                child: Image.network('https://cdn.britannica.com/24/58624-050-73A7BF0B/valley-Atlas-Mountains-Morocco.jpg',
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                          ],
                        ),
                        SizedBox(
                          height: 10.0,
                        ),
                        Row(
                          children: <Widget>[
                            Expanded(
                              child: Container(
                                color: Colors.white,
                                width: double.infinity,
                                child: Text('text'),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),

              // SECOND TabBarView
              CustomScrollView(
                slivers: [
                  SliverList(
                     delegate: SliverChildListDelegate(
                      [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            Expanded(
                              child: Container(
                                color: Colors.white,
                                width: double.infinity,
                                child: Image.network('https://cdn.britannica.com/24/58624-050-73A7BF0B/valley-Atlas-Mountains-Morocco.jpg',
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                          ],
                        ),
                        SizedBox(
                          height: 10.0,
                        ),
                        Row(
                          children: <Widget>[
                            Expanded(
                              child: Container(
                                color: Colors.white,
                                width: double.infinity,
                                child: Text('text'),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),

              //THIRD TabBarView
              CustomScrollView(
                slivers: [
                  SliverList(
                    delegate: SliverChildListDelegate(
                      [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            Expanded(
                              child: Container(
                                color: Colors.white,
                                width: double.infinity,
                                child: Image.network('https://cdn.britannica.com/24/58624-050-73A7BF0B/valley-Atlas-Mountains-Morocco.jpg',
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                          ],
                        ),
                        SizedBox(
                          height: 10.0,
                        ),
                        Row(
                          children: <Widget>[
                            Expanded(
                              child: Container(
                                color: Colors.white,
                                width: double.infinity,
                                child: Text('text'),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),

              //FOURTH TabBarView
              CustomScrollView(
                slivers: [
                  SliverList(
                    delegate: SliverChildListDelegate(
                      [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            Expanded(
                              child: Container(
                                color: Colors.white,
                                width: double.infinity,
                                child: Image.network('https://cdn.britannica.com/24/58624-050-73A7BF0B/valley-Atlas-Mountains-Morocco.jpg',
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                          ],
                        ),
                        SizedBox(
                          height: 10.0,
                        ),
                        Row(
                          children: <Widget>[
                            Expanded(
                              child: Container(
                                color: Colors.white,
                                width: double.infinity,
                                child: Text('text'),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              )
            ],
          ),
        );
      }),
    );
  }
}

Answered By – Celt K. B.

Answer Checked By – Katrina (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.