Flutter: Hero Animations

A useful skill in Flutter is mastering Hero Animations, which allow you to create smooth and engaging transitions between screens by animating a widget (such as an image or text) across route changes.

Example: Hero Animation

This code demonstrates a simple Hero animation where an image transitions smoothly between two screens:

1. Main Screen with a small image:

2. Detail Screen where the image appears larger.

Step 1: Create Main Screen

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: MainScreen(),

    );

  }

}

class MainScreen extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text("Main Screen")),

      body: Center(

        child: GestureDetector(

          onTap: () {

            Navigator.push(

              context,

              MaterialPageRoute(builder: (_) => DetailScreen()),

            );

          },

          child: Hero(

            tag: 'imageHero',

            child: Image.network(

              'https://via.placeholder.com/150',

              width: 150,

              height: 150,

            ),

          ),

        ),

      ),

    );

  }

}

Step 2: Create Detail Screen

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Detail Screen")),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.pop(context);
          },
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              'https://via.placeholder.com/150',
              width: 300,
              height: 300,
            ),
          ),
        ),
      ),
    );
  }
}

How it Works:

• Hero Widget: Wrap the widget you want to animate with a Hero widget and assign it a unique tag.

• Smooth Transition: When navigating between screens, Flutter automatically animates the Hero widget between the two routes.

This is a great way to improve the UX of your app by providing visually appealing transitions with minimal effort.