Overview.
페이지 이동시 히어로 애니메이션을 사용해보자
- hero를 사용해보자
0. 문서
https://docs.flutter.dev/ui/animations/hero-animations
1. Hero
위에서 보이듯이 한번 직접 간단하게 해봤다. [동영상이 와이리 커] 아무튼 애니메이션 효과를 줄 수 있는데 이는 tag 를 이용한 방식인 것 같다.
1. 메인 화면
중요점은 tag 에 문자열으로 banner 라고 지정했으면 다음 /sub 의 Hero 의 tag 에도 banner 로 지정이 되어 있어야한다.
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(home: _Home(), routes: {
"/sub": (context) => const HeroSubPage(),
});
}
}
class _Home extends StatelessWidget {
const _Home({super.key});
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
children: [
// 이 부분!!
Hero(
tag: "banner",
child: Image.asset("assets/image.jpeg"),
),
// 네비게이션
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/sub");
},
child: Text("이동"),
),
],
),
),
);
}
}
2. sub 화면
class HeroSubPage extends StatelessWidget {
const HeroSubPage({Key? key}) : super(key: key); // 수정
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sub 페이지입니다."),
),
body: Column(
children: [
// 네비게이션
Container(
alignment: Alignment.center,
color: Colors.red,
height: 400,
child: ElevatedButton(
child: Text("홈으로 이동"),
onPressed: () {
Navigator.pop(context);
},
),
),
// 이 부분!!!
Hero(
tag: "banner",
child: Image.asset("assets/image.jpeg"),
),
],
),
);
}
}
'flutter & dart' 카테고리의 다른 글
flutter & dart - 블러 처리(모자이크)를 해보자 BackdropFilter (0) | 2024.04.01 |
---|---|
flutter & dart - Align 위젯 (0) | 2024.04.01 |
flutter & dart - alert 창과 같은 Dialog (0) | 2024.04.01 |
flutter & dart - 버튼 활성화와 비활성화 AbsorbPointer (0) | 2024.04.01 |
flutter & dart - 도형을 만드는 ClipRRect , ClipOval , ClipPath (0) | 2024.04.01 |