[Flutter] AnimatedCrossFade widget

 

이번 포스팅에서는 AnimatedCrossFade 위젯에 대해 알아보겠습니다. AnimatedCrossFade는 두 위젯을 애니메이션 사용해서 바꿀 수 있도록 도와줍니다. 컬러나 텍스트 뿐만 아니라 사이즈 변경까지도 자동으로 애니메이션을 적용시킬 수 있기 때문에 매우 유용한 위젯입니다. 

 

 

 

최종 동영상

 

 

 

 

 

first와 second 위젯을 지정해준 후에 crossFadeState 값에 어떤 위젯을 보여줄지 결정해주면 됩니다. 

아래 예제에서는 first라는 변수로 구분해주고 있습니다. 

간단하게 사용할 수 있으니 부가적인 설명은 생략했습니다. 

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  bool first = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  setState(() {
                    first = !first;
                  });
                },
                child: const Text("변경")),
            Expanded(
              child: AnimatedCrossFade(
                firstChild: Container(
                  width: 300,
                  height: 300,
                  color: Colors.red,
                  child: const Center(
                    child: Text(
                      "첫 번째 widget",
                      style: TextStyle(fontSize: 20, color: Colors.white),
                    ),
                  ),
                ),
                secondChild: Container(
                  width: 400,
                  height: 400,
                  color: Colors.blue,
                  child: const Center(
                    child: Text(
                      "두 번째 widget",
                      style: TextStyle(fontSize: 20, color: Colors.white),
                    ),
                  ),
                ),
                crossFadeState: first
                    ? CrossFadeState.showFirst
                    : CrossFadeState.showSecond,
                duration: const Duration(milliseconds: 1500),
                // reverseDuration: const Duration(milliseconds: 3000),

                // firstCurve: Curves.fastOutSlowIn,

                // secondCurve: Curves.elasticInOut,

                // sizeCurve: Curves.slowMiddle,
              ),
            ),
          ],
        ),
      ),
    );
  }
}