Flutter TabBarView inside CustomScrollView - Unresponsive content and scrolling issues

Question

I'm trying to implement a Flutter app with a TabBarView inside a CustomScrollView and below CupertinoSliverNavigationBar, where each tab has scrollable content. However, I'm facing some issues with unresponsive content and scrolling behavior.

I tried to use NestedScrollView and SliverOverlapObserver but it did not work

Example vide can be found here: https://github.com/theiskaa/dotfiles/assets/59066341/934acc26-1824-4450-877e-3f264b999f2f

score -1 · Answer 1 · answered May 26 '23 at 15:06

Add Widget SliverFillRemaining after CupertinoSliverNavigationBar inside the CustomScrollView.

SliverFillRemaining will take the remaining scrolling area and handle it. Now pass the TabBarView as the child for SliverFillRemaining.

Refer to the below code, for a sample implementation.


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

///
class TestScreen extends StatefulWidget {
  /// base constructor
  const TestScreen({super.key});

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 3);
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: CustomScrollView(
        slivers: [
          const CupertinoSliverNavigationBar(
            leading: Icon(Icons.person_2),
            largeTitle: Text('Title'),
            trailing: Icon(Icons.add_box),
          ),

          //
          SliverFillRemaining(
            child: TabBarView(
              controller: _tabController,
              children: [
                _buildTempList(15),
                _buildTempList(5),
                _buildTempList(25),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildTempList(int itemCount) {
    return ListView.builder(
      itemCount: itemCount,
      itemBuilder: (context, index) => CupertinoListTile(
        title: Text('This is $index'),
      ),
    );
  }
}

Flutter TabBarView inside CustomScrollView - Unresponsive content and scrolling issues

1 Answers1