Flutter Radial Hero Animation with Example

Radial Hero Animation is a type of animation in which an image or widget expands from its original position to fill the entire screen. In this blog post, we will explore how to create a Radial Hero Animation in Flutter using the Hero and ClipOval widgets.

Step 1: Creating the Widgets

First, we will create two widgets: a thumbnail widget and a detail widget. The thumbnail widget will display a small version of the image or widget, while the detail widget will display a larger version of the image or widget.

import 'package:flutter/material.dart';
class ThumbnailWidget extends StatelessWidget {
  final String imagePath;
  const ThumbnailWidget({Key key, this.imagePath}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Hero(
      tag: imagePath,
      child: ClipOval(
        child: Image.asset(
          imagePath,
          fit: BoxFit.cover,
          width: 100,
          height: 100,
        ),
      ),
    );
  }
}
class DetailWidget extends StatelessWidget {
  final String imagePath;
  const DetailWidget({Key key, this.imagePath}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () => Navigator.of(context).pop(),
        child: Container(
          color: Colors.black,
          child: Hero(
            tag: imagePath,
            child: ClipOval(
              child: Image.asset(
                imagePath,
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ),
    );
  }
}​

In this code, we have created a ThumbnailWidget and a DetailWidget. The ThumbnailWidget displays a small version of the image, while the DetailWidget displays a larger version of the image. We have used the Hero widget to create the animation.

Step 2: Navigating between Widgets

Next, we will create a GestureDetector widget to navigate between the ThumbnailWidget and the DetailWidget.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (BuildContext context) => DetailWidget(
                imagePath: "assets/image.png",
              ),
            ),
          );
        },
        child: Container(
          child: ThumbnailWidget(
            imagePath: "assets/image.png",
          ),
        ),
      ),
    );
  }
}​

In this code, we have created a HomePage widget that uses the GestureDetector widget to navigate to the DetailWidget when the thumbnail widget is tapped.

we have explored how to create a Radial Hero Animation in Flutter using the Hero and ClipOval widgets. With this animation, you can create engaging user interfaces that will keep your users entertained and engaged.