Est-ce que tu regardes des films? Ou lisez-vous des romans ou des histoires ? Dans tout cinéma, ou roman, il n’y a qu’un seul Héros. À droite? Dans Flutter, il n’y a qu’une seule animation de héros. Lorsque nous utilisons le Hero Widget, nous devons le maintenir.
Comment maintenons-nous cela?
Eh bien, nous verrons dans une minute.
Avant cela, apprenons quelques faits sur le Hero Widget of Animation.
Lorsqu’un widget vole d’une page ou d’un écran à une autre page ou écran, nous l’appelons Hero Animation.
Qu’est-ce que ça veut dire?
One Hero Widget vole de la première page à la deuxième page. Par la suite, il peut voler de la deuxième page à la troisième page. Et le voyage peut continuer.
Cependant, comment distinguerons-nous plusieurs Hero Widgets.
Chaque Hero Widget a un paramètre appelé “tag”. Regardez l’extrait de code ci-dessous.
child: Hero(
tag: 'wb',
child: Container(
...Le héros ci-dessus se distingue par le paramètre « tag ».
En conséquence, nous pouvons accéder au Hero Widget particulier par le “tag” dans n’importe quelle page.
Par conséquent, le Hero Widget implémente un type spécial d’animations. Elle est connue sous le nom de « transitions d’éléments partagés » ou « animations d’éléments partagés ».
Imaginez un écran Flutter où nous utilisons différents types d’emplacements. Nous pouvons simplement commencer avec un widget Image et l’envelopper avec le widget Hero. Par conséquent, il représente un emplacement.
import 'package:flutter/material.dart';
import 'west_bengal.dart';
class AllLocations extends StatelessWidget {
const AllLocations({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Wrap(
spacing: 18.0, // gap between adjacent chips
runSpacing: 14.0, // gap between lines
children: [
Container(
margin: const EdgeInsets.all(20),
padding: const EdgeInsets.all(20),
child: const Text(
'Choose Locations',
style: TextStyle(
fontFamily: 'Allison',
fontSize: 60,
fontWeight: FontWeight.bold,
),
),
),
const SizedBox(
height: 10,
),
GestureDetector(
onTap: () => Navigator.push(context,
MaterialPageRoute(builder: (context) => const WestBengal())),
child: Hero(
tag: 'wb',
child: Container(
padding: const EdgeInsets.all(10),
width: 100,
height: 100,
child: Image.network(
'https://cdn.pixabay.com/photo/2021/11/13/23/06/tree-6792528_960_720.jpg'),
),
),
),
],
),
);
}
}
Dans le code ci-dessus, il y a un Hero Widget. De plus, le Hero se distingue par un paramètre spécial « tag ».
Pour comprendre le concept, regardons la capture d’écran.
Maintenant, nous pouvons cliquer sur le widget Image et le héros avec le “tag” volera vers la deuxième page.
Si nous jetons maintenant un œil au code de la deuxième page, nous retrouverons le même « tag » Hero dans Flutter.
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
class WestBengal extends StatelessWidget {
const WestBengal({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('West Bengal'),
),
body: Center(
child: Hero(
tag: 'wb',
child: ListView(
children: [
Container(
padding: const EdgeInsets.all(10),
width: 350,
height: 350,
child: Image.network(
'https://cdn.pixabay.com/photo/2021/11/13/23/06/tree-6792528_960_720.jpg'),
),
Container(
padding: const EdgeInsets.all(5),
child: RichText(
text: TextSpan(
text: 'West Bengal ...',
style: const TextStyle(
fontSize: 30.0,
color: Colors.blue,
),
children: [
TextSpan(
text: ' A land where I was born and fell in love ...'
'with learning Flutter. Why? Because there are '
' so many trees and butterflies around us ...',
style: const TextStyle(
fontSize: 20.0,
color: Colors.red,
),
recognizer: TapGestureRecognizer()
..onTap = () {
Navigator.pop(context);
},
),
TextSpan(
text: ' Read More ...',
style: const TextStyle(
fontSize: 15.0,
color: Colors.green,
),
recognizer: TapGestureRecognizer()
..onTap = () {
Navigator.pop(context);
},
),
],
),
),
),
],
)),
),
);
}
}
J’espère que vous avez l’idée. De même, nous pouvons utiliser plusieurs Hero Widgets. Mais nous devons distinguer chaque Hero Widget avec les différents « tags ».
Pour un extrait de code complet, veuillez visiter le référentiel GitHub respectif.
Comment faire une animation de héros en flutter ?
Le concept clé qui fonctionne en coulisse est contrôlé par le contrôleur de héros.
Certes, nous pouvons faire voler le Hero Widget d’un écran ou d’une page à n’importe quel écran ou page. Cependant, lorsque la navigation a lieu, chaque itinéraire est identifié par le Hero Controller.
En conséquence, le Hero Widget « parent » marque son Hero Widget « enfant » comme candidat pour les animations de héros. Après cela, le Hero Widget qui agit en tant que « enfant » peut à nouveau agir en tant que « parent ».
Cependant, le Hero Widget doit toujours être distingué par le “tag”.
Leave a Reply