How to Animate a Widget Across Screens in Flutter?

• Flutter

Before learning how to animate widgets, we need to understand the basics of animations.

What are animations?

Animations are an essential and integrated part of any Flutter mobile app development company like Flutter Agency, which adds to the natural and smooth functioning of the UI. The interactive features and swift transitions make it user-friendly and enhance the user experience Flutter supports various animation features for its consumers.

Therefore, it is crucial to understand the fundamentals of widget animations to deliver a well-developed user experience. Flutter SDK offers some built-in animations for widgets.

The built-in animations offered by Flutter are Fade transition, Size transition, and slide transition. These widgets work by setting a start and end point. If your image doesn’t match the existing devices, you can use the custom option.

1. Fade transition

By adjusting the opacity of a widget, you may blur it in and out with Fade Transition. You must set opacity values in the Animation Controller at the initial stage. One must provide an opacity border with animation and a child widget at the animation code.

2. Size transition

The size transition allows one to change the widget’s height, width, and alignment. It animates its child and clips through alignment.

3. Slide transition

The slide transition allows you to change the normal position of the widget. It moves from right to left or left to right if one provides text direction.

Types of custom animation in Flutter

There are generally two ways to animate the widgets in Flutter, either tweens-based or physics-based.

1. Tweens-based animation

Tween animation is the short name given to “in-between”, and it generates images between two given keyframes. Keyframes are defined as the images provided at the initial and final point of a transition—for instance, the transition of an animated animal jumping from one tree to another.

The tween animation gives in-between values of two alignments, positions, or colors. It automatically intercepts the transition going through a chain of intermediate values and adds the precision of defining the time and speed features.

2. Physics-based animation

Physics-based animation provides a realistic feel to the spirits. The interactive features of the application connect you to natural world feelings and concepts.

You can animate the objects by adding a spring, fall, glide, or swing defining the concepts of gravity. The animation works on the input of movement entered by the user. The time, speed, and distance are calculated by abiding by the rules of physics.

How to animate a widget across screens in Flutter?

The animation, which shows a visual connection when the user changes the elements from one screen to another, can be performed by animating in Flutter. This transition is done by using a hero type of animation.

1. Hero animations

Hero navigations are the easiest to code in Flutter as it does not require much setup. The animation that shows a smooth transition from one screen to another is hero animation.

For example- when you select an item through a series of thumbnails presented in a sale, it takes you to a new screen with a buy option, and you can also fly back to the previous screen. This type of animation code is also known as a shared element transition.

The hero animation provides two types of animation codes

1. Standard hero animation
2. Radial hero animation

1. Standard hero animation: In standard animation code, the widget travels from one space to another, ending with a different shape and size than the original.

2. Radial hero animation: Radial animation code has a shape change from circular to rectangular with a transition from one screen to another.

Structure of Hero code animation

Two hero widgets are required to implement hero animations. The first widget describes the source route, and the second one represents the destination route.

The Hero widget animation code has the following structure

The first step is defining a Hero widget called the source Hero. This hero describes the graphical presentation of an image, an identifying tag.

Example:

Hero(
tag: 'imageHero',
child: Image.network(
    'https://picsum.photos/250?image=9',
  ),
)

The second step is to define the ending of the hero widget, also referred to as the destination hero. The hero in this code must contain the exact graphical representation of the source hero widget.

The widgets (source and destination) must be created using the same tag. The heroes must also contain similar widget trees to produce better results.

Example

Hero(
tag: 'imageHero',
child: Image.network(
    'https://picsum.photos/250?image=9',
  ),
)

Next, you must develop a transition route containing the destination hero widget. This route consists of the destination widget tree at the end of the destination code.

The final step is to trigger the destination source on the Navigators stack. The push and pop button of the navigator operations alarm the hero widget animations of each pair have identical tags in the initial (source) and final (destination) route codes.

The flutter ADK calculates the size, shape, and position from the starting point to the endpoint and performs the function with smooth transitions.

Example

	
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/first',
      routes: {
        '/first': (context) => const FirstScreen(),
        '/second': (context) => const SecondScreen(),
      },
    );
  }
}
class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Screen'),
      ),
      body: Center(
        child: Column(
          children: [
            const Hero(
              tag: "HeroOne",
              child: Icon(
                Icons.image,
                size: 50.0,
              ),
            ),
            ElevatedButton(
              child: const Text('Go to second screen'),
              onPressed: () {
                Navigator.push(context, CustomPageRoute(const SecondScreen()));
              },
            ),
          ],
        ),
      ),
    );
  }
}
class SecondScreen extends StatelessWidget {
  const SecondScreen({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Second Screen"),
      ),
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          const Hero(
            tag: "HeroOne",
            child: Icon(
              Icons.home_filled,
              size: 100.0,
            ),
          ),
          ElevatedButton(
            child: const Text('Back to first screen!'),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ],
      )),
    );
  }
}
class CustomPageRoute extends PageRoute {
  final Widget child;
  CustomPageRoute(this.child);
  @override
  Color get barrierColor => Colors.black;
  @override
  String get barrierLabel => '';
  @override
  bool get maintainState => true;
  @override
  Duration get transitionDuration => const Duration(seconds: 2);
  @override
  Widget buildPage(BuildContext context, Animation animation,
      Animation secondaryAnimation) {
    return FadeTransition(
      opacity: animation,
      child: child,
    );
  }
}

Output

Conclusion

In this article, we learned to animate a widget across screens in Flutter. We have also learned what the types of custom animations in Flutter are. If you need custom support in mobile application development, reach our Flutter developers for business application development and complete apps solutions. Keep visiting Flutter Agency for more such solutions.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.