0

I'm working on a project and I got this very intuitive UI problem. I want to structure my widget tree in this way -> NestedScrollView -> TabView -> NestedScrollView -> TabView -> Custom scrollView (I just want to scroll those items in the Tabview page too.).

I'm facing a severe problem. I can only scroll all three views separately. I want to scroll all three together. Is there any way I can solve this? Looking for community support to tackle this issue. I have tried every possible solution which came to my mind.

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  late final TabController _tabControllerParent;
  late final TabController _tabControllerChild;
  late final ScrollController _scrollController;
  @override
  void initState() {
    super.initState();
    _tabControllerParent = TabController(length: 1, vsync: this);
    _tabControllerChild = TabController(length: 1, vsync: this);
    _scrollController = ScrollController();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.green,
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return [
              SliverAppBar(
                flexibleSpace: Container(
                  color: Colors.red,
                  child: TabBar(
                    controller: _tabControllerParent,
                    tabs: [
                      Tab(
                        text: 'A',
                      ),
                    ],
                  ),
                ),
              )
            ];
          },
          body: TabBarView(
            controller: _tabControllerParent,
            physics: NeverScrollableScrollPhysics(),
            children: [
              NestedScrollView(
                headerSliverBuilder:
                    (BuildContext context, bool innerBoxIsScrolled) {
                  return [
                    //I want to stick this app bar for that i can use Sliver Persistent Header
                    //To keep the question simple i used SliverAppBar
                    SliverAppBar(
                      flexibleSpace: Container(
                        color: Colors.black,
                        child: TabBar(
                          controller: _tabControllerChild,
                          tabs: [
                            Tab(
                              text: 'One',
                            ),
                          ],
                        ),
                      ),
                    )
                  ];
                },
                body: TabBarView(
                    controller: _tabControllerChild,
                    physics: NeverScrollableScrollPhysics(),
                    children: [
                   //I want to scroll this content vertically.
                      CustomScrollView(controller: _scrollController, slivers: [
                        SliverToBoxAdapter(
                          child: Container(
                            height: 1500,
                            child: Text('One'),
                            color: Colors.yellow,
                          ),
                        ),
                      ]),
                    ]),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Code will help you to understand the issue better.

Creator
  • 303
  • 4
  • 23

0 Answers0