Flutter – Implement LiquidFill Text

In Flutter we can create a LiquidFill Text easily with the help of the TextLiquidFill widget which comes under the animated_text_kit package. It allows you to animate the filling of text with a liquid-like wave. The text appears to fill in as if it were a liquid substance. A sample video is given below to get an idea about what we are going to do in this article.

Basic Syntax of TextLiquidFill Widget

TextLiquidFill(
  text: 'Your Text Here', // The text to be animated
  waveColor: Colors.blue, // Color of the liquid-like wave
  boxBackgroundColor: Colors.red, // Background color behind the text
  textStyle: TextStyle(
    fontSize: 40.0, // Font size
    fontWeight: FontWeight.bold, // Font weight
    color: Colors.white, // Text color
  ),
  boxHeight: 100.0, // Height of the container that holds the text
)

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2 : Adding the Dependencies

Here we have to add the the following dependencies to our pubspec.yaml file.

dependencies:
  animated_text_kit: ^4.2.2

or simply you can run this command in your terminal .

flutter pub add animated_text_kit

Step 3: Import the Package

First of all import material.dart package and the animated_text_kit.dart package.

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

Step 4: Execute the main Method

Here the execution of our app starts.

Dart

void main() {
  runApp(
    MyApp(),
  );
}

Step 5: Create MyApp Class

In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Define the app's theme
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      home: TextLiquidFillExample(),
    );
  }
}

Step 6: Create TextLiquidFillExample Class

In this class we are going to add LiquidFill effect to the Text using TextLiquidFill Widget avaliable in animated_text_kit package. Comments are added for better understanding.

TextLiquidFill(
            text: 'GFG', // Text to be animated
            waveColor: Colors.green, // Color of the liquid-like wave
            boxBackgroundColor:
                Colors.black, // Background color behind the text
            textStyle: TextStyle(
              fontSize: 150.0, // Font size
              color: Colors.black, // Text color
              fontWeight: FontWeight.bold, // Font weight
            ),
            boxHeight:
                350.0, // Height of the container that holds the animated text
          ), 

Dart

class TextLiquidFillExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Liquid Fill Example'), // Set the app bar title
      ),
      body: Center(
        child: SizedBox(
          width: 350.0,
          child: TextLiquidFill(
            text: 'GFG', // Text to be animated
            waveColor: Colors.green, // Color of the liquid-like wave
            boxBackgroundColor:
                Colors.black, // Background color behind the text
            textStyle: TextStyle(
              fontSize: 150.0, // Font size
              color: Colors.black, // Text color
              fontWeight: FontWeight.bold, // Font weight
            ),
            boxHeight:
                350.0, // Height of the container that holds the animated text
          ),
        ),
      ),
    );
  }
}

Here is the full Code of main.dart file

Dart

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

void main() {
  runApp(
    MyApp(),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Define the app's theme
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      home: TextLiquidFillExample(),
    );
  }
}

class TextLiquidFillExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Liquid Fill Example'), // Set the app bar title
      ),
      body: Center(
        child: SizedBox(
          width: 350.0,
          child: TextLiquidFill(
            text: 'GFG', // Text to be animated
            waveColor: Colors.green, // Color of the liquid-like wave
            boxBackgroundColor:
                Colors.black, // Background color behind the text
            textStyle: TextStyle(
              fontSize: 150.0, // Font size
              color: Colors.black, // Text color
              fontWeight: FontWeight.bold, // Font weight
            ),
            boxHeight:
                350.0, // Height of the container that holds the animated text
          ),
        ),
      ),
    );
  }
}

Output: