2

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.

5
  • give the same scroll controller for all three views so when you scroll on a specific view all three will be scrolled. Commented Oct 31, 2022 at 7:28
  • Not working. I Have tried this solution earlier. Commented Nov 1, 2022 at 12:29
  • what about changing physics to NeverScroll and only enabling physics to only one. Commented Nov 4, 2022 at 5:17
  • I have tried everything you mentioned above. Then I posted this question. Commented Nov 5, 2022 at 17:09
  • I'm facing a similar problem is there any solution? Commented May 22, 2024 at 10:38

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.