Loading widget based on a Flare animation, allow you to create beautiful custom loading widgets or dialogs

Overview

flare_loading

pub package

Loading widget based on a Flare animation, allow you to create custom loading widgets or dialogs

If you're using Rive instead of Flare please use rive_loading

Usage

FlareLoading(
  name: 'animation.flr', 
  startAnimation: 'intro',
  loopAnimation: 'circle',
  endAnimation: 'end',
);

name: path and name of the flare animation

until: callback that return a future to process your initialization

isLoading: alternative to until if you want to manage loading state with a boolean

loopAnimation: animation name to run in loop

endAnimation: animation name to run once until is complete or isLoading false

startAnimation: animation name to run once as start

height: force the height of the flare animation, by default it take the all place available

width: force the width of the flare animation, by default it take the all place available

alignment: alignment of the flare animation, center by default

onSuccess callback called when the animation is finished and isLoading is false or until is complete

onError callback called until has failed

Available mode

Only one animation

Basically you have one animation to show and then just need to stay at last frame. In order to do that only specify the startAnimation

Start and loop animation

Your animation have an intro and a loop state, in order to do that only specify the startAnimation and loopAnimation

End and loop animation

Your animation have a finish and a loop state, in order to do that only specify the endAnimation and loopAnimation

Start and end animation

Your animation have an intro and a finish that should stay on the last frame, in order to do that only startAnimation and endAnimation

Start, end and loop animation

Your animation have an intro, a finish and a loop state, in order to do that specify the startAnimation, endAnimation and loopAnimation

You might also like...

Loading Animation With Flutter

Flutter Loading Animation loading.ista.mp4 A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few re

Oct 13, 2022

A collection of awesome flutter loading animation

A collection of awesome flutter loading animation

loading_indicator_view A collection of awesome flutter loading animation Demo Usage loading_indicator_view: ^1.1.0 Animation types Type Type Type Typ

Sep 10, 2022

A simple custom loading indicator package.

A simple custom loading indicator package.

custom_loading_indicator A Flutter package to customise the loading indicators with your organisation's logo. Let's say you're a dentist and your app

Aug 10, 2020

Flutter ListView and GridView that shows Loading Widgets before the real data is loaded.

Flutter ListView and GridView that shows Loading Widgets before the real data is loaded.

loadinglistview This package provide an easy way to show loading indicator(Widget) in a listview or a gridview while the app is still fetching the rea

Dec 8, 2021

A Flutter widget that easily adds the flipping animation to any widget

A Flutter widget that easily adds the flipping animation to any widget

flip_card A component that provides a flip card animation. It could be used for hiding and showing details of a product. How to use import 'package:fl

Nov 14, 2022

A Flutter library that makes animation easer. It allows for separation of animation setup from the User Interface.

animator This library is an animation library for Flutter that: makes animation as simple as the simplest widget in Flutter with the help of Animator

Nov 23, 2022

A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration.

A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration.

A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration. pub package Getting Started

Nov 21, 2022

BKash-Ballance-Animation - BKash Ballance Animation For Flutter

BKash-Ballance-Animation - BKash Ballance Animation For Flutter

BKash-Ballance-Animation before clone the GitHub repository please give a star o

Sep 1, 2022

Fisherman-Fishing-Animation - Fisherman Fishing Animation With Flutter

Fisherman-Fishing-Animation - Fisherman Fishing Animation With Flutter

Fisherman Fishing Animation before clone the GitHub repository please give a sta

Oct 27, 2022
Comments
  • JSNoSuchMethodError thrown only on web.

    JSNoSuchMethodError thrown only on web.

    I'm using flare_splash_screen to display a flare animation on startup and it works in ios and android, but fails in web. I've included a zip of the .flr file with the error. Even though I'm using flare_splash_screen, it appears the problem happens in flare_loading, and that's why it's posted here. Are there any other details I can add?

    Steps to recreate:

    1. Create a generic flutter project with flutter web enabled.
    2. Add the flare file included below to the assets folder logo.flr.zip
    3. Add flare_splash_screen to the dependencies.
    4. Set up a splash screen with the following code
           SplashScreen.navigate(
              name: 'assets/logo.flr',
              next: (context) => MyHomePage(title: 'Flutter Demo Home Page'),
              width: 240.0,
              startAnimation: 'scale',
              backgroundColor: Color(0xffF7FBFF),
              until: () => Future.delayed(Duration(seconds: 5)),
            )
    
    1. Run it

    The Error:

    ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
    
    The following JSNoSuchMethodError was thrown during paint():
    
    NoSuchMethodError: invalid member on null: 'withOpacity'
    
    
    
    The relevant error-causing widget was:
    
      FlareActor
    
      file:///Users/BrianChristensen/.pub-cache/hosted/pub.dartlang.org/flare_loading-2.1.1/lib/flare_loading.dart:81:18
    
    
    
    When the exception was thrown, this was the stack:
    
    packages/flare_flutter/flare.dart 1225:22              draw
    
    packages/flare_flutter/flare.dart 826:20               draw
    
    packages/flare_flutter/flare_actor.dart 483:15         paintFlare
    
    packages/flare_flutter/flare_render_box.dart 215:7     paint
    
    packages/flutter/src/rendering/object.dart 2264:7      [_paintWithContext]
    
    packages/flutter/src/rendering/object.dart 184:12      paintChild
    
    packages/flutter/src/rendering/proxy_box.dart 129:14   paint
    
    packages/flutter/src/rendering/object.dart 2264:7      [_paintWithContext]
    
    packages/flutter/src/rendering/object.dart 184:12      paintChild
    
    packages/flutter/src/rendering/shifted_box.dart 70:14  paint
    
    packages/flutter/src/rendering/object.dart 2264:7      [_paintWithContext]
    
    packages/flutter/src/rendering/object.dart 184:12      paintChild
    
    packages/flutter/src/widgets/basic.dart 7133:14        paint
    
    packages/flutter/src/rendering/object.dart 2264:7      [_paintWithContext]
    
    packages/flutter/src/rendering/object.dart 184:12      paintChild
    
    packages/flutter/src/rendering/proxy_box.dart 129:14   paint
    
    packages/flutter/src/rendering/object.dart 2264:7      [_paintWithContext]
    
    packages/flutter/src/rendering/object.dart 184:12      paintChild
    
    packages/flutter/src/rendering/proxy_box.dart 129:14   paint
    
    packages/flutter/src/rendering/object.dart 2264:7      [_paintWithContext]
    
    packages/flutter/src/rendering/object.dart 135:10      _repaintCompositedChild
    
    packages/flutter/src/rendering/object.dart 95:5        repaintCompositedChild
    
    packages/flutter/src/rendering/object.dart 980:29      flushPaint
    
    packages/flutter/src/rendering/binding.dart 404:19     drawFrame
    
    packages/flutter/src/widgets/binding.dart 884:13       drawFrame
    
    packages/flutter/src/rendering/binding.dart 284:5      [_handlePersistentFrameCallback]
    
    packages/flutter/src/scheduler/binding.dart 1113:15    [_invokeFrameCallback]
    
    packages/flutter/src/scheduler/binding.dart 1052:9     handleDrawFrame
    
    packages/flutter/src/scheduler/binding.dart 968:5      [_handleDrawFrame]
    
    lib/_engine/engine/window.dart 576:13                  _invoke
    
    lib/_engine/engine/window.dart 222:5                   invokeOnDrawFrame
    
    lib/_engine/engine.dart 199:18                         <fn>
    
    
    
    The following RenderObject was being processed when the exception was fired: FlareActorRenderObject#62804:
    
      creator: FlareActor ← SizedBox ← Align ← Container ← FlareLoading ← ColoredBox ← Container ←
    
        SplashScreen ← Semantics ← Builder ← RepaintBoundary-[GlobalKey#54ab3] ← IgnorePointer ← ⋯
    
      parentData: <none> (can use size)
    
      constraints: BoxConstraints(w=240.0, 0.0<=h<=677.0)
    
      size: Size(240.0, 677.0)
    
    This RenderObject has no descendants.
    
    ════════════════════════════════════════════════════════════════════════════════════════════════════
    
    Another exception was thrown: Assertion failed: org-dartlang-sdk:///flutter_web_sdk/lib/_engine/engine/bitmap_canvas.dart:598:12
    
    Another exception was thrown: NoSuchMethodError: invalid member on null: 'withOpacity'
    
    Another exception was thrown: PersistedScene: is in an unexpected state.
    
    Another exception was thrown: NoSuchMethodError: invalid member on null: 'withOpacity'
    
    Another exception was thrown: PersistedScene: is in an unexpected state.
    
    Another exception was thrown: NoSuchMethodError: invalid member on null: 'withOpacity'
    
    Another exception was thrown: PersistedScene: is in an unexpected state.
    
    Another exception was thrown: NoSuchMethodError: invalid member on null: 'withOpacity'
    
    Another exception was thrown: PersistedScene: is in an unexpected state.
    
    Another exception was thrown: NoSuchMethodError: invalid member on null: 'withOpacity'
    
    Another exception was thrown: PersistedScene: is in an unexpected state.
    
    
    ════════ Exception caught by rendering library ═════════════════════════════════════════════════════
    The following JSNoSuchMethodError was thrown during paint():
    NoSuchMethodError: invalid member on null: 'withOpacity'
    
    The relevant error-causing widget was: 
      SplashScreen file:///Users/BrianChristensen/Desktop/testing123/testing123/lib/main.dart:30:26
    When the exception was thrown, this was the stack: 
    packages/flare_flutter/flare.dart 1225:22              draw
    packages/flare_flutter/flare.dart 826:20               draw
    packages/flare_flutter/flare_actor.dart 483:15         paintFlare
    packages/flare_flutter/flare_render_box.dart 215:7     paint
    packages/flutter/src/rendering/object.dart 2264:7      [_paintWithContext]
    ...
    The following RenderObject was being processed when the exception was fired: FlareActorRenderObject#62804
    ...  parentData: <none> (can use size)
    ...  constraints: BoxConstraints(w=240.0, 0.0<=h<=677.0)
    ...  size: Size(240.0, 677.0)
    RenderObject: FlareActorRenderObject#62804
      parentData: <none> (can use size)
      constraints: BoxConstraints(w=240.0, 0.0<=h<=677.0)
      size: Size(240.0, 677.0)
    ════════════════════════════════════════════════════════════════════════════════════════════════════
    
    ════════ (2) Exception caught by scheduler library ═════════════════════════════════════════════════
    PersistedScene: is in an unexpected state.
    Expected one of: PersistedSurfaceState.active, PersistedSurfaceState.pendingUpdate
    But was: PersistedSurfaceState.released
    ════════════════════════════════════════════════════════════════════════════════════════════════════
    
    ════════ (3) Exception caught by rendering library ═════════════════════════════════════════════════
    NoSuchMethodError: invalid member on null: 'withOpacity'
    The relevant error-causing widget was: 
      SplashScreen file:///Users/BrianChristensen/Desktop/testing123/testing123/lib/main.dart:30:26
    ════════════════════════════════════════════════════════════════════════════════════════════════════
    
    The last two errors just repeat themselves until the program is stopped.
    opened by BrainRayChristensen 2
  • endAnimation not shown

    endAnimation not shown

    Here is my issue : when I start my application I've made an animation looping during the loading of a future process and another animation when the future has data. So here is my code : (I've replaced my future with a simple delay but it does the same.

    return Scaffold(
          backgroundColor: Colors.white,
          body: Center(
              child: FlareLoading(
            until: () => Future.delayed(Duration(seconds: 5)),
            name: 'assets/animations/ynotes.flr',
            loopAnimation: 'Load',
            endAnimation: 'Ended',
            onSuccess: (test) {
              Navigator.of(context).pushReplacement(router(homePage()));
            },
            onError: (__, _) {
              Navigator.of(context).pushReplacement(router(login()));
            },
          )
    

    Unfortunately I can't upload my .flr file, so here is the link https://rive.app/a/modeeeeeeeeern/files/flare/ynotes/embed

    opened by JsonLinesCode 4
Owner
Jimmy Aumard
Open source enthousiaste !
Jimmy Aumard
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Flutter开源社区 123 Sep 3, 2022
Facilitator for having a Splash Screen with a Flare animation

flare_splash_screen Facilitator for having a Splash screen with a Flare animation until some work has been done for the initialization of the app If y

Jimmy Aumard 94 Oct 6, 2022
Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

like_button Language: English | 中文简体 Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's h

FlutterCandies 355 Nov 24, 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
Shimmer loading - A Flutter project to show how to add shimmer loading animation

shimmer_loading A Flutter project to show how to add shimmer loading animation.

null 0 Feb 6, 2022
A widget that allow user resize the widget with drag

Flutter-Resizable-Widget A widget that allow user resize the widget with drag Note: this widget uses Getx Example bandicam.2021-11-11.12-34-41-056.mp4

MohammadAminZamani.afshar 20 Sep 4, 2022
Create your own custom SlideTransition combined with some animation in Flutter.

Create your own custom SlideTransition combined with some animation in Flutter.

Johannes Milke 7 Jun 21, 2022
Arisslidetransition - Create your own custom SlideTransition combined with some animation in Flutter

SlideTransition Animation - Flutter Create your own custom SlideTransition combi

Behruz Hurramov 1 Jan 9, 2022
This repository demonstrates use of various widgets in flutter and tricks to create beautiful UI elements in flutter for Android and IOS

AwesomeFlutterUI The purpose of this repository is to demonstrate the use of different widgets and tricks in flutter and how to use them in your proje

Subir Chakraborty 132 Nov 13, 2022
A tween that allow defining keyframes for various properties.

keyframes_tween A tween that allow defining keyframes for various properties. Quickstart import 'package:keyframes_tween/keyframes_tween.dart'; class

Aloïs Deniel 11 Sep 19, 2022