Flutter - Indexed Stack with Provider

BottomNavigationBar 등을 통해 화면전환을 할 때

Indexed Stack을 이용하여 화면전환을 하면 더 관리하기 편하고

바뀌는 인덱스에 따라 해당되는 페이지를 보여줍니다

Provider를 이용하여 StatelessWidget에서 구현해봤습니다

(이후 다른 예제에서 많이 사용할 예정이어서 MultiProvider를 사용했습니다)

 

메인

void main() {
  runApp(MultiProvider(
    providers: [ChangeNotifierProvider(create: (_) => PageViewModel())],
    child: const MaterialApp(home: Main()),
  ));
}

 

메인화면

class Main extends StatelessWidget {
  const Main({super.key});

  final List<Widget> _screenData = const [Screen1(), Screen2()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Indexed Stack')),
      body: SafeArea(
        child: Consumer<PageViewModel>(
          builder: (_, vm, __) {
            return IndexedStack(
              index: vm.getPageNum,
              children: _screenData,
            );
          },
        ),
      ),
      bottomNavigationBar: Consumer<PageViewModel>(builder: (_, vm, __) {
        return BottomNavigationBar(
          showUnselectedLabels: false,
          currentIndex: vm.getPageNum,
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Screen1'),
            BottomNavigationBarItem(icon: Icon(Icons.event), label: 'Screen2'),
          ],
          onTap: (value) => vm.setPage(value),
        );
      }),
    );
  }
}

 

화면 1, 2

class Screen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Screen 1'));
  }
}

class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Screen 2'));
  }
}

 

페이지 데이터

class PageData extends ChangeNotifier {
  int _pageNum = 0; //0 : screen1 1: screen2

  int get getPageNum => _pageNum;

  void setPage(int index) {
    _pageNum = index;
    notifyListeners();
  }
}

 

Provider를 통해 stateless위젯에서도 사용 가능하고 

위젯트리의 다른부분에서 필요한 데이터를 변경하기에도 유용하고

데이터와 화면(UI)의 관심사 분리를 통해 유지보수하기에도 유용해집니다

이외에도 BLoC, Scoped model, InheritedWidget, Redux, Mobx등 다양한 방법이 있습니다