-
[Flutter] AnimatedCrossFade함께 공부하는 Flutter 2023. 5. 28. 17:46반응형
AnimatedCrossFade
는 두 개의 위젯 사이를 부드럽게 전환하는 애니메이션을 제공하는 Flutter 위젯입니다. 주어진 두 개의 자식 위젯 사이에서 전환되며, 전환될 때 페이드 인/아웃 애니메이션 효과를 제공합니다.AnimatedCrossFade
위젯의 주요 속성은 다음과 같습니다:firstChild
: 첫 번째 자식 위젯입니다. 전환 중에 보여질 위젯입니다.secondChild
: 두 번째 자식 위젯입니다. 전환 중에 가려질 위젯입니다.crossFadeState
: 전환 상태를 나타내는CrossFadeState
값입니다. 주로CrossFadeState.showFirst
또는CrossFadeState.showSecond
값을 사용합니다.duration
: 전환 애니메이션의 지속 시간을 나타내는Duration
값입니다.
다음은
AnimatedCrossFade
의 간단한 예제 코드입니다:import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } enum CrossFadeStatus { First, Second } class _MyAppState extends State<MyApp> { CrossFadeStatus status = CrossFadeStatus.First; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('AnimatedCrossFade 예제'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ AnimatedCrossFade( duration: Duration(seconds: 1), firstChild: Container( width: 200, height: 200, color: Colors.blue, child: Center( child: Text( '첫 번째 위젯', style: TextStyle( color: Colors.white, fontSize: 24, ), ), ), ), secondChild: Container( width: 200, height: 200, color: Colors.red, child: Center( child: Text( '두 번째 위젯', style: TextStyle( color: Colors.white, fontSize: 24, ), ), ), ), crossFadeState: status == CrossFadeStatus.First ? CrossFadeState.showFirst : CrossFadeState.showSecond, ), SizedBox(height: 20), ElevatedButton( onPressed: () { setState(() { status = status == CrossFadeStatus.First ? CrossFadeStatus.Second : CrossFadeStatus.First; }); }, child: Text('전환'), ), ], ), ), ), ); } }
이 예제에서는
AnimatedCrossFade
위젯을 사용하여 "첫 번째 위젯"과 "두 번째 위젯" 사이를 전환합니다.CrossFadeStatus
라는 열거형을 사용하여 전환 상태를 추적하고, 버튼을 누를 때마다 전환 상태를 변경하고setState
를 호출하여 화면을 다시 그립니다.AnimatedCrossFade
위젯은duration
속성을 사용하여 전환 애니메이션의 지속 시간을 지정합니다.위 예제 코드를 실행하면 "첫 번째 위젯"과 "두 번째 위젯"이 번갈아가며 부드럽게 전환됩니다. 버튼을 클릭하면
setState
를 통해 전환 상태가 변경되고,AnimatedCrossFade
위젯을 통해 전환 애니메이션이 수행됩니다.AnimatedCrossFade
를 사용하면 두 개의 위젯 사이를 부드럽게 전환하고 애니메이션 효과를 추가할 수 있습니다. 이를 활용하여 다양한 화면 전환 효과를 구현할 수 있습니다.반응형'함께 공부하는 Flutter' 카테고리의 다른 글
[Flutter] BoxDecoration 에서 gradient 넣는 법 예시 (0) 2023.12.14 [Flutter] Navigator 의 주요 메소드 (0) 2023.05.29 [Flutter] DefaultTabController & TabBarView (0) 2023.05.28 [Flutter] Form에서 GlobalKey를 이용할 때 개별 항목의 validation 로직을 적용하는 방법 (0) 2023.05.01 [Flutter] AnimatedContainer (0) 2023.05.01