tinoguo / loading_indicator Goto Github PK

🚅Flutter out-of-the-box collection animations written in pure dart.

License: Apache License 2.0

Dart 99.08% HTML 0.16% Swift 0.67% Shell 0.09%

flutter animation animation-library dart loading-spinner

loading_indicator's Introduction

LoadingIndicator

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

Copyright 2019 Tino Guo.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

loading_indicator's People

Contributors

Stargazers

Watchers

loading_indicator's Issues

Migrate to sound null safety

Migrate to sound null safety
Bump up package version

LineScalePulseOutRapid after scale the round corner of line not properly

Is it possible to pause/resume the animation?

I'd like to use a loading indicator as a permanent ui element and would like to pause/resume the animation repeatedly.

Is that possible currently?

"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;
      },
....

Set Secondary Color on Loading Indicator

Please How can I set the secondary color on each Loading indicator? Thank you

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,

Issue : ballScaleMultiple animation issue

Issue : ballScaleMultiple animation issue
Is this the correct way how this animation should work when it is hovered

Screen.Recording.2023-10-14.at.8.19.30.PM.mov

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

lineSpinFadeLoader does not respect strokeWidth

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.

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.

Support Multiple colors
- if the widget contains more than one shape, it allows to set multiple colors
Support background path #5
Support linke stroke