20
Dec

Flutter Standard Hero Animations

0

A standard hero animation flies the hero between one route to a new route, landing a page or screen at a different location and with a different size.

Define a route using MaterialPageRoute, CupertinoPageRoute, or build a custom route using PageRouteBuilder.

Change the size of the image at the end of the transition by wrapping the destination’s image in a SizedBox.

Change the location of the image by placing the destination’s image in a layout widget.

In this post you will learnStandard Hero Animations creations:

Using hero animations package as a library:

Adding hero animation Dependency package to Flutter:

$ flutter pub add hero_animation

Installing The hero animation Package into the Flutter:

Use the below code to install hero animation

package  from terminal editor:

$ flutter pub get

 

Importing hero animation Dependency package into the flutter Dart Code:

use the below code to import into the dart code. without importing it if we use it will shows package not found exception.

import 'package:hero_animation/hero_animation.dart';

Below is the Example to create Standard hero animations In Flutter:

main.dart

// Tap on the source route's photo to push a new route,
// containing the same photo at a different location and scale.
// Return to the previous route by tapping the image, or by using the
// device's back-to-the-previous-screen gesture.
// You can slow the transition using the timeDilation property.

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart' show timeDilation;

class PhotoHero extends StatelessWidget {
const PhotoHero({
super.key,
required this.photo,
this.onTap,
required this.width,
});

final String photo;
final VoidCallback? onTap;
final double width;

@override
Widget build(BuildContext context) {
return SizedBox(
width: width,
child: Hero(
tag: photo,
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: onTap,
child: Image.asset(
photo,
fit: BoxFit.contain,
),
),
),
),
);
}
}

class HeroAnimation extends StatelessWidget {
const HeroAnimation({super.key});

@override
Widget build(BuildContext context) {
timeDilation = 10.0; // 1.0 means normal animation speed.

return Scaffold(
appBar: AppBar(
title: const Text('Basic Hero Animation'),
),
body: Center(
child: PhotoHero(
photo: 'images/flippers-alpha.png',
width: 300,
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flippers Page'),
),
body: Container(
// Set background to blue to emphasize that it's a new route.
color: Colors.lightBlueAccent,
padding: const EdgeInsets.all(16),
alignment: Alignment.topLeft,
child: PhotoHero(
photo: 'images/flippers-alpha.png',
width: 100,
onTap: () {
Navigator.of(context).pop();
},
),
),
);
},
));
},
),
),
);
}
}

void main() {
runApp(
const MaterialApp(
home: HeroAnimation(),
),
);
}

Congratulations You Have Learned Using standard hero animation In Flutter For Both Android & IOS Devies with Exampe.

Leave a Reply

Categories