Directory portal:A Guide to The Quick Start to Flutter

Hero is one of the page transitions that Flutter provides.

It is able to share view elements between pages during page transitions.

Hero makes it easy to animate the image.

Let’s see how this works.

1. Jump to add Hero and wrap widgets that need to be shared

  @override
  Widget build(BuildContext context) {
    returnGestureDetector( onTap: () { showPhoto(context); }, child: Hero(key: key (photo.assetName), // tag is the key tag: photo.tag, child: image. asset(photo.assetName, package: photo.assetPackage, fit: BoxFit.cover, ))); }Copy the code

2. The shared elements of the target page are also wrapped in Hero

Scaffold(
  appBar: AppBar(title: Text('Hero PageB'Expand (child: Hero(// tag is the key tag: photo. Tag, child: ClipRect(child: Image.asset( photo.assetName, package: photo.assetPackage, fit: BoxFit.cover, ), ), ), ), );Copy the code

The implementation is simple: use Hero to wrap the shared elements between the two pages.

The key is that the tags of shared elements must be the same.

The rest of the disposal of Flutter has been done for the developers.

Try it yourself.

Directory Portals: A Guide to The Quick Start To Flutter

How can I be found?

Portal:CoorChice homepage

Portal:Lot of CoorChice