Flutter Blinking Text Animation

Today we will integrate Blinking text animation with blinking_text Pub package. In this package we will get all types of blinking animation controlling options including duration. Text will change it's color smoothly with animation.

Flutter Blinking Text Animation

1. Install blinking_text package in your flutter application. Open your flutter project PATH in terminal and execute below command.

flutter pub add blinking_text

Terminal Screenshot:

2. Import material.dart and blinking_text.dart package in main.dart file.

import 'package:flutter/material.dart';
import 'package:blinking_text/blinking_text.dart';

3. Creating BlinkText widget with all required properties.

Code Explanation:

• style: Support all text styling options.
• beginColor: Animation starting color.
• endColor: Animation ending color.
• times: How many times blinking animation should run.
• duration: To perform a single animation how much time it will take.

BlinkText('Blinking Text Animation',
          style: TextStyle(fontSize: 28.0, color: Colors.red),
          beginColor: Colors.red,
          endColor: Colors.green,
          times: 100,
          duration: Duration(seconds: 1))

App Screenshot:

Source code for main.dart file:

import 'package:flutter/material.dart';
import 'package:blinking_text/blinking_text.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: Scaffold(body: MyApp()));
  }
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

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

class MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: BlinkText('Blinking Text Animation',
          style: TextStyle(fontSize: 28.0, color: Colors.red),
          beginColor: Colors.red,
          endColor: Colors.green,
          times: 100,
          duration: Duration(seconds: 1)),
    );
  }
}