flutterflutter-sliver

can SliverList be used inside TabBarView or vice versa?


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