Animating a Widget Across Screens In Flutter
Before figuring out how to animate widgets, we want to grasp the fundamentals of animations.
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
What are animations?
Animations are a fundamental and coordinated piece of any Flutter mobile application development organization like Aeologic Technologies, which adds to the regular and smooth working of the UI. The intelligent highlights and quick changes make it easy to understand and upgrade the client experience Flutter upholds different animation features for its consumers.
In this manner, it is significant to comprehend the basics of widget animations to convey an advanced client experience. Flutter SDK offers a few underlying animations for widgets.
The underlying animations presented by Flutter are Fade transition, Size transition, and slide transition. These widgets work by setting a beginning and end point. On the off chance that your picture doesn’t match the current devices, you can utilize the custom option.
- Fade Transition
By changing the haziness of a widget, you might blur it in and out with Fade Transition. You should set opacity values in the Animation Controller at the underlying stage. One should give an opacity border with animation and a child widget in the animation code.
2. Size Transition
The size transition permits one to change the widget’s height, width, and alignment. It enlivens its child and clips through alignment.
3. Slide Transition
The slide transition permits you to change the ordinary place of the widget. It moves from right to left or left to right assuming one gives text direction.
Kinds of custom animation in Flutter:
There are by and large two methods for animating the widgets in Flutter, either tweens-based or physics-based.
- > Tweens-based animation:
Tween animation is the short name given “in-between”, and it produces pictures between two given keyframes. Keyframes are characterized as the pictures given at the initial and last mark of an animation — for example, the change of an animated creature hopping starting with one tree and then onto the next.
The tween animation gives in-between upsides of two alignments, positions, or tones. It naturally captures the progress going through a chain of middle-of-the-road values and adds the accuracy of characterizing the time and speed features.
- > Physics-based animation:
Physics-based animation gives a practical vibe to the spirits. The intelligent highlights of the application connect you to regular-world concepts and ideas.
You can animate the items by adding a spring, fall, glide, or swing characterizing the ideas of gravity. The animation deals with the contribution of movement entered by the client. The time, speed, and distance are determined by complying with the standard rules of physics.
How to animate a widget across screens in Flutter?
The animation, which shows a visual association when the client changes the components from one screen then onto the next, can be performed by animation in Flutter. This change is finished by utilizing a hero sort of movement.
Table Of Contents::
Hero animations:
Hero routes are the least demanding to code in Flutter as it doesn’t need a lot of arrangement. The animation that shows smooth progress starting from one screen and then onto the next is Hero animation.
For instance, when you select a thing through a progression of thumbnails introduced in a sale, it takes you to another screen with a purchase option, and you can likewise fly back to the past screen. This sort of animation code is otherwise called a shared element transition.
The hero animation provides two types of animation codes:
- Standard hero animation
- Radial hero animation
- > Standard hero animation: In standard animation code, the widget makes a trip starting with one space and then onto the next, finishing with a different shape and size than the first.
- > Radial hero animation: Radial animation code has a shape change from circular to rectangular with progress starting with one screen and then onto the next.
Structure of Hero code animation: Two hero widgets are expected to carry out hero animation. The principal widget depicts the source course, and the subsequent one addresses the destination course.
Demo Module :
Constructor:
To utilize hero widget, you need to call the constructor underneath:
const Hero({
Key? key,
required this.tag,
this.createRectTween,
this.flightShuttleBuilder,
this.placeholderBuilder,
this.transitionOnUserGestures = false,
required this.child,
})In Above Constructor all fields marked with @required must not be empty.
Properties:
There are some properties of Hero Widget:
- child Widget: The widget subtree that will “fly” from one route to another during a Navigator push or pop transition.
- createRectTween CreateRectTween: Defines how the destination hero’s bounds change as it flies from the starting route to the destination route.
- flightShuttleBuilder HeroFlightShuttleBuilder: Optional override to supply a widget that’s shown during the hero’s flight.
- placeholderBuilder HeroPlaceholderBuilder: Placeholder widget left in place as the Hero’s child once the flight takes off.
- tag Object: The identifier for this particular hero. If the tag of this hero matches the tag of a hero on a PageRoute that we’re navigating to or from, then a hero animation will be triggered.
- transitionOnUserGestures bool: Whether to perform the hero transition if the PageRoute transition was triggered by a user gesture, such as a back swipe on iOS.
How to implement code in dart file:
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
We will create a stateless widget “FirstScreen” in which we will implement the Hero widget.
class FirstScreen extends StatelessWidget {
const FirstScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Text('First Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Hero(
tag: "HeroOne",
child: Image.asset('assets/phone1.jpeg')
),
ElevatedButton(
child: const Text('Go to second screen'),
onPressed: () {
Navigator.push(context, CustomPageRoute(const SecondScreen()));
},
),
],
),
),
);
}
}then we do the same for the second screen, and implement the Hero widget on that screen as well,
class SecondScreen extends StatelessWidget {
const SecondScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Text("Second Screen"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Hero(
tag: "HeroOne",
child: Image.asset('assets/phone2.jpeg')
),
ElevatedButton(
child: const Text('Back to first screen!'),
onPressed: () {
Navigator.pop(context);
},
),
],
)),
);
}
}When we run the application, we ought to get the screen’s output like the underneath screen capture.
and lastly, for the page route animation, we will implement this code,
class CustomPageRoute<t> extends PageRoute<t> {
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<double> animation,
Animation secondaryAnimation,
) {
return FadeTransition(
opacity: animation,
child: child,
);
}
}Code File:
import 'package:example_hero_widget_app/splash_screen.dart';
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(
debugShowCheckedModeBanner: false,
routes: {
'/first': (context) => const FirstScreen(),
'/second': (context) => const SecondScreen(),
},
home: const Scaffold(
body: Splash(),
),
);
}
}
class FirstScreen extends StatelessWidget {
const FirstScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Text('First Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Hero(
tag: "HeroOne",
child: Image.asset('assets/phone1.jpeg')
),
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(
automaticallyImplyLeading: false,
title: const Text("Second Screen"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Hero(
tag: "HeroOne",
child: Image.asset('assets/phone2.jpeg')
),
ElevatedButton(
child: const Text('Back to first screen!'),
onPressed: () {
Navigator.pop(context);
},
),
],
)),
);
}
}
class CustomPageRoute<t> extends PageRoute<t> {
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<double> animation,
Animation secondaryAnimation,
) {
return FadeTransition(
opacity: animation,
child: child,
);
}
}
Conclusion:
In the article, I have explained the essential construction of the Hero widget in a flutter; you can alter this code as per your choice. This was a little introduction to the Hero widget on User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Hero widget in your flutter projects. We showed you what the Hero widget is, its constructor, and its properties of the Hero widget. We made a demo program for the working Hero widget. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
GitHub Link:
find the source code of the hero_widget:
GitHub – flutter-devs/example_hero_widget_app
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…github.com.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
