Animated TypeWriter Box In Flutter

I generally needed to work with flawless or insane animations. I have worked with Flutter for a long time, and I was beginning to locate some new Flutter animations. Animations can assist you with build all the more outwardly engaging Flutter applications. Much the same as how you would add some basic animations to make an introduction:

• Outwardly engaging.
• Stand out enough to be noticed at the right spot when it is required.
• Make it much less exhausting.

Similarly, we can use animations to make our Flutter application more magnificent and stick out.

Animations give superior experience to users. I know, and you may be realizing that Flutter has extraordinary help for Animations effortlessly of utilization. There are huge loads of incredible articles for beginning with Animations in Flutter.

In this article, I will talk about Animated TypeWriter Box In Flutter. I will show you a demo of animating a typewriter box using the simple_animations package and supercharged_package in your flutter applications.

supercharged | Flutter Package
Supercharged brings all the comfort features from languages like Kotlin to all Flutter developers.pub.dev

Table Of Contents::

TypeWriter Box

Implementation

Code Implement

Code File

Conclusion

---

---

TypeWriter Box

We will Animate the typeWriter box using PlayAnimation with the help of duration, tween, and builder. We will also animate the width of the box, text length, and cursor. Typewriter provides a builder-pattern-friendly Typewriter widget for animating text.

Demo Module ::

This video shows how to create a TypeWriter Box in a flutter and show how to typeWriter Box will work in your flutter applications with play animation, and then they will be shown on your device.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:

simple_animations: ^latest version
supercharged: ^latrst version

Step 2: Import

import 'package:simple_animations/simple_animations.dart';
import 'package:supercharged/supercharged.dart';

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

Step 4: Enable AndriodX

Add this to your gradle.properties file:

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

How to implement code in dart file :

You need to implement it in your code respectively:

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

static final boxDecoration = BoxDecoration(
    color: Colors.lightBlueAccent[200],
    borderRadius: BorderRadius.all
      (Radius.circular(10)),
    boxShadow: [
      BoxShadow(
          color: Colors.black.
          withAlpha(50),
          blurRadius: 15,
          offset: Offset(0, 8),
          spreadRadius: 5
      )
    ]);

We will create a static BoxDecoration with box-shadow, border-radius, and color of the box.

On this screen, an animate box with light blue color and inside animate a text Flutter Devs.

Now we can write our render function. It returns a PlayAnimation widget that comes from the Simple Animations package. It can simply start an animation. It takes four parameters:

• Duration: The property is utilized to indicate what amount of time the animation cycle should require. The time is determined in a moment or two or milliseconds and is first set to ‘0s’, which implies that the animation happens promptly. You can determine one duration or various comma-isolated durations
• Tween: A linear interpolation between the start and finishing value. Tween is valuable on the off chance that you need to add over a range. To utilize a Tween object with an animation, consider the Tween objects animate technique and passes it to the Animation object you need to adjust.
• Delay: It permits an animation to start execution at some point after it is applied or to seem to have started execution at some point before it is applied. The underlying worth is ‘0s’, which implies that the animation will begin to play when applied to an element.
• Builder: It is a function that is called each casing you are animating. To improve your animation presentation, you should put all widgets not influenced by the animation into the child’s property. You get that child widget passed into the builder function.

return PlayAnimation<double>(
  duration: 1600.milliseconds,
  delay: 500.milliseconds,
  tween: 2.0.tweenTo(300.0),
  builder: (context, child, width) {
    return Container(
      decoration: TypeWriterBox.
      boxDecoration,
      width: width,
      height: height,
      child: typewriter(width)
          ? TypeWriterText("Flutter Devs")
          : Container(),
    );
  },
);

Let’s we will describe the typewriter widget:

In this widget typewriter was double width and width was greater than 15.

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

We can implement that behavior into our TypeWriterText class:

import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';
import 'package:supercharged/supercharged.dart';


class TypeWriterText extends StatelessWidget {
  static const Type_Writer_STYLE =
  TextStyle(letterSpacing: 5,
      fontSize: 20, fontWeight:
      FontWeight.w400,
      color: Colors.white);

  final String text;
  TypeWriterText(this.text);

  @override
  Widget build(BuildContext context) {
    return PlayAnimation<int>(
        duration: 1000.milliseconds,
        delay: 1000.milliseconds,
        tween: 0.tweenTo(text.length),
        builder: (context, child, textLength) {
          return Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(text.substring(0, textLength),
                  style: Type_Writer_STYLE
              ),
              _blinkingCursor()
            ],
          );
        });
  
  }
}

In this TypeWriterText class, we will define const Type_Writer_STYLE, add animation for text , and _blinkingCursor() widget. We will use tween is 0.tweenTo(text.length).

Let’s explore _blinkingCursor() widget:

In this widget, we will use LoopAnimation with duration, tween, and builder. We will also return opacity.

Code File

import 'package:flutter/material.dart';
import 'package:flutter_animates_typewriter/type_writer_text.dart';
import 'package:simple_animations/simple_animations.dart';
import 'package:supercharged/supercharged.dart';


class TypeWriterBox extends StatefulWidget {
  static final boxDecoration = BoxDecoration(
      color: Colors.lightBlueAccent[200],
      borderRadius: BorderRadius.all
        (Radius.circular(10)),
      boxShadow: [
        BoxShadow(
            color: Colors.black.withAlpha(50),
            blurRadius: 15,
            offset: Offset(0, 8),
            spreadRadius: 5
        )
      ]);

  @override
  _TypeWriterBoxState createState() => _TypeWriterBoxState();
}

class _TypeWriterBoxState extends State<TypeWriterBox> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: Text("Flutter Animates TypeWriter Box Demo"),
        centerTitle: true,
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: PlayAnimation<double>(
          duration: 400.milliseconds,
          tween: 0.0.tweenTo(80.0),
          builder: (context, child, height) {
            return PlayAnimation<double>(
              duration: 1600.milliseconds,
              delay: 500.milliseconds,
              tween: 2.0.tweenTo(300.0),
              builder: (context, child, width) {
                return Container(
                  decoration: TypeWriterBox.boxDecoration,
                  width: width,
                  height: height,
                  child: typewriter(width)
                      ? TypeWriterText("Flutter Devs")
                      : Container(),
                );
              },
            );
          },
        ),
      ),
    );
  }

  bool typewriter(double width) => width > 15;
}

Conclusion :

In the article, I have explained the structure of Animated TypeWriter Box; you can modify this code according to your choice. This was a small introduction to Animated TypeWriter Box On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information in Trying up Animated TypeWriter Box in your flutter projects. This is a demo program to use simple animations and supercharged packages in a flutter and show how animated typewriter box will work 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.

find the source code of the Flutter Animated TypeWriter Box Demo:

flutter-devs/flutter_animated_typewriter_box_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…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.

---