HeroMode widget and Attributes

Smooth transitions between screens or widgets play a significant role in enhancing the overall user experience in a Flutter app. The HeroMode widget is a powerful tool that facilitates the creation of visually appealing animations during widget transitions. In this blog post, we'll explore the HeroMode widget and its key attributes, accompanied by a comprehensive example to demonstrate its usage.

HeroMode is a Flutter widget that controls how Hero widgets behave during transitions. It provides options for defining the animation style between the source and destination widgets, offering developers flexibility in achieving the desired visual effects.

Attributes of HeroMode:

1. enabled (required):

   • A boolean value indicating whether hero animations are enabled or disabled.

2. flightShuttleBuilder:

   • A callback function that defines the widget used to transition between the source and destination widgets.

Example:

Let's create a simple Flutter app with two screens, each containing a Hero widget. We'll use the HeroMode widget to control the animation behavior during the transition.

// main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hero Transition Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => SecondPage(),
                ),
              );
            },
            child: Hero(
              tag: 'firstHero', // Unique tag for the first hero
              child: Container(
                color: Colors.blue,
                height: 150.0,
                width: double.infinity,
                alignment: Alignment.center,
                child: Text(
                  'Tap to go to Second Page',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(height: 20.0),
          GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => ThirdPage(),
                ),
              );
            },
            child: Hero(
              tag: 'secondHero', // Unique tag for the second hero
              child: Container(
                color: Color.fromARGB(255, 147, 156, 163),
                height: 150.0,
                width: double.infinity,
                alignment: Alignment.center,
                child: Text(
                  'Tap to go to Third Page',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => ThirdPage(),
            ),
          );
        },
        child: Hero(
          tag: 'secondHero', // Use the same tag for the second hero
          child: Container(
            color: Color.fromARGB(255, 147, 156, 163),
            height: 300.0,
            width: double.infinity,
          ),
        ),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Third Page'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => FirstPage(),
            ),
          );
        },
        child: Hero(
          tag: 'firstHero', // Use the same tag for the first hero
          child: Container(
            color: Color.fromARGB(255, 71, 142, 197),
            height: 300.0,
            width: double.infinity,
          ),
        ),
      ),
    );
  }
}