I’m building a Flutter app with nested TabBarView widgets. The parent tab has two main tabs (“Tab 1” and “Tab 2”). Inside “Tab 2”, there are sub-tabs (“Sub Tab 1”, “Sub Tab 2”, etc.) implemented using a second TabBarView.

I want to go to Main Tab 1 when user swipe left from Sub Tab 1.
Specially how can I detect if someone swipe left from Sub Tab 1? So i can easily animate to Main Tab 1.

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2, // Parent tabs
      child: Builder( // Use Builder to get a proper context for the parent DefaultTabController
        builder: (BuildContext parentContext) {

          return Scaffold(
            appBar: AppBar(
              title: const Text('Tabs Example'),
            ),
            body: Column(
              children: [
                // Main TabBar
                const TabBar(
                  tabs: [
                    Tab(text: 'Tab 1'),
                    Tab(text: 'Tab 2'),
                  ],
                ),
                Expanded(
                  child: TabBarView(
                    children: [
                      // First Tab Content
                      const Center(child: Text('This is Tab 1')),

                      // Second Tab with Sub-tabs
                      DefaultTabController(
                        length: 4,
                        child: Scaffold(
                          appBar: AppBar(
                            bottom: const TabBar(
                              padding: EdgeInsets.symmetric(horizontal: 20),
                              tabs: [
                                Tab(text: 'Sub Tab 1'),
                                Tab(text: 'Sub Tab 2'),
                                Tab(text: 'Sub Tab 3'),
                                Tab(text: 'Sub Tab 4'),
                              ],
                            ),
                          ),
                          body: const TabBarView(
                            children: [
                              Center(child: Text('Content for Sub Tab 1')),
                              Center(child: Text('Content for Sub Tab 2')),
                              Center(child: Text('Content for Sub Tab 3')),
                              Center(child: Text('Content for Sub Tab 4')),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}