im using NestedScrollView then SliverAppBar to make pinned AppBar which contains title and bottom tab and the tab contains ListView.separated, the problem is in the first index of list tile in show large empty space even though there are no widgets, everything was fine when i use regular AppBar.

HomePage Code

return DefaultTabController(
  length: 3,
  child: Scaffold(
    body: NestedScrollView(
      floatHeaderSlivers: true,
      headerSliverBuilder: (context, innerBoxIsScrolled) => [
        SliverAppBar(
          pinned: true,
          floating: true,
          snap: true,
          toolbarHeight: 80,
          elevation: 0,
          backgroundColor: Colors.grey,
          title: Text(
            'GET API',
            style: TextStyle(
              fontFamily: 'avenir',
              fontSize: 32,
              fontWeight: FontWeight.w900,
              color: Colors.black,
            ),
          ),
          actions: [
            IconButton(
              icon: Icon(Icons.refresh),
              onPressed: () {
                userC.fetchUser();
              },
            ),
          ],
          bottom: TabBar(
            indicatorColor: Colors.white,
            tabs: [
              Tab(
                icon: Icon(Icons.group),
                text: 'List User',
              ),
              Tab(
                icon: Icon(Icons.person),
                text: 'Single User',
              ),
              Tab(
                icon: Icon(Icons.notifications_active),
                text: 'Notif',
              ),
            ],
          ),
        ),
      ],
      body: TabBarView(
        children: [
          ListUser(),
          ListUser(),
          ListUser(),
        ],
      ),
    ),
  ),
);

ListView.separated Code

Container(
  child: Column(
    children: [
      Expanded(
        child: Obx(
          () => (userC.isLoading.value)
              ? Center(
                  child: CircularProgressIndicator(),
                )
              : ListView.separated(
                  separatorBuilder: (context, index) => SizedBox(height: 20),
                  itemCount: userC.usersList.length,
                  itemBuilder: (context, index) => UserTile(
                    userC.usersList[index],
                  ),
                ),
        ),
      ),
    ],
  ),
);

UserTile Code

class UserTile extends StatelessWidget {
  final ListUserModel user;
  UserTile(this.user);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Image.network(user.avatarUrl),
      title: Text(user.login),
      trailing: Text(user.id.toString()),
    );
  }
}

And this is the image

CodePudding user response：

separatorBuilder: (context, index) => SizedBox(height: 20),

This may be the problem look at it, in the ListView.separated Code

CodePudding user response：

I don't understand it just fixed after a few hours later after i get back to turn on my pc.