Flutter Hero Animation :

Flutter Hero animation is a powerful tool for creating smooth and visually appealing transitions between screens in your app. With Hero animations, you can seamlessly move widgets from one screen to another, giving your app a polished and professional feel.

Whether you’re building a simple app or a complex user interface, mastering Flutter’s Hero animation can take your app to the next level. In this guide, we’ll explore how Hero animations work, how to implement them in your Flutter app, and some best practices for creating stunning transitions that will delight your users.

Video Tutorial :

Discover the intricacies of Flutter Hero animation through this detailed video tutorial, perfect for mastering seamless transitions in your app development journey.

import 'package:flutter/material.dart';

This imports the Flutter material design package, which provides essential widgets and classes needed to build a material design app in Flutter.

void main(){
  runApp(MyApp());
}

The main function is the entry point of the Flutter application. It calls the runApp function with MyApp as an argument, which starts the app.

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Home());
  }
}

MyApp is a stateless widget that represents the root of the application. It overrides the build method to return a MaterialApp widget, which sets the home of the app to the Home widget.

Home Class

A GestureDetector is used to detect taps. On tapping, it navigates to the DetailsScreen using a PageRouteBuilder. The Hero widget is used to create an animation transition.

The tag property must be the same in both the source and destination widgets. The Card widget displays a card with a Text widget inside, prompting the user to “Tap to Open”.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Expanded Cardview"),),
      body: Center(
        child: Container(
          child: GestureDetector(
            onTap: (){
              Navigator.of(context).push(PageRouteBuilder(pageBuilder: (_,__,___)=> DetailsScreen()));
            },
            child: Hero(
              tag: 'cardhero',
              child: Card(
                color: Colors.black45,
                margin: EdgeInsets.all(16.0),
                child: SizedBox(
                  height: 120,
                  width: 120,
                  child: Center(child: (Text("Tap to Open"))),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

DetailsScreen Class

A GestureDetector detects taps, and on tapping, it navigates back to the previous screen using Navigator.of(context).pop().

The Hero widget is used again with the same tag to animate the transition from the Home screen. The Container has the same properties as the Card in the Home screen to match the animation effect.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: (){
          Navigator.of(context).pop();
        },
        child: Hero(
          tag: 'cardhero',
          child: Container(
            color: Colors.black45,
            child: Center(
              child: Column(
                children: [],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Flutter Hero Animation FullCode :

Providing the full code for hero animation implementation.

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Home());
  }
}


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text("Expanded Cardview"),),
        body: Center(
          child: Container(
            child: GestureDetector(
             onTap: (){
               Navigator.of(context).push(PageRouteBuilder(pageBuilder: (_,__,___)=> DetailsScreen()));
             },
              child: Hero(
                tag: 'cardhero',
                child: Card(
                  color: Colors.black45,
                  margin: EdgeInsets.all(16.0),
                  child: SizedBox(
                      height: 120,
                      width: 120,
                      child: Center(child: (Text("Tap to Open")))),
                ),
              ),
            ),
          ),
        ),
    );
  }
}


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: (){
          Navigator.of(context).pop();
        },
        child: Hero(
          tag: 'cardhero',
          child: Container(
              color: Colors.black45,
              child: Center(
                child: Column(
                  children: [],
                ),
              )),
        ),
      ),
    );
  }
}

If you have any questions, feel free to drop them in the comments below. If you enjoyed this tutorial, show us some love by liking and sharing for more exciting updates