watery-desert/loading_animation_widget

Loading Animation Widget

---

How to use

Installation

Add loading_animation_widget: to your pubspec.yaml dependencies then run flutter pub get

 dependencies:
  loading_animation_widget:

Import

Add this line to import the package.

import 'package:loading_animation_widget/loading_animation_widget.dart';

All loading animation APIs are same straight forward. There is a static method for each animation inside LoadingAnimationWidget class, which returns the Object of that animation. Both size and color are required some animations need more than one color.

Loading animation with one color

Scaffold(
    body: Center(
      child: LoadingAnimationWidget.staggeredDotsWave(
        color: Colors.white,
        size: 200,
      ),
    ),

Loading animation with more than one color. You have to provide both required colors.

Scaffold(
    body: Center(
        child: LoadingAnimationWidget.twistingDots(
          leftDotColor: const Color(0xFF1A1A3F),
          rightDotColor: const Color(0xFFEA3799),
          size: 200,
        ),
      ),

Screen recordings with design credits

waveDots https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/waveDots.gif

inkDrop https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/inkDrop.gif

twistingDots https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/twistingDots.gif

threeRotatingDots https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/threeRotatingDots.gif

staggeredDotsWave https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/staggeredDotsWave.gif

fourRotatingDots https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/fourRotatingDots.gif

fallingDot https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/fallingDot.gif

progressiveDots https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/progressiveDots.gif

discreteCircular https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/discreteCircular.gif

threeArchedCircle https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/threeArchedCircle.gif

bouncingBall https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/bouncingBall.gif

flickr https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/flickr.gif

hexagonDots https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/hexagonDots.gif

beat https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/beat.gif

twoRotatingArc https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/twoRotatingArc.gif

horizontalRotatingDots https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/horizontalRotatingDots.gif

newtonCradle https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/newtonCradle.gif

stretchedDots https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/stretchedDots.gif

halfTriangleDot https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/halfTriangleDot.gif

dotsTriangle https://raw.githubusercontent.com/watery-desert/assets/main/loading_animation_widget/dotsTriangle.gif

All flutter packages

● Sliding Clipped Nav Bar
● Water Drop Nav Bar
● Swipeable Tile
➜ Loading Animation Widget