πŸš…Flutter out-of-the-box collection animations written in pure dart.

Overview

LoadingIndicator

pub package

A collection of out of the box loading animations written in pure dart, no extra dependency, inspired by loaders.css and NVActivityIndicatorView.

Demo

Now, you can click this site to preview.3D effect will be invalid in web.

Animation types

Type Type Type Type
1. ballPulse 2. ballGridPulse 3. ballClipRotate 4. squareSpin
5. ballClipRotatePulse 6. ballClipRotateMultiple 7. ballPulseRise 8. ballRotate
9. cubeTransition 10. ballZigZag 11. ballZigZagDeflect 12. ballTrianglePath
13. ballTrianglePathColored 14.ballTrianglePathColoredFilled 15. ballScale 16. lineScale
17. lineScaleParty 18. ballScaleMultiple 19. ballPulseSync 20. ballBeat
21. lineScalePulseOut 22. lineScalePulseOutRapid 23. ballScaleRipple 24. ballScaleRippleMultiple
25. ballSpinFadeLoader 26. lineSpinFadeLoader 27. triangleSkewSpin 28. pacman
29. ballGridBeat 30. semiCircleSpin 31. ballRotateChase 32. orbit
33. audioEqualizer 34. circleStrokeSpin

Installing

Install the latest version from pub

Usage

Simple but powerful parameters

LoadingIndicator(
    indicatorType: Indicator.ballPulse, /// Required, The loading type of the widget
    colors: const [Colors.white],       /// Optional, The color collections
    strokeWidth: 2,                     /// Optional, The stroke of the line, only applicable to widget which contains line
    backgroundColor: Colors.black,      /// Optional, Background of the widget
    pathBackgroundColor: Colors.black   /// Optional, the stroke backgroundColor
)

δΈ­ζ–‡η‰ˆ

License

Apache 2.0

Comments
  • Cant get Loading indicator on old version of flutter showing this message on flutter 2.10 (flutter 3.0 released already)

    Cant get Loading indicator on old version of flutter showing this message on flutter 2.10 (flutter 3.0 released already)

    [example-project]flutter pub get ╔════════════════════════════════════════════════════════════════════════════╗ β•‘ A new version of Flutter is available!
    β•‘
    β•‘ To update to the latest version, run "flutter upgrade".
    β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•

    Running "flutter pub get" in example-project...
    Because every version of flutter_test from sdk depends on collection 1.15.0 and loading_indicator >=3.0.4 depends on collection ^1.16.0, flutter_test from sdk is incompatible with loading_indicator >=3.0.4. So, because pos depends on both loading_indicator ^3.1.0 and flutter_test from sdk, version solving failed. pub get failed (1; So, because pos depends on both loading_indicator ^3.1.0 and flutter_test from sdk, version solving failed.) exit code 1

    opened by Ujjawalmaurya 3
  • Added ball_triangle_path_colored

    Added ball_triangle_path_colored

    My client liked the ball_triangle_path loading, but wanted to have it with different color. This commit adds just that, with minimal changes to other files.

    enhancement 
    opened by woshikie 3
  • BallPulseSync animations mismatch

    BallPulseSync animations mismatch

    Hi, while using ballPulseSync indicator I noticed that the animation on the demo website and readme gif one are not the same: the first two balls moves together in the last one. Same problem on my app too. Thank you.

    bug 
    opened by andreee13 2
  • Color change does't work with BlocBuilder

    Color change does't work with BlocBuilder

    BlocBuilder<UnitsCalculationsManagementCubit, UnitsCalculationManagementModel>(
                                      builder: (context, state) {
                                        print(state.instanceState == UnitsCalculationManagementStates.error);
                                        if(state.instanceState == UnitsCalculationManagementStates.textEmpty || state.instanceState == UnitsCalculationManagementStates.error) {
                                          return LoadingIndicator(
                                            indicatorType: Indicator.ballBeat,
                                            // COLOR CHANGE DOESN'T CHANGE
                                            colors: state.instanceState == UnitsCalculationManagementStates.textEmpty ? [Theme.of(context).primaryColor.withOpacity(0.3)] : [Colors.red],
                                            // BACKGROUNDCOLOR CHANGES
                                            backgroundColor: state.instanceState == UnitsCalculationManagementStates.textEmpty ? Theme.of(context).primaryColor.withOpacity(0.3) : Colors.red,
                                          );
                                        } else {
                                          return Container();
                                        }
                                      }
                                  ),
    

    I don't excatly why it happens. Background color works with custom rebuilder. I don't have too much time to analyse the source code of the extension but I assume the Widget already rebuilds itself that's why there's a problem.

    bug 
    opened by 7AveNooN7 1
  • circle_stroke_spin.dart (CircleStrokeSpin) does not use strokeWidth

    circle_stroke_spin.dart (CircleStrokeSpin) does not use strokeWidth

    In File circle_stroke_spin.dart (CircleStrokeSpin) Line 12: strokeWidth: 2, should be strokeWidth: DecorateContext.of(context)!.decorateData.strokeWidth,

    bug 
    opened by umutonat 1
  • Multiple Colors support

    Multiple Colors support

    • [x] Support Multiple colors
      • if the widget contains more than one shape, it allows to set multiple colors
    • [x] Support background path #5
    • [x] Support linke stroke
    enhancement 
    opened by TinoGuo 1
  • "AnimationController.stop() called after AnimationController.dispose()\nAnimationController methods should not be used after calling dispose."

    get: ^4.3.4 loading_indicator: ^3.0.2

    Exception has occurred.
    "Error: Assertion failed: file:///C:/flutter/packages/flutter/lib/src/animation/animation_controller.dart:772:7
    _ticker != null
    "AnimationController.stop() called after AnimationController.dispose()\nAnimationController methods should not be used after calling dispose."
        at Object.throw_ [as throw] (http://localhost:49699/dart_sdk.js:5063:11)
        at Object.assertFailed (http://localhost:49699/dart_sdk.js:4988:15)
        at animation_controller.AnimationController.new.stop (http://localhost:49699/packages/flutter/src/animation/animation_controller.dart.lib.js:453:42)
        at animation_controller.AnimationController.new.repeat (http://localhost:49699/packages/flutter/src/animation/animation_controller.dart.lib.js:395:12)
        at http://localhost:49699/packages/loading_indicator/src/indicators/triangle_skew_spin.dart.lib.js:7687:51
        at _RootZone.runUnary (http://localhost:49699/dart_sdk.js:40062:59)
        at _FutureListener.then.handleValue (http://localhost:49699/dart_sdk.js:34983:29)
        at handleValueCallback (http://localhost:49699/dart_sdk.js:35551:49)
        at Function._propagateToListeners (http://localhost:49699/dart_sdk.js:35589:17)
        at _Future.new.[_complete] (http://localhost:49699/dart_sdk.js:35429:25)
        at http://localhost:49699/dart_sdk.js:34534:30
        at internalCallback (http://localhost:49699/dart_sdk.js:26215:11)"
    

    code to reproduce

     @override
      Widget build(BuildContext context) {
        return Container(
          height: height,
          child: Obx(() => body()),
        );
      }
    
      Widget body() {
        if (!firstLoaded.value && firstLoadingScreen) {
          return loadingPanel();
        } else {
          return content();
        }
      }
    
      Widget loadingPanel() {
        return Center(
          child: SizedBox(
            height: 10,
            width: 46,
            child: LoadingIndicator(
              indicatorType: Indicator.ballBeat,
              colors: [
                Colors.black.withOpacity(.2),
                Colors.black,
                Colors.black.withOpacity(.8)
              ],
              strokeWidth: 2,
            ),
          ),
        );
      }
    
      Widget content() {
        return NotificationListener<ScrollNotification>(
          onNotification: (scrollNotification) {
            if (scrollNotification.metrics.pixels >=
                scrollNotification.metrics.maxScrollExtent) {
              load();
            }
            return true;
          },
    ....
    
    bug 
    opened by astheras 3
Releases(3.0.0)
Owner
Tino
Android Engineer, Flutter follower, Rust Beginner, OpenWrt
Tino
Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.

Lottie for Flutter Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and rende

Xavier H. 894 Jan 2, 2023
Delightful, performance-focused pure css loading animations.

Loaders.css Delightful and performance-focused pure css loading animations. What is this? See the demo A collection of loading animations written enti

Connor Atherton 10.2k Jan 2, 2023
A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations.

flutter_animated_dialog A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations. Dialog barrier i

null 20 Dec 3, 2022
Create powerful animations in Flutter and use the hero animation for complex animations

Hero Animation - Locations UI - Flutter Create powerful animations in Flutter and use the hero animation for complex animations. ⚑  Social Media  Twit

null 3 Dec 11, 2021
A collection of Animations that aims to improve the user experience for your next flutter project.

A collection of Animations that aims to improve the user experience for your next flutter project.

Ezaldeen Sahb 134 Dec 24, 2022
A collection of awesome loading animations

NVActivityIndicatorView ⚠️ Check out LoaderUI (ready to use with Swift Package Mananger supported) for SwiftUI implementation of this. ?? Introduction

Vinh Nguyen 10.3k Jan 3, 2023
My UI and Animations Challanges in Flutter/Dart

ui_challenges Comecei com essa challange, por causa do novo emprego preciso de praticar muito mais animaçáes e telas, toda semana uma UI Nova com o te

Geek Fabio 25 Sep 4, 2022
A curated collection of awesome gradients made in Dart for Flutter

Flutter Gradients A curated collection of awesome gradients made in Dart (port of https://webgradients.com for Flutter). Only linear gradients include

Jonathan Monga 178 Dec 18, 2022
πŸ”” A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Ayush Agarwal 1.4k Jan 6, 2023
Flutter package for creating awesome animations.

?? Simple Animations Simple Animations is a powerful package to create beautiful custom animations in no time. ?? fully tested ?? well documented ?? e

Felix Blaschke 879 Dec 31, 2022
Fun canvas animations in Flutter based on time and math functions.

funvas Flutter package that allows creating canvas animations based on time and math (mostly trigonometric) functions. The name "funvas" is based on F

null 472 Jan 9, 2023
A flutter package that adds support for vector data based animations.

animated_vector Description and inspiration A package that adds support for vector data based animations. The data format is heavily inspired from the

Potato Open Sauce Project 6 Apr 26, 2022
Simple reactive animations in your Flutter apps.

just.motion Flutter package to create organic motion transitions. Why? The Motion Value stateless hot reload status notifier Ease Motion Spring Motion

Roi Peker 49 Nov 14, 2022
Timer UI animation challenge from 'Flutter Animations Masterclass'

stopwatch_flutter An IOS stopwatch challenge from Flutter Animations Masterclass - Full Course What I learned; Use timer Use ticker Create custom shap

Ali Riza Reisoglu 11 Jan 4, 2023
Hmida 17 Nov 22, 2022
A Flutter Log In Page using Flare Animations

Bear_log_in An example built using JCToon's Flare File as a custom UI component. Bear will follow the cursor as you type or move it around. Overview T

Apurv Jha 14 Oct 19, 2022
A package to create nice and smooth animations for flutter

animation_director A package to create nice and smooth animations for flutter Introduction A simple package to build beautiful and smooth animations f

null 10 Nov 28, 2022
A Flutter package with a selection of simple yet very customizable set of loading animations.

Flutter Loading Animations A simple yet very customizable set of loading animations for Flutter projects. Installation Add the following to your pubsp

Andre Cytryn 171 Sep 23, 2022
β˜€οΈ A Flutter package for some material design app intro screens with some cool animations.

IntroViews is inspired by Paper Onboarding and developed with love from scratch. Checkout our fully responsive live example app. Table of contents Fea

Ayush Agarwal 652 Dec 30, 2022