如何导航到 flutter 中的特定选项卡？

Question

I am new to flutter and in my app, I want to navigate to the tab on the previous screen, from which I navigated forward in the first place.

Please see the attached video for clear visualization.

Please note that instead of popping the top screen on the back button I am again pushing the previous activity. (Due to some separate issues i have to do so) see video

if it helps,

I can explain what is actually happening.

I have 5 tabs, which are working out like filters. I am displaying a list of data in the "All" tab and the rest of the tabs eg Lunch, Prayer, etc are basically filtering the list and displaying the content there.

Now each listed tile when clicked will take to the particularly detailed section (next screen). And when I navigate back to the main screen, it should open the same tab it once navigated from

I have used the initial index in TabBarView, where I can pass the current index of tab. But it gives a null error Idk why

Here is my code of class in which tabs are present and content:

 class SalesManListDemo extends StatefulWidget {
  const SalesManListDemo({
    Key key,
  }) : super(key: key);

  

    @override
  State<SalesManListDemo> createState() => _SalesManListDemoState();
}

class _SalesManListDemoState extends State<SalesManListDemo>
    with SingleTickerProviderStateMixin {
  bool isSearching = false;
  TabController _tabController;


  final List<Tab> myTabs = <Tab>[
    const Tab(
      text: 'All',
    ),
    const Tab(
      text: 'Active',
    ),
    const Tab(
      text: 'InActive',
    ),
    const Tab(
      text: 'Lunch',
    ),
    const Tab(
      text: 'Prayer',
    ),
  ];
    @override
  void initState() {
    _tabController = TabController(length: myTabs.length, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

TabBar(
            controller: _tabController,
            labelColor: const Color(0xff2454f4),
            labelStyle: TextStyle(
              decoration: TextDecoration.underline,
              fontSize: 18.sp,
              fontWeight: FontWeight.w700,
            ),
            unselectedLabelStyle: TextStyle(
              color: Colors.grey,
              decoration: TextDecoration.none,
              fontSize: 18.sp,
              fontWeight: FontWeight.w700,
            ),
            isScrollable: true,
            indicatorColor: Colors.transparent,
            unselectedLabelColor: const Color(0xffa3a3a3),
            tabs: myTabs,
          ),
          SizedBox(
            height: 8.h,
          ),
          Expanded(
            child: TabBarView(controller: _tabController, children: [
              // All employees List View
              SalesmanList(
                SalesmanDataa: SalesmanData,
                list_length: SalesmanData.length,
              ),
              SalesmanList(
                SalesmanDataa: activeemp,
                list_length: activeemp.length,
              ),
              SalesmanList(
                SalesmanDataa: inActiveEmployees,
                list_length: inActiveEmployees.length,
              ),
              SalesmanList(
                SalesmanDataa: atLunchEmployees,
                list_length: atLunchEmployees.length,
              ),
              SalesmanList(
                SalesmanDataa: atPrayerEmployees,
                list_length: atPrayerEmployees.length,
              ),
            ]),

And this is the code of another class from where I navigate back on the tabs screen:

leading: IconButton(
        onPressed: () {
          Navigator.pushReplacement(context,
              MaterialPageRoute(builder: (context) => SalesManListDemo()));
        },

Answer 1

Please try CupertinoTabScaffold . In this state, you keep the previous state in memory and when you return, you can continue from the old state.

The tab bar logic of applications such as instagram and twitter is like this.

A tabBar and a tabBuilder are required. The CupertinoTabScaffold will automatically listen to the provided CupertinoTabBar's tap callbacks to change the active tab.

A controller can be used to provide an initially selected tab index and manage subsequent tab changes. If a controller is not specified, the scaffold will create its own CupertinoTabController and manage it internally. Otherwise it's up to the owner of controller to call dispose on it after finish using it.

For Example:

CupertinoTabScaffold( tabBar: CupertinoTabBar(
items: const <BottomNavigationBarItem> [
  // ...
],), tabBuilder: (BuildContext context, int index) {
return CupertinoTabView(
  builder: (BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Page 1 of tab $index'),
      ),child: Center(
        child: CupertinoButton(
          child: const Text('Next page'),
          onPressed: () {
            Navigator.of(context).push(
              CupertinoPageRoute<void>(
                builder: (BuildContext context) {
                  return CupertinoPageScaffold(
                    navigationBar: CupertinoNavigationBar(
                      middle: Text('Page 2 of tab $index'),
                    ),
                    child: Center(
                      child: CupertinoButton(
                        child: const Text('Back'),
                        onPressed: () { Navigator.of(context).pop(); },
                      ),
                    ),
                  );
                },
              ),);
          },
        ),
      ),
    );
  },
);

}, )