How to create animated liquid wave progress indicator in Flutter App

You will find lots of widgets to make your user interface beautiful in Flutter. In this example, we have used one of the packages which help to make animated liquid wave progress indicators very easily with little code. You can make both circular or linear progress indicators for your app. See the example below, read the explanation in the codes.

First, you need to add liquid_progress_indicator Flutter package in your dependency by adding the following line in pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  liquid_progress_indicator: ^0.3.2

Use the following Widget to make a circular liquid progress indicator:

LiquidCircularProgressIndicator(
  value: 0.25, // Defaults to 0.5.
  valueColor: AlwaysStoppedAnimation(Colors.pink), // Defaults to the current Theme's accentColor.
  backgroundColor: Colors.white, // Defaults to the current Theme's backgroundColor.
  borderColor: Colors.red,
  borderWidth: 5.0,
  direction: Axis.horizontal, 
  // The direction the liquid moves (Axis.vertical = bottom to top, Axis.horizontal = left to right). Defaults to Axis.vertical.
  center: Text("Loading..."),
);

Use the following Widget to make a linear liquid progress indicator:

LiquidLinearProgressIndicator(
  value: 0.25, // Defaults to 0.5.
  valueColor: AlwaysStoppedAnimation(Colors.pink), // Defaults to the current Theme's accentColor.
  backgroundColor: Colors.white, // Defaults to the current Theme's backgroundColor.
  borderColor: Colors.red,
  borderWidth: 5.0,
  borderRadius: 12.0,
  direction: Axis.vertical, 
  // The direction the liquid moves (Axis.vertical = bottom to top, Axis.horizontal = left to right). Defaults to Axis.horizontal.
  center: Text("Loading..."),
);

Use the following code to make custom shape liquid progress indicator:

LiquidCustomProgressIndicator(
  value: 0.2 // Defaults to 0.5.
  valueColor: AlwaysStoppedAnimation(Colors.pink), // Defaults to the current Theme's accentColor.
  backgroundColor: Colors.white, // Defaults to the current Theme's backgroundColor.
  direction: Axis.vertical, // The direction the liquid moves (Axis.vertical = bottom to top, Axis.horizontal = left to right).
  shapePath: _buildBoatPath(), 
  // A Path object used to draw the shape of the progress indicator. 
  // The size of the progress indicator is created from the bounds of this path.
)

See the full example below, read the explanation comments in codes:

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:liquid_progress_indicator/liquid_progress_indicator.dart';
//import package file

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
         home: MyLiquidProgress() //set the class here
    );
  }
}

class MyLiquidProgress extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold( 
       appBar: AppBar(
         title:Text("Liquid Progress Bar"),
         backgroundColor: Colors.redAccent,
       ),
       body: Container( 
          padding: EdgeInsets.all(25),
          height:200,
          child:Row(
            children: <Widget>[
              Container(
               margin: EdgeInsets.only(right:20),
               child: SizedBox( 
                 height: 150, width:150,
                 child:LiquidCircularProgressIndicator(
                    value: 0.5, // Defaults to 0.5.
                    valueColor: AlwaysStoppedAnimation(Colors.lightBlue[200]), // Defaults to the current Theme's accentColor.
                    backgroundColor: Colors.white, // Defaults to the current Theme's backgroundColor.
                    borderColor: Colors.blueAccent,
                    borderWidth: 5.0,
                    direction: Axis.vertical, 
                   // The direction the liquid moves (Axis.vertical = bottom to top, Axis.horizontal = left to right). Defaults to Axis.vertical.
                    center: Text("Loading..."), //text inside it
                  )
                )
              ),

              Expanded( //Expanded() widget expands inner widget to remaining space
               child: SizedBox( 
                 height: 50,
                 child:LiquidLinearProgressIndicator(
                    value: 0.45, // Defaults to 0.5.
                    valueColor: AlwaysStoppedAnimation(Colors.pink[100]), // Defaults to the current Theme's accentColor.
                    backgroundColor: Colors.white, // Defaults to the current Theme's backgroundColor.
                    borderColor: Colors.red, //border color of the bar
                    borderWidth: 5.0, //border width of the bar
                    borderRadius: 12.0,//border radius
                    direction: Axis.horizontal, 
                  // The direction the liquid moves (Axis.vertical = bottom to top, Axis.horizontal = left to right). Defaults to Axis.horizontal.
                    center: Text("50%"), //text inside bar
                  )
                )
              ),
          ],)
       ),
    );
  }
}