Explore Custom Fade-In Slide In Flutter
This article will be Explore Custom Fade-In Slide In Flutter. We see how to execute a demo program. We will tell you the best way how to create custom fade-in slide animation to bring dynamic interactive effects to your UI in your Flutter applications.
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.
Table Of Contents::
Introduction
The below demo video shows how to create a custom fade-in slide in Flutter and how a custom fade-in slide will work in your Flutter applications. We will create a custom fade-in slide widget to bring dynamic interactive effects to our UI. It will be shown on your device.
Demo Module::
Code Implement:
Create a new dart file called main.dart inside the lib folder.
First, we will define an animation direction
enum FadeDirection { ttb, btt, ltr, rtl }Now, we will create a CustomFadeInSlide() StatefulWidget on the same main .dart file. This represents the combined fade and slide animation. It takes parameters such as child, duration, fadeOffset, curve, and direction.
class CustomFadeInSlide extends StatefulWidget {
const CustomFadeInSlide({
super.key,
required this.child,
required this.duration,
this.curve = Curves.bounceOut,
this.fadeOffset = 40,
this.direction = FadeDirection.ttb,
});
final Widget child;
final double duration;
final double fadeOffset;
final Curve curve;
final FadeDirection direction;
@override
State<CustomFadeInSlide> createState() => _CustomFadeInSlideState();
}
class _CustomFadeInSlideState extends State<CustomFadeInSlide>
with TickerProviderStateMixin {
late AnimationController controller;
late Animation<double> opacityAnimation;
late Animation<double> inAnimation;
@override
void initState() {
super.initState();
controller = AnimationController(
duration: Duration(milliseconds: (1000 * widget.duration).toInt()),
vsync: this);
inAnimation = Tween<double>(begin: -widget.fadeOffset, end: 0).animate(
CurvedAnimation(
parent: controller,
curve: widget.curve,
),
)..addListener(() {
setState(() {});
});
opacityAnimation = Tween<double>(begin: 0, end: 1).animate(controller)
..addListener(() {
setState(() {});
});
}
@override
Widget build(BuildContext context) {
final size = MediaQuery.sizeOf(context);
controller.forward();
return Transform.translate(
offset: switch (widget.direction) {
FadeDirection.ltr => Offset(inAnimation.value, 0),
FadeDirection.rtl => Offset(size.width - inAnimation.value, 0),
FadeDirection.ttb => Offset(0, inAnimation.value),
FadeDirection.btt => Offset(0, 0 - inAnimation.value),
},
child: Opacity(
opacity: opacityAnimation.value,
child: widget.child,
),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}CustomFadeInSlideState manages the AnimationController, opacityAnimation, and inAnimation.
Now, we will create an initState() method. In this method, we will add a controller that is equal to the AnimationController(), inAnimation is equal to the Tween<double>,addListener, and opacityAnimation. Then, we will create a dispose() method. In this method, we will add a controller. dispose().
In the build part, we will return a Transform. translate() method. In this method, we will calculate the offset based on the specified direction and its child we will add Opacity widgets are used to apply fade and slide animations.
We will create a MyHomePage() class on the same dart file.
In the body part, we will add a Column widget. In this widget, we will add the three items. We will add two images and text that will wrap into CustomFadeInSlide with different directions and different durations.
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
CustomFadeInSlide(
duration: 2,
direction: FadeDirection.ttb,
child: Image.asset(
"assets/logo.png",
height: 150,
),
),
const SizedBox(
height: 40,
),
const CustomFadeInSlide(
duration: 4,
direction: FadeDirection.ltr,
child: Padding(
padding: EdgeInsets.all(12.0),
child: Text(
'FlutterDevs specializes in creating cost-effective and efficient '
'applications with our perfectly crafted, creative and leading-edge '
'flutter app development solutions for customers all around the globe.',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16,fontWeight: FontWeight.w500),
),
)),
const SizedBox(
height: 30,
),
CustomFadeInSlide(
duration: 6,
direction: FadeDirection.btt,
child: Image.asset(
"assets/powered_by.png",
height: 150,
),
),
],
)When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_custom_fade_in_slide_deno/splash_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.cyanAccent,
title: Text(widget.title),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
CustomFadeInSlide(
duration: 2,
direction: FadeDirection.ttb,
child: Image.asset(
"assets/logo.png",
height: 150,
),
),
const SizedBox(
height: 40,
),
const CustomFadeInSlide(
duration: 4,
direction: FadeDirection.ltr,
child: Padding(
padding: EdgeInsets.all(12.0),
child: Text(
'FlutterDevs specializes in creating cost-effective and efficient '
'applications with our perfectly crafted, creative and leading-edge '
'flutter app development solutions for customers all around the globe.',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16,fontWeight: FontWeight.w500),
),
)),
const SizedBox(
height: 30,
),
CustomFadeInSlide(
duration: 6,
direction: FadeDirection.btt,
child: Image.asset(
"assets/powered_by.png",
height: 150,
),
),
],
),
),
);
}
}
enum FadeDirection { ttb, btt, ltr, rtl }
class CustomFadeInSlide extends StatefulWidget {
const CustomFadeInSlide({
super.key,
required this.child,
required this.duration,
this.curve = Curves.bounceOut,
this.fadeOffset = 40,
this.direction = FadeDirection.ttb,
});
final Widget child;
final double duration;
final double fadeOffset;
final Curve curve;
final FadeDirection direction;
@override
State<CustomFadeInSlide> createState() => _CustomFadeInSlideState();
}
class _CustomFadeInSlideState extends State<CustomFadeInSlide>
with TickerProviderStateMixin {
late AnimationController controller;
late Animation<double> opacityAnimation;
late Animation<double> inAnimation;
@override
void initState() {
super.initState();
controller = AnimationController(
duration: Duration(milliseconds: (1000 * widget.duration).toInt()),
vsync: this);
inAnimation = Tween<double>(begin: -widget.fadeOffset, end: 0).animate(
CurvedAnimation(
parent: controller,
curve: widget.curve,
),
)..addListener(() {
setState(() {});
});
opacityAnimation = Tween<double>(begin: 0, end: 1).animate(controller)
..addListener(() {
setState(() {});
});
}
@override
Widget build(BuildContext context) {
final size = MediaQuery.sizeOf(context);
controller.forward();
return Transform.translate(
offset: switch (widget.direction) {
FadeDirection.ltr => Offset(inAnimation.value, 0),
FadeDirection.rtl => Offset(size.width - inAnimation.value, 0),
FadeDirection.ttb => Offset(0, inAnimation.value),
FadeDirection.btt => Offset(0, 0 - inAnimation.value),
},
child: Opacity(
opacity: opacityAnimation.value,
child: widget.child,
),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}Conclusion:
In the article, I have explained the Custom Fade-In Slide In Flutter; you can modify this code according to your choice. This was a small introduction to the Custom Fade-In Slide In Flutter User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying Custom Fade-In Slide in your Flutter projects. We will show you what the Introduction is. Make a demo program for working on the Custom Fade-In Slide in your Flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I need to correct something? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
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! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
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.
