Explore AnimatedDefaultTextStyle In Flutter
Adding an Animation to a Flutter Mobile Application is a significant piece of an App Development Process. Consider the possibility that we need to enliven the text in a Flutter Mobile Application.
Animations expect a colossal part in updating your application’s general client experience from the visual examination, movement, and up to the custom animations, you can truly envision!. Like a few distinct things facilitated into an application, animations should be useful instead of essentially an ordinary elaborate organization.
In this post, we will Explore AnimatedDefaultTextStyle In Flutter. We will also implement a demo program of animated default text style, and show text animations as well as images also in your flutter applications.
AnimatedDefaultTextStyle class – widgets library – Dart API
Animated version of DefaultTextStyle which automatically transitions the default text style (the text style to apply to…api. flutter.dev
Table Of Contents::
Introduction:
Quickening text in Flutter is utilized. It is an Animated Adaptation of the DefaultTextStyle widget. AnimatedDefaultTextStyle widget automatically transitions the default text style over a given duration at whatever point the given style changes.
Demo Module ::
The above demo video shows how to implement an AnimatedDefaultTextStyle in flutter and shows how AnimatedDefaultTextStyle will work in your flutter applications. We will show a user when clicking on the button and then, show a text and image size will be animated and the size was increased/decrease. It will be shown on your device.
Construction:
To utilize AnimatedDefaultTextStyle, you need to call the constructor underneath:
const AnimatedDefaultTextStyle({
Key? key,
required this.child,
required this.style,
this.textAlign,
this.softWrap = true,
this.overflow = TextOverflow.clip,
this.maxLines,
this.textWidthBasis = TextWidthBasis.parent,
this.textHeightBehavior,
Curve curve = Curves.linear,
required Duration duration,
VoidCallback? onEnd,
})
All fields marked with @required must not be empty in the above Constructor.
Properties:
There are some parameters of AnimatedDefaultTextStyle are:
- > child — This property is used to the widget can only have one child. To layout multiple children, let this widget’s child be a widget such as Row, Column, or Stack, which have a children property, and then provide the children with that widget.
- > curve — This property is used to the curve to apply when animating the parameters of this container.
- > style — This property is used for the target text style. The text style must not be null. When this property is changed, the style will be animated over [duration] time
- > duration — This property is used for the duration over which to animate the parameters of this container. It represents a difference from one point in time to another.
- > onEnd() — This property is used to call every time an animation completes. This can be useful to trigger additional actions e.g. another animation at the end of the current animation.
- > overflow — This property is used to how visual overflow should be handled. This property takes effect immediately when changed, it is not animated.
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.
First, we will create some variables like a bool _first is equal to true, double _fontSize is equal to 40, Color _color is equal to cyan color, and double _height is equal to 100.
bool _first = true;
double _fontSize = 40;
Color _color = Colors.cyan;
double _height = 100;
In the body, we will add a SizeBox widget with height. Inside the widget, we will add AnimatedDefaultTextStyle() widget. In this widget, we will add curve was bounceOut, add duration was milliseconds. Also, we will add style property. In this property, we will add the fontSize variable and color variable. In the child, we will add the Column widget. In this widget, we will add images and text “Flutter Dev”.
SizedBox(
height: 210,
child: AnimatedDefaultTextStyle(
curve: Curves.bounceOut,
duration: const Duration(milliseconds: 350),
style: TextStyle(
fontSize: _fontSize,
color: _color,
fontWeight: FontWeight.bold,
),
child: Column(
children: [
Image.asset(
'assets/logo.png',
height: _height,
width: 280,
),
const SizedBox(
height: 10,
),
const Text("Flutter Dev's"),
],
),
),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now, we will create an ElevatedButton(). In this button, we will add the onPressed method. In this method, we will add setState() function. In this function, we will add the _fontSize variable is equal to the _first variable then size is 60 else 40, add the _color variable is equal to the _first variable then color is blue else brown. In the child, we will add the text “Click Here!!”.
SizedBox(
height: 50,
width: 150,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.cyan,
textStyle: const TextStyle(
fontSize: 18, fontWeight: FontWeight.bold)),
onPressed: () {
setState(() {
_fontSize = _first ? 60 : 40;
_color = _first ? Colors.blue : Colors.brown;
_first = !_first;
_height = _first ? 100 : 130;
});
},
child: const Text(
"Click Here!!",
),
),
)
When the user presses the button then, the text will be animated, and change the size and color also, and the image size also changes. It will be shown on your screen devices.
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_animated_default_text_style/splash_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const Splash(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _first = true;
double _fontSize = 40;
Color _color = Colors.cyan;
double _height = 100;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter AnimatedDefaultTextStyle Demo"),
centerTitle: true,
automaticallyImplyLeading: false,
backgroundColor: Colors.cyan,
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 210,
child: AnimatedDefaultTextStyle(
curve: Curves.bounceOut,
duration: const Duration(milliseconds: 350),
style: TextStyle(
fontSize: _fontSize,
color: _color,
fontWeight: FontWeight.bold,
),
child: Column(
children: [
Image.asset(
'assets/logo.png',
height: _height,
width: 280,
),
const SizedBox(
height: 10,
),
const Text("Flutter Dev's"),
],
),
),
),
const SizedBox(
height: 20,
),
SizedBox(
height: 50,
width: 150,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.cyan,
textStyle: const TextStyle(
fontSize: 18, fontWeight: FontWeight.bold)),
onPressed: () {
setState(() {
_fontSize = _first ? 60 : 40;
_color = _first ? Colors.blue : Colors.brown;
_first = !_first;
_height = _first ? 100 : 130;
});
},
child: const Text(
"Click Here!!",
),
),
)
],
),
),
);
}
}
Conclusion:
In the article, I have explained the AnimatedDefaultTextStyle basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to AnimatedDefaultTextStyle 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 AnimatedDefaultTextStyle in your flutter projects. We will show you what the Introduction is?. Some AnimatedDefaultTextStyle properties, make a demo program for working AnimatedDefaultTextStyle. It shows text will be animated, and change the size and color also, and the image size also changes in your flutter applications. 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.
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.
