Tutorial: Super Simple Hero Animation in Flutter

Creating animations when you natively develop an app for Android or iOS is something that is rarely done. Most of the time it is too complicated and the budget restricts adding anything fancy to an app.

Therefore, I was positively surprised when I discovered how simple it is to add basic animation to my apps when developing with Flutter.

In this tutorial I want to show you how to create a very simple app where you can select an item from a list to open in detail view. To make the transitions between list view and detail view more appealing we will add a so called hero animation.

A hero animation basically consists of a piece of content that is brought over from one screen to another. This supports the user’s understanding of the context of the app.

Let’s have a look how our app should look like:

Super Simple Hero Animation in Flutter
After finishing this tutorial our app includes a hero animation like this.

Prerequesite

We start by creating a new Flutter project. This time I name it super_simple_hero_animation. Like in my other tutorials, we start by cleaning up our project.

We go with the most basic configuration of our pubspec.yaml and main.dart file.

pubspec.yaml

name: super_simple_hero_animation description: Super Simple Hero Animation publish_to: 'none' # Remove this line if you wish to publish to pub.dev version: 1.0.0+1 environment: sdk: ">=2.7.0 <3.0.0" dependencies: flutter: sdk: flutter flutter: uses-material-design: true

main.dart

import 'package:flutter/material.dart'; import 'package:super_simple_hero_animation/home_page.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomePage(), ); } }

Hero Animation Part 1: The Master Page

In a new file home_page.dart we create our master page – the page containing a list of elements. Every element consists of an image and a name. Perfect application for the ListTile widget.

home_page.dart

import 'package:flutter/material.dart'; import 'package:super_simple_hero_animation/detail_page.dart'; class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Super Simple Hero Animation")), body: ListView.builder(itemBuilder: (context, index) { return ListTile( leading: CircleAvatar( child: ClipOval( child: Hero( tag: "avatar-$index", child: Image.network("https://picsum.photos/seed/$index/800"), ), ), ), title: Text("Item #$index"), onTap: () => _openDetail(context, index), ); }), ); } _openDetail(context, index) { final route = MaterialPageRoute( builder: (context) => DetailPage(index: index), ); Navigator.push(context, route); } }
Simple Hero Animation Flutter
The master page of the app shows a list with images and text.

Hero Animation Part 2: The Detail Page

The detail_page.dart contains our DetailPage widget. It will only consist of a large SliverAppBar showing an image.

import 'package:flutter/material.dart'; class DetailPage extends StatelessWidget { final int index; const DetailPage({this.index}); @override Widget build(BuildContext context) { return Scaffold( body: CustomScrollView( slivers: <Widget>[ SliverAppBar( expandedHeight: 300, flexibleSpace: FlexibleSpaceBar( title: Text("Item #$index"), background: Hero( tag: "avatar-$index", child: Image.network( "https://picsum.photos/seed/$index/800", fit: BoxFit.cover, ), ), ), ), ], ), ); } }
Simple Hero Animation Detail Flutter
The SliverAppBar contains the image that is animated from the ListTile.

When we now run the app we have a cool little animation when navigating between our master and detail page. And that without having to write any complicated animation code.

Conclusion

Creating simple animations in Flutter is very simple. Including them to your app can make it look smoother and more appealing in no time. Now that you know how to use the Hero widget, there is no excuse for boring looking apps anymore 😉

Let me know how you use hero animations in your app in the comments below.

Leave a Reply

Your email address will not be published. Required fields are marked *