Stacking a picture from the network might require a couple of moments to finish, contingent upon the association speed. While the picture is being fetched, it’s entirely expected to show a placeholder. There are a few strategies for showing a placeholder. For instance, you can show a colored box. In any case, it would be more pleasant if the placeholder can be like the real picture. For that reason, you can utilize BlurHash.

In this blog, we will be Exploring BlurHash Image Placeholder In Flutter. We will see how to implement a demo program of the blur hash and how to use BlurHash as an image placeholder using the flutter_blurhash package in your flutter applications.

flutter_blurhash | Flutter Package
Compact representation of a placeholder for an image. You can use https://blurha.sh/ for testing or use any official…pub.dev

Table Of Contents::

Introduction

Constructor

Parameters

Implementation

Code Implement

Code File

Conclusion

Introduction:

BlurHash is a conservative portrayal of a placeholder for a picture. It works by producing a hash string from a picture. The produced hash string will be utilized to deliver the placeholder. This article tells the best way to disentangle the BlurHash string to be delivered as a picture placeholder in a Flutter application.

Demo Module :

This demo video shows how to use a blurhash in a flutter. It shows how the blurhash will work using the flutter_blurhash package in your flutter applications. It shows a compact representation of a placeholder for an image. It will be shown on your device.

Constructor:

There are constructor of BlurHash are:

const BlurHash({
  required this.hash,
  Key? key,
  this.color = Colors.blueGrey,
  this.imageFit = BoxFit.fill,
  this.decodingWidth = _DEFAULT_SIZE,
  this.decodingHeight = _DEFAULT_SIZE,
  this.image,
  this.onDecoded,
  this.onReady,
  this.onStarted,
  this.duration = const Duration(milliseconds: 1000),
  this.curve = Curves.easeOut,
})

The constructor expects you to pass a boundary hash which is the hash string figured utilizing the BlurHash algorithm. On the off chance that you don’t as of now have the hash string, you can utilize their authority site blurha. sh to create the hash string from the picture that you need to utilize.

Parameters:

There are some parameters of BlurHash are:

• > hash: This parameter is required. The hash to decode.
• > onDecoded: This parameter is used to callback when the hash is decoded.
• > image: This parameter is used to remote resources to download.
• > imageFit: This parameter is used how to fit decoded & downloaded images.
• > color: This parameter is used to displayed background color before decoding.
• > duration: This parameter is used for animation duration. Defaults to const Duration(milliseconds: 1000).
• > curve: This parameter is used to animation curve. Defaults to Curves.easeOut.
• > onStarted: This parameter is used to callback to be called when the download starts.
• > onReady: This parameter is used to callback when the image is downloaded.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

flutter_blurhash:

Step 2: Import

import 'package:flutter_blurhash/flutter_blurhash.dart';

Step 3: Run flutter packages get in the root directory of your app.

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.

The following is a model which just passes the hash argument. Since the Image argument isn’t passed, it will show the placeholder until the end of time.

BlurHash(
  hash: 'LHA-Vc_4s9ad4oMwt8t7RhXTNGRj',
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

In the body, we will add BlurHash() method. In this method, we will add imagefit implies you can set how to fit the image to the accessible space by passing an BoxFit enum as the imageFit the argument to the constructor. If you don’t pass the argument, the worth defaults to BoxFit.fill. The use of imageFit contention is like the fit property of FittedBox. Presently, we will add duration implies after the picture has been effectively downloaded, the picture will be enlivened for a given term before totally shown. The duration can be set by passing Duration esteem as the duration contention. The default value if you don’t pass the argument is 1 second.

BlurHash(
  imageFit: BoxFit.fitWidth,
  duration: const Duration(seconds: 4),
  curve: Curves.bounceInOut,
  hash: 'LHA-Vc_4s9ad4oMwt8t7RhXTNGRj',
  image: 'https://images.unsplash.com/photo-1486072889922-9aea1fc0a34d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bW91dGFpbnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
),

Now, we will set the curve means the animation curve can be set by passing curve argument. The default value is Curves.easeOut. Finally, we will add image means where the image argument is passed with a remote URL of an image as the value. When we run the application, we ought to get the screen’s output like the underneath screen capture.

Presently, we will set the curve implies the animation curve can be set by passing curve argument. The default esteem is Curves.easeOut. At long last, we will add an image implies where the image argument is passed with a distant URL of a picture as the value. 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_blur_hash_demo/splash_screen.dart';
import 'package:flutter_blurhash/flutter_blurhash.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Splash(),
    );
  }
}

class BlurHashDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) =>
         Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.teal,
            automaticallyImplyLeading: false,
              title: Text("Flutter BlurHash Demo")
          ),
          body: Center(
            child: BlurHash(
              imageFit: BoxFit.fitWidth,
              duration: const Duration(seconds: 4),
              curve: Curves.bounceInOut,
              hash: 'LHA-Vc_4s9ad4oMwt8t7RhXTNGRj',
              image: 'https://images.unsplash.com/photo-1486072889922-9aea1fc0a34d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bW91dGFpbnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
            ),
          ),
      );
}

Conclusion:

In the article, I have explained the basic structure of the BlurHash Image Placeholder in a flutter; you can modify this code according to your choice. This was a small introduction to BlurHash Image Placeholder 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 BlurHash Image Placeholder in your flutter projects. We will show you what the Introduction is?, the constructor, some parameters using in BlurHash, and make a demo program for working BlurHash. That’s how to decode a BlurHash-encoded value to be displayed as an image placeholder. It can be done easily using the flutter_blurhash package 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.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

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.

Related: Octo Image In Flutter

Related: Image Compress & Crop In Flutter

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.

Animations expect a huge part in updating your application’s overall client experience from the visual analysis, motion, and up to the custom animations, you can really imagine!. Like some different things coordinated into an application, animations ought to be helpful rather than basically a normal elaborate format.

Animations are direct to do in Flutter, and a lot of eccentrics can be refined with essentially less effort than native Android.

In this post, we will be Exploring Text Animations In Flutter. We will also implement a demo program of text animations, and show a collection of cool and beautiful text animations using the animated_text_kit package in your flutter applications.

animated_text_kit | Flutter Package
A flutter package that contains a collection of some cool and awesome text animations. Recommended package for text…pub.dev

Table Of Contents ::

Introduction

Properties

Implementation

Code Implement

Code File

Conclusion

Introduction:

A flutter widget package that contains an assortment of some cool and great content animations. We will make extraordinary and excellent content animations utilizing the animated_text_kit package.

To get a more understanding through the help of video , Please watch:

Properties:

There are some of the properties of AnimatedTextKit are:

• > animatedTexts: This property is used to list [AnimatedText] to display subsequently in the animation.
• > isRepeatingAnimation: This property is used to set if the animation should not repeat by changing its value to false. By default, it is set to true.
• > totalRepeatCount: This property is used to sets the number of times animation should repeat. By default, it is set to 3.
• > repeatForever: This property is used to sets if the animation should repeat forever. [isRepeatingAnimation] also needs to be set to true if you want to repeat forever.
• > onFinished: This property is used to adds the onFinished [VoidCallback] to the animated widget. This method will run only if [isRepeatingAnimation] is set to false.
• > onTap: This property is used to adds the onTap [VoidCallback] to the animated widget.
• > stopPauseOnTap: This property is used to on pause, should a tap remove the remaining pause time?. By default, it is set to false.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

animated_text_kit: 

Step 2: Import

import 'package:animated_text_kit/animated_text_kit.dart';

Step 3: Run flutter packages get in the root directory of your app.

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called home_page_screen.dart inside the lib folder.

We will create nine different buttons on the home page screen, and when the user taps on the button, the animation will work. There are different animations on all buttons. We will deeply discuss this below. When we run the application, we ought to get the screen’s output like the underneath screen capture.

> Rotate Animation Text:

In the body, we will add a column widget. In this widget, add a Container with height and width. Its child property, add a _rotate() widget.

Center(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        decoration: BoxDecoration(color: Colors.red),
        height: 300.0,
        width: 350.0,
        child: Center(
          child: _rotate(),
        ),
      ),
    ],
  ),
)

In the _rotate() widget. We will return the Row widget. Inside, add text and DefaultTextStyle(). It’s child property, we will add AnimatedTextKit() widget. Inside, we will add repeatForever is true, isRepeatingAnimation was also true, and add animatedTexts. In animatedTexts, we will add three RotateAnimatedText(). Users can also add the duration, rotation.

Widget _rotate(){
  return Row(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      const SizedBox(width: 10.0, height: 100.0),
      const Text(
        'Flutter',
        style: TextStyle(fontSize: 40.0),
      ),
      const SizedBox(width: 15.0, height: 100.0),
      DefaultTextStyle(
        style: const TextStyle(
          fontSize: 35.0,
        ),
        child: AnimatedTextKit(
            repeatForever: true,
            isRepeatingAnimation: true,
            animatedTexts: [
          RotateAnimatedText('AWESOME'),
          RotateAnimatedText('Text'),
          RotateAnimatedText('Animation'),
        ]),
      ),
    ],
  );
}

When we run the application, we ought to get the screen’s output like the underneath screen video.

> Typer Animation Text:

In the body, we will add the same method as the above. But changes in child property, add a _typer widget.

Widget _typer(){
  return SizedBox(
    width: 250.0,
    child: DefaultTextStyle(
      style: const TextStyle(
        fontSize: 30.0,
        fontFamily: 'popin',
      ),
      child: AnimatedTextKit(
        isRepeatingAnimation: true,
          animatedTexts: [
            TyperAnimatedText('When you talk, you are only repeating'
                ,speed: Duration(milliseconds: 100)),
            TyperAnimatedText('something you know.But if you listen,'
                ,speed: Duration(milliseconds: 100)),
            TyperAnimatedText(' you may learn something new.'
                ,speed: Duration(milliseconds: 100)),
            TyperAnimatedText('– Dalai Lama'
                ,speed: Duration(milliseconds: 100)),
          ]
    ),
  ),
  );
}

In this widget, we will return SizedBox(). Inside, we will add DefaultTextStyle() and add AnimatedTextKit() widget. In this widget, we will add animatedTexts. Inside, we will add four TyperAnimatedText() with speed duration. When we run the application, we ought to get the screen’s output like the underneath screen video.

> Fade Animation Text:

In the body, we will add the same method as the above. But changes in child property, add a _fade widget.

Widget _fade(){
  return SizedBox(
    child: DefaultTextStyle(
      style: const TextStyle(
        fontSize: 32.0,
        fontWeight: FontWeight.bold,
      ),
      child: Center(
        child: AnimatedTextKit(
          repeatForever: true,
          animatedTexts: [
            FadeAnimatedText('THE HARDER!!',
                duration: Duration(seconds: 3),fadeOutBegin: 0.9,fadeInEnd: 0.7),
            FadeAnimatedText('YOU WORK!!',
                duration: Duration(seconds: 3),fadeOutBegin: 0.9,fadeInEnd: 0.7),
            FadeAnimatedText('THE LUCKIER!!!',
                duration: Duration(seconds: 3),fadeOutBegin: 0.9,fadeInEnd: 0.7),
            FadeAnimatedText('YOU GET!!!!',
                duration: Duration(seconds: 3),fadeOutBegin: 0.9,fadeInEnd: 0.7),


          ],
        ),
      ),
    ),
  );

}

In this widget, we will return SizedBox(). Inside, we will add DefaultTextStyle() and add AnimatedTextKit() widget. In this widget, we will add animatedTexts. Inside, we will add four FadeAnimatedText() with speed duration, fadeOutBegin, and fadeInEnd. fadeOutBegin was greater than fadeInEnd. When we run the application, we ought to get the screen’s output like the underneath screen video.

> Scale Animation Text:

In the body, we will add the same method as the above. But changes in child property, add a _scale widget.

Widget _scale(){
  return SizedBox(
    child: DefaultTextStyle(
      style: const TextStyle(
        fontSize: 50.0,
        fontFamily: 'SF',
      ),
      child: Center(
        child: AnimatedTextKit(
          repeatForever: true,
          animatedTexts: [
            ScaleAnimatedText('Eat',scalingFactor: 0.2),
            ScaleAnimatedText('Code',scalingFactor: 0.2),
            ScaleAnimatedText('Sleep',scalingFactor: 0.2),
            ScaleAnimatedText('Repeat',scalingFactor: 0.2),

          ],
        ),
      ),
    ),
  );
}

In this widget, we will return SizedBox(). Inside, we will add DefaultTextStyle() and add AnimatedTextKit() widget. In this widget, we will add animatedTexts. Inside, we will add four ScaleAnimatedText() with scalingFactor. scalingFactor was set the scaling factor of the text for the animation. When we run the application, we ought to get the screen’s output like the underneath screen video.

> TextLiquidFill Animation:

In the body, we will add the same method as the above. But changes in child property, add a _textLiquidFillAnimation widget.

Widget _textLiquidFillAnimation(){
  return SizedBox(
    child: Center(
      child: TextLiquidFill(
        text: 'Flutter Devs',
        waveDuration: Duration(seconds: 5),
        waveColor: Colors.blue,
        boxBackgroundColor: Colors.green,
        textStyle: TextStyle(
          fontSize: 50.0,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  );
}

In this widget, we will return SizedBox(). Inside, we will add TextLiquidFill() widget. In this widget, we will add text, waveDuration, waveColor, and boxBackgroundColor. When we run the application, we ought to get the screen’s output like the underneath screen video.

> Wavy Animation Text:

In the body, we will add the same method as the above. But changes in child property, add a _wave widget.

Widget _wavy(){
  return DefaultTextStyle(
    style: const TextStyle(
      fontSize: 25.0,
    ),
    child: AnimatedTextKit(
      animatedTexts: [
        WavyAnimatedText("Flutter is Google's UI toolkit,",
            speed: Duration(milliseconds: 200)),
        WavyAnimatedText('for building beautiful Apps',
            speed: Duration(milliseconds: 200)),
      ],
      isRepeatingAnimation: true,
      repeatForever: true,
    ),
  );
}

In this widget, we will return DefaultTextStyle(). Inside, we will add AnimatedTextKit() widget. In this widget, we will add animatedTexts. Inside, we will add two WavyAnimatedText() with the speed duration of the text. When we run the application, we ought to get the screen’s output like the underneath screen video.

> Flicker Animation Text:

In the body, we will add the same method as the above. But changes in child property, add a _flicker widget.

Widget _flicker(){
  return SizedBox(
    width: 250.0,
    child: DefaultTextStyle(
      style: const TextStyle(
        fontSize: 30,
      ),
      child: AnimatedTextKit(
        repeatForever: true,
        animatedTexts: [
          FlickerAnimatedText('FlutterDevs specializes in creating,',
              speed: Duration(milliseconds: 1000),entryEnd: 0.7),
          FlickerAnimatedText('cost-effective and',
              speed: Duration(milliseconds: 1000),entryEnd: 0.7),
          FlickerAnimatedText("efficient applications!",
              speed: Duration(milliseconds: 1000),entryEnd: 0.7),
        ],
      ),
    ),
  );

}

In this widget, we will return SizedBox(). Inside, we will add DefaultTextStyle() and add AnimatedTextKit() widget. In this widget, we will add animatedTexts. Inside, we will add four FlickerAnimatedText() with entryEnd and speed. entryEnd was marked ending of flickering entry interval of text. When we run the application, we ought to get the screen’s output like the underneath screen video.

> Colorize Animation Text:

In the body, we will add the same method as the above. But changes in child property, add a _colorize widget.

Widget _colorize(){
  return SizedBox(
    child: Center(
      child: AnimatedTextKit(
        animatedTexts: [
          ColorizeAnimatedText(
            'Mobile Developer',
            textStyle: colorizeTextStyle,
            colors: colorizeColors,
          ),
          ColorizeAnimatedText(
            'Software Testing',
            textStyle: colorizeTextStyle,
            colors: colorizeColors,
          ),
          ColorizeAnimatedText(
            'Software Engineer',
            textStyle: colorizeTextStyle,
            colors: colorizeColors,
          ),
        ],
        isRepeatingAnimation: true,
        repeatForever: true,
      ),
    ),
  );


}

In this widget, we will return SizedBox(). Inside, we will add add AnimatedTextKit() widget. In this widget, we will add animatedTexts. Inside, we will add three ColorizeAnimatedText() with textStyle and colors.

List<MaterialColor> colorizeColors = [
  Colors.red,
  Colors.yellow,
  Colors.purple,
  Colors.blue,
];

static const colorizeTextStyle = TextStyle(
  fontSize: 40.0,
  fontFamily: 'SF',
);

Users can change color according to text. When we run the application, we ought to get the screen’s output like the underneath screen video

> Typewriter Animation Text:

In the body, we will add the same method as the above. But changes in child property, add a _typeWriter widget.

Widget _typeWriter(){
  return SizedBox(
    child: DefaultTextStyle(
      style: const TextStyle(
        fontSize: 30.0,
      ),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: AnimatedTextKit(
            repeatForever: true,
            animatedTexts: [
              TypewriterAnimatedText('FlutterDevs specializes in creating cost-effective',
                  curve: Curves.easeIn,speed: Duration(milliseconds: 80)),
              TypewriterAnimatedText('and efficient applications with our perfectly crafted,',
                  curve: Curves.easeIn,speed: Duration(milliseconds: 80)),
              TypewriterAnimatedText('creative and leading-edge flutter app development solutions',
                  curve: Curves.easeIn,speed: Duration(milliseconds: 80)),
              TypewriterAnimatedText('for customers all around the globe.',
                  curve: Curves.easeIn,speed: Duration(milliseconds: 80)),
            ],
          ),
        ),
      ),
    ),
  );

}

In this widget, we will return SizedBox(). Inside, we will add DefaultTextStyle() and add AnimatedTextKit() widget. In this widget, we will add animatedTexts. Inside, we will add four TypewriterAnimatedText() with curve and speed. When we run the application, we ought to get the screen’s output like the underneath screen video.

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_animation_text/colorize_animation_text.dart';
import 'package:flutter_animation_text/fade_animation_text.dart';
import 'package:flutter_animation_text/flicker_animation_text.dart';
import 'package:flutter_animation_text/rotate_animation_text.dart';
import 'package:flutter_animation_text/scale_animation_text.dart';
import 'package:flutter_animation_text/text_liquid_fill_animation.dart';
import 'package:flutter_animation_text/typer_animation_text.dart';
import 'package:flutter_animation_text/typewriter_animated_text.dart';
import 'package:flutter_animation_text/wavy_animation_text.dart';


class HomePageScreen extends StatefulWidget {
  @override
  _HomePageScreenState createState() => _HomePageScreenState();
}

class _HomePageScreenState extends State<HomePageScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffFFFFFF),
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: Text('Flutter Animations Text Demo'),
        automaticallyImplyLeading: false,
        centerTitle: true,
      ),
      body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[

                // ignore: deprecated_member_use
                RaisedButton(
                  child: Text('Rotate Animation Text',style: TextStyle(color: Colors.black),),
                  color: Colors.tealAccent,
                  onPressed: () {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder: (context) => RotateAnimationText()));
                  },
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
                  padding: EdgeInsets.all(13),
                ),
                SizedBox(height: 8,),
                // ignore: deprecated_member_use
                RaisedButton(
                  child: Text('Typer Animation Text',style: TextStyle(color: Colors.black),),
                  color: Colors.tealAccent,
                  onPressed: () {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder: (context) => TyperAnimationText()));
                  },
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
                  padding: EdgeInsets.all(13),

                ),
                SizedBox(height: 8,),
                // ignore: deprecated_member_use
                RaisedButton(
                  child: Text('Fade Animation Text',style: TextStyle(color: Colors.black),),
                  color: Colors.tealAccent,
                  onPressed: () {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder: (context) => FadeAnimationText()));
                  },
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
                  padding: EdgeInsets.all(13),

                ),
                SizedBox(height: 8,),
                // ignore: deprecated_member_use
                RaisedButton(
                  child: Text('Scale Animation Text',style: TextStyle(color: Colors.black),),
                  color: Colors.tealAccent,
                  onPressed: () {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder: (context) => ScaleAnimationText()));
                  },
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
                  padding: EdgeInsets.all(13),

                ),
                SizedBox(height: 8,),
                // ignore: deprecated_member_use
                RaisedButton(
                  child: Text('TextLiquidFill Animation',style: TextStyle(color: Colors.black),),
                  color: Colors.tealAccent,
                  onPressed: () {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder: (context) => TextLiquidFillAnimation()));
                  },
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
                  padding: EdgeInsets.all(13),

                ),
                SizedBox(height: 8,),
                // ignore: deprecated_member_use
                RaisedButton(
                  child: Text('Wavy Animation Text',style: TextStyle(color: Colors.black),),
                  color: Colors.tealAccent,
                  onPressed: () {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder: (context) => WavyAnimationText()));
                  },
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
                  padding: EdgeInsets.all(13),

                ),
                SizedBox(height: 8,),
                // ignore: deprecated_member_use
                RaisedButton(
                  child: Text('Flicker Animation Text',style: TextStyle(color: Colors.black),),
                  color: Colors.tealAccent,
                  onPressed: () {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder: (context) => FlickerAnimationText()));
                  },
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
                  padding: EdgeInsets.all(13),

                ),
                SizedBox(height: 8,),
                // ignore: deprecated_member_use
                RaisedButton(
                  child: Text('Colorize Animation Text',style: TextStyle(color: Colors.black),),
                  color: Colors.tealAccent,
                  onPressed: () {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder: (context) => ColorizeAnimationText()));
                  },
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
                  padding: EdgeInsets.all(13),

                ),
                SizedBox(height: 8,),

                // ignore: deprecated_member_use
                RaisedButton(
                  child: Text('Typewriter Animation Text',style: TextStyle(color: Colors.black),),
                  color: Colors.tealAccent,
                  onPressed: () {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder: (context) => TypewriterAnimationText()));
                  },
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
                  padding: EdgeInsets.all(13),

                ),

              ],
            ),
          )
      ), //center
    );
  }
}

Conclusion:

In the article, I have explained the basic structure of theText Animations in a flutter; you can modify this code according to your choice. This was a small introduction to Text Animations 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 Text Animations in your flutter projects. We will show you what the Introduction is?, some properties using in AnimatedTextKit, and make a demo program for working Text Animations 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.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

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.

Related: Exploring AnimatedModalBarrier In Flutter

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.