Hero widget and Attributes

The Hero widget in Flutter is used to create hero animations, which animate the transition of a widget between different screens in a visually appealing way. It's commonly used to create smooth transitions for images, text, or other widgets when navigating between routes.

Attributes:

1. tag (Object):

   • A unique tag to identify the hero widget across screens. The same tag should be used for the corresponding hero widget in both the source and destination screens.

2. child (Widget):

   • The widget to be animated between screens. This is typically an image, text, or container widget.

3. flightShuttleBuilder (Widget Function(BuildContext, Animation<double>, HeroFlightDirection, BuildContext, BuildContext)):

   • An optional builder function that creates a widget to be animated between screens. This allows customization of the appearance and behavior of the animated widget during the transition.

4. placeholderBuilder (Widget Function(BuildContext, Size, Widget)):

   • An optional builder function that creates a placeholder widget to be displayed while the hero animation is in progress. This widget is displayed on the source screen until the destination screen is fully loaded.

Example:

import 'package:flutter/material.dart';

class Screen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen 1'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => Screen2()),
            );
          },
          child: Hero(
            tag: 'imageTag',
            child: Image.network('https://via.placeholder.com/150'),
          ),
        ),
      ),
    );
  }
}

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

void main() {
  runApp(MaterialApp(
    home: Screen1(),
  ));
}

Explanation:

• In this example, two screens are created: Screen1 and Screen2.

• Screen1 contains an image wrapped with a Hero widget. The tag attribute is set to 'imageTag' to identify the hero animation across screens.

• When the image in Screen1 is tapped, it navigates to Screen2 where the same image is displayed with a larger size.

• The Hero widget in Screen2 also has the same tag 'imageTag', allowing Flutter to animate the transition between the two screens smoothly.

• During the transition, Flutter automatically scales and positions the image to create a visually appealing animation effect.

• This example demonstrates how to use the Hero widget to create seamless transitions for widgets between different screens in a Flutter app.