[Flutter] 위젯 간 상태 유지 IndexedStack

BottomNavigationBar 사용 시, 탭을 이동 할 때마다 re-build되는 현상 발생.

리스트뷰를 스크롤해서 보다가 다른 탭 이동 후 다시 돌아오면 리스트가 초기화 되는 현상. 상태 유지 안됨.

 

이럴 때 IndexedStack 을 사용하면 쉽게 해결 가능하다. 

 

class Tabbar extends StatefulWidget {
  Tabbar({this.screens});

  static const Tag = "Tabbar";
  final List<Widget> screens;
  @override
  State<StatefulWidget> createState() {
  return _TabbarState();
  }
}

class _TabbarState extends State<Tabbar> {
  int _currentIndex = 0;
  Widget currentScreen;

  @override
  Widget build(BuildContext context) {
    var _l10n = PackedLocalizations.of(context);

    return Scaffold(
  body: IndexedStack(
    index: _currentIndex,
    children: Widget[
    	Widget1(),
        Widget2(),
        Widget3()
    ],
  ),
  bottomNavigationBar: BottomNavigationBar(
    fixedColor: Colors.black,
    type: BottomNavigationBarType.fixed,
    onTap: onTabTapped,
    currentIndex: _currentIndex,
    items: [
      BottomNavigationBarItem(
        icon: new Icon(Icons.format_list_bulleted),
        title: new Text(_l10n.tripsTitle),
      ),
      BottomNavigationBarItem(
        icon: new Icon(Icons.settings),
        title: new Text(_l10n.settingsTitle),
      )
    ],
  ),
);
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

setState()에서 현재 인덱스 값만 변경해주면 된다.

 

https://stackoverflow.com/questions/52598900/flutter-bottomnavigationbar-rebuilds-page-on-change-of-tab