I want keep this Stopwatch screen running while switching through screens

Question

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

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'),
                ),
              );
            },
          );
        }
      },
    );
  }

score 0 · Accepted Answer · answered Aug 07 '19 at 11:59

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),   
      );
  }
}

I want keep this Stopwatch screen running while switching through screens

1 Answers1