Я предоставлю вам несколько методов реализации анимации героев для навигации по страницам во Flutter, а также примеры кода. Анимация героев – отличный способ создать плавные и визуально привлекательные переходы между различными экранами вашего приложения.
Метод 1: использование виджета Hero
// Screen 1
class Screen1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Screen 1'),
),
body: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Screen2()),
);
},
child: Hero(
tag: 'imageHero',
child: Image.network('https://example.com/image.jpg'),
),
),
);
}
}
// Screen 2
class Screen2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Screen 2'),
),
body: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Center(
child: Hero(
tag: 'imageHero',
child: Image.network('https://example.com/image.jpg'),
),
),
),
);
}
}
Метод 2: использование PageRouteBuilder
// Screen 1
class Screen1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Screen 1'),
),
body: GestureDetector(
onTap: () {
Navigator.push(
context,
PageRouteBuilder(
transitionDuration: Duration(milliseconds: 500),
pageBuilder: (_, __, ___) => Screen2(),
transitionsBuilder: (_, animation, __, child) {
return FadeTransition(
opacity: animation,
child: child,
);
},
),
);
},
child: Image.network('https://example.com/image.jpg'),
),
);
}
}
// Screen 2
class Screen2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Screen 2'),
),
body: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Center(
child: Image.network('https://example.com/image.jpg'),
),
),
);
}
}
Метод 3: использование SharedAxisTransition
// Screen 1
class Screen1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Screen 1'),
),
body: GestureDetector(
onTap: () {
Navigator.push(
context,
PageRouteBuilder(
transitionDuration: Duration(milliseconds: 500),
pageBuilder: (_, __, ___) => Screen2(),
transitionsBuilder: (_, animation, __, child) {
return SharedAxisTransition(
animation: animation,
secondaryAnimation: __,
transitionType: SharedAxisTransitionType.horizontal,
child: child,
);
},
),
);
},
child: Image.network('https://example.com/image.jpg'),
),
);
}
}
// Screen 2
class Screen2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Screen 2'),
),
body: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Center(
child: Image.network('https://example.com/image.jpg'),
),
),
);
}
}
Это всего лишь несколько методов реализации анимации героев для навигации по страницам во Flutter. Каждый метод обеспечивает свой тип анимационного эффекта. Выберите тот, который соответствует дизайну и требованиям вашего приложения.