flutter how can I make this whole page scrollable?

Question

I'm stuck with how to fix this problem. What I want to achieve is make whole this page scrollable. So, when you scroll down, top portion of page will invisible and only TabBarView is visible.
I have this code.

return DefaultTabController(
  length: 3,
   child: Scaffold(
   appBar: AppBar(
     elevation: 0.0,
     backgroundColor: Colors.white,
   ),
   body: ListView(
     shrinkWrap: true,
     children: <Widget>[
      Padding(
        padding: const EdgeInsets.fromLTRB(15.0, 30.0, 15.0, 5.0),
        child: Column(
          children: <Widget>[
            ListTile(
              leading: CircleAvatar(backgroundImage: NetworkImage('https://images.unsplash.com/photo-1543194094-3fb5703804d5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cb818de45a33597672b648166ce73764&auto=format&fit=crop&w=500&q=60'), radius: 42.0),
              title: RaisedButton(
                textColor: Colors.white,
                child: Text(
                  'Edit Profile',
                  maxLines: 1,
                ),
                color: Theme.of(context).primaryColor,
                onPressed: () {},
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 22.0, bottom: 5.0, left: 30.0),
              child: Row(
                children: <Widget>[
                  Flexible(
                    child: Text(
                    'Spider-Man',
                    style: const TextStyle(fontSize: 16.0),
                    overflow: TextOverflow.ellipsis,
                  ),
                  ),
                  const SizedBox(width: 1.0),
                  Icon(Icons.check_circle, size: 16.0, color: Theme.of(context).primaryColor),
                ],
              ),
            ),
          ],
        ),
      ),
      Container(
        width: double.infinity,
        height: 40.0,
        decoration: const BoxDecoration(color: Colors.white),
        child: TabBar(
          controller: _controller,
          labelColor: Colors.black,
          indicatorColor: Theme.of(context).primaryColor,
          unselectedLabelColor: Colors.grey,
          tabs: [
            Tab(text: 'Following'),
            Tab(text: 'Follower'),
            Tab(text: 'Likes'),
          ],
        ),
      ),
      Expanded(
      child: TabBarView(
        physics: const NeverScrollableScrollPhysics(), 
        controller: _controller,
          children: 
        [
          Center(
            child: Text('Following'),
          ),
          Center(
            child: Text('Follower'),
          ),
          ListView.builder(
            itemCount: 100,
            itemExtent: 100.0,
            itemBuilder: (c ,i) {
              return Center(
                child: Text(i.toString())
              );
            },
          )
        ]
        ),
      )
     ],
   )
  ),
);

But because of Expanded console says

flutter: Incorrect use of ParentDataWidget.

And I tried to wrap Column or Flex but console says those this time

RenderFlex children have non-zero flex but incoming height constraints are unbounded.

How can I make this whole page scrollable?

Answer 1

I think a more elegant solution would be to use Slivers within a NestedScrollView

More info https://docs.flutter.io/flutter/widgets/NestedScrollView-class.html

Answer 2

The issue is with the parent of your TabBarView, if you use Expanded it doesn't know how much it will have to expand because there are no constraints for ListView.

Replace your Expanded by SizedBox or Container with a fixed height:

SizedBox(
   height: 600.0,
   child: TabBarView(