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 ), ), ), ); } } |