AutomaticKeepAliveClientMixin는 어떻게 쓰는가?

탭 이동했을 때 Widget State Preserve하는 간단한 코드입니다. 버튼누르면 FirstPage, SecondPage 텍스트 상태를 변경하는 위젯이에요.

다음 부분만 참고하시면 도움될듯해요. 나머지는 UI코드여서요.

HomePage: SingleTickerProviderStateMixin, TabBarController, BottomNavigationBar FirstPage, SecondPage: AutomaticKeepAliveClientMixin


void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // home: TabViewWidget(),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TabView with BottomNavigationBar'),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          FirstPage(),
          SecondPage(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _tabController.index,
        onTap: (index) {
          setState(() {
            _tabController.index = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'First Page',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Second Page',
          ),
        ],
      ),
    );
  }

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

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> with AutomaticKeepAliveClientMixin {
  String text = '';
  @override
  Widget build(BuildContext context) {
    super.build(context); // Required to maintain state
    return Center(
        child: Column(
          children: [
            Text(text),
            OutlinedButton(
                onPressed: () {
                  setState(() {
                  text = 'First Page';
                  });
                },
                child: const Text("Click")
            )
          ],
        )
    );
  }

  @override
  bool get wantKeepAlive => true;
}

class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> with AutomaticKeepAliveClientMixin {
  String text = '';
  @override
  Widget build(BuildContext context) {
    super.build(context); // Required to maintain state
    return Center(
      child: Column(
        children: [
          Text(text),
          OutlinedButton(
            onPressed: () {
              setState(() {
                text = 'Second Page';
              });
            },
            child: const Text("Click")
          )
      ],
      )
    );
  }

  @override
  bool get wantKeepAlive => true;
}

kyuyoungheo / flutter-study

AutomaticKeepAliveClientMixin는 어떻게 쓰는가? #13