I want keep this Stopwatch screen running while switching through screens

Issue

I have this Flutter iOS styled Stopwatch and I would like to keep the stopwatch running while I switch through screens.

Actual Stopwatch behavior

I already tried with some setState positioned inside the initState function of my Stopwatch but this didn’t work.

I think that it doesn’t rebuild the widget when I come back to the Stopwatch screen.

//My builder inside a home_screen.dart file

@override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      controller: controller,
      tabBar: CupertinoTabBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Ionicons.getIconData('ios-globe'),
            ),
            title: Text('World Clock'),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Ionicons.getIconData('ios-alarm'),
            ),
            title: Text('Alarm'),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Ionicons.getIconData('ios-bed'),
            ),
            title: Text('Bedtime'),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Ionicons.getIconData('ios-stopwatch'),
            ),
            title: Text('Stopwatch'),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Ionicons.getIconData('ios-timer'),
            ),
            title: Text('Timer'),
          ),
        ],
      ),
      tabBuilder: (context, i) {
        if(i == 3){
          final Dependencies dependencies = new Dependencies();
          return StopWatch(dependencies: dependencies,);
        }else{
          return CupertinoTabView(
            builder: (context){
              return CupertinoPageScaffold(
                navigationBar: CupertinoNavigationBar(
                  middle: Text(chooseMiddle(i)),
                ),
                child: Center(
                  child: Text('Screen $i'),
                ),
              );
            },
          );
        }
      },
    );
  }

Solution

Whenever you switch between tabs it causes to rebuild the screen and hence creating a new object of the StopWatch widget in the tab builder. You will have to user PageStorageBucket and PageStorageKeys to maintain the pages.

Something like this should help

class HomeScreen extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return HomeWidget();
  }
}

class HomeWidget extends State<HomeScreen>{

final List<Widget> pages = [
    DashboardScreen(
      key: PageStorageKey('Dashboard'),
    ),
    CarsScreen(
      key: PageStorageKey('Cars'),
    ),
    MapScreen(
      key: PageStorageKey('Find'),
    ),
    ProfileScreen(
      key: PageStorageKey('Profile'),
    ),
    SettingScreen(
      key: PageStorageKey('Settings'),
    )
  ];

  final PageStorageBucket bucket = PageStorageBucket();

  int _selectedIndex = 0;

Widget _bottomNavigationBar(int selectedIndex) => BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  onTap: (int index) => setState(() => _selectedIndex = index),
  currentIndex: selectedIndex,
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.home), title: Text('Home')),
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.car), title: Text('My Cars')),
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.search), title: Text('Find')),
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.profile_circled), title: Text('Profile')),
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.settings), title: Text('Settings')),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Smart Park'),
        ),
        body: PageStorage(
          child: pages[_selectedIndex],
          bucket: bucket,
        ),
        bottomNavigationBar: _bottomNavigationBar(_selectedIndex),   
      );
  }
}

Answered By – Arjav Dave

Answer Checked By – Timothy Miller (FlutterFixes Admin)