How to create scrollable contents within TabBarView with my entire app?

Question

I created TabBar within SingleChildScrollView. The problem is I want to create scrollable contents within TabBarView with my entire app instead of scroll contents only inside TabBarView. I tried ListView.Builder and NestedScrollView but didn't work with me .. Is there any solution?

This is my Code :

    class TwitterTabBare extends StatefulWidget {
      @override
      _TwitterTabBareState createState() => _TwitterTabBareState();
    }
    
    class _TwitterTabBareState extends State<TwitterTabBare>
        with SingleTickerProviderStateMixin {
      TabController _tabController;
      @override
      void initState() {
        super.initState();
        _tabController = TabController(length: 4, vsync: this);
      }
    
      @override
      Widget build(BuildContext context) {
        double screenHeight = MediaQuery.of(context).size.height;
        return column(
          children: <Widget>[
            TabBar(
              controller: _tabController,
              labelColor: Colors.blue,
              unselectedLabelColor: Colors.grey[700],
              tabs: <Widget>[
                Tab(
                  text: 'Tweets',
                ),
                Tab(
                  text: 'Replies',
                ),
                Tab(
                  text: 'Media',
                ),
                Tab(
                  text: 'Tweets',
                ),
              ],
            ),
            Container(
              constraints: BoxConstraints.expand(height: 300),
              child: TabBarView(
                controller: _tabController,
                children: <Widget>[
                  // CardPage(),
                  Column(
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                      Text('Tweets & replies'),
                                                                                                  
                    ],
                  ),
                      Text('Replies'),
                      Text('Media'),
                      Text('Likes'),
                ],
              ),
            ),
          ],
        );
      }
    }

Demo

Try with this approach : https://medium.com/flutter/slivers-demystified-6ff68ab0296f — Amit Prajapati, Oct 05 '19 at 15:03

score 0 · Answer 1 · answered Jan 11 '22 at 01:42

The issue on the code snippet you've provided is that the Column is not scrollable and overflowed on the given layout. What you can consider using here is ListView to create scrollable Widgets. Here's a working sample that I've posted that uses ListView and TabBarView. To handle swiping to other tabs, NestedScrollView needs to be used.

How to create scrollable contents within TabBarView with my entire app?

1 Answers1