Flutter Heroアニメーション付きのモーダル
Flutterでモーダル(背景透過)の表示をHeroアニメーション付きで行う PageRouteBuilderでopaque:falseを指定する
code:main.dart
class A extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Hero(
tag: 'modal',
child: GestureDetector(
child: Container(
color: Colors.red,
child: Text('open modal'),
),
onTap: () => Navigator.of(context).push(
PageRouteBuilder(
opaque: false, // 背景を透明に
transitionDuration: const Duration(milliseconds: 300),
pageBuilder: (context, animation, secondaryAnimation) {
return Modal();
},
transitionsBuilder:
(context, animation, secondaryAnimation, child) {
return FadeTransition(
opacity: animation,
child: child,
);
},
),
),
),
),
),
);
}
}
class Modal extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black.withOpacity(0.8),
body: Center(
child: Hero(
tag: 'modal',
child: Container(
color: Colors.red,
child: Text('modal'),
),
),
),
);
}
}