✨ Flutter 위젯 시리즈: StatefulWidget 고급 패턴 완전 정복

Flutter 개발자라면 무조건 쓰는 StatefulWidget!
하지만 실무에서는 더 고급 패턴이 필요합니다.
오늘은 AutomaticKeepAliveClientMixin과 TickerProviderStateMixin을 중심으로 알아봅니다.

---

✅ 1️⃣ AutomaticKeepAliveClientMixin

TabBarView, PageView를 사용할 때
화면을 스와이프하면 페이지가 dispose되어 상태가 날아가는 경우가 많습니다.
이를 막아주는 믹스인이 바로 AutomaticKeepAliveClientMixin입니다.

class KeepAlivePage extends StatefulWidget {
  const KeepAlivePage({Key? key}) : super(key: key);

  @override
  State<KeepAlivePage> createState() => _KeepAlivePageState();
}

class _KeepAlivePageState extends State<KeepAlivePage> with AutomaticKeepAliveClientMixin {
  int counter = 0;

  @override
  bool get wantKeepAlive => true; // 핵심!

  @override
  Widget build(BuildContext context) {
    super.build(context); // 꼭 호출!
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Counter: \$counter'),
          ElevatedButton(
            onPressed: () {
              setState(() {
                counter++;
              });
            },
            child: Text('증가'),
          )
        ],
      ),
    );
  }
}

✔️ wantKeepAlive를 true로 리턴하고,
build에서 super.build(context) 호출은 필수입니다!

---

✅ 2️⃣ TickerProviderStateMixin

애니메이션을 만들 때 AnimationController를 쓰려면
Ticker가 필요합니다.
StatefulWidget에서 TickerProviderStateMixin을 mixin으로 추가해주면 됩니다.

class TickerExample extends StatefulWidget {
  const TickerExample({Key? key}) : super(key: key);

  @override
  State<TickerExample> createState() => _TickerExampleState();
}

class _TickerExampleState extends State<TickerExample> with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this, // TickerProvider 역할!
    )..repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FadeTransition(
        opacity: _controller,
        child: Container(
          width: 200,
          height: 200,
          color: Colors.blue,
        ),
      ),
    );
  }
}

✔️ vsync: this 덕분에 애니메이션이 리소스를 절약하며 동작합니다!

---

✅ 언제 쓰면 좋을까?

• ✔️ AutomaticKeepAliveClientMixin → TabBarView, PageView에서 상태 유지할 때
• ✔️ TickerProviderStateMixin → AnimationController가 필요할 때

---

✅ 정리

패턴	설명	언제 사용?
AutomaticKeepAliveClientMixin	위젯 상태 유지	Tab, Page 스와이프 시
TickerProviderStateMixin	애니메이션 Ticker 제공	AnimationController 사용 시

---

📌 다음 편 예고

• 👉 Flutter Theme & Dark Mode 완전 정복