flare_loading

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

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:

Create a generic flutter project with flutter web enabled.
Add the flare file included below to the assets folder logo.flr.zip
Add flare_splash_screen to the dependencies.
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)),
        )

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.

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

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

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

Dec 6, 2022

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

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

Dec 31, 2022

🎨Custom animation challenge annouced by egdroid

EgdroidChallenge Follow me on social media github linkedin twitter facebook 💪 challenge accepted 💪 A challenge code series idea suggested by an awes

Aug 28, 2020

A Flutter package to custom splash screen like change logo icon, logo animation, and splash screen background color.

Custom Splash Screen A Flutter package to custom splash screen: change logo icon, logo animation, and splash screen background color. (Custom from ani

Sep 6, 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

Dec 22, 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. pub package Getting Started

Dec 20, 2022

JSNoSuchMethodError thrown only on web.

opened by BrainRayChristensen 2

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

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

Related tags

Overview

flare_loading

Usage

Available mode

Only one animation

Start and loop animation

End and loop animation

Start and end animation

Start, end and loop animation

You might also like...

A simple custom loading indicator package.

Loading Animation With Flutter

A collection of awesome flutter loading animation

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

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

🎨Custom animation challenge annouced by egdroid

A Flutter package to custom splash screen like change logo icon, logo animation, and splash screen background color.

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

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

Comments

JSNoSuchMethodError thrown only on web.

Steps to recreate:

The Error:

endAnimation not shown

Owner

Jimmy Aumard

Flutter animation tutorials, such common animation, flare animation.

Facilitator for having a Splash Screen with a Flare animation

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.

Shimmer loading - A Flutter project to show how to add shimmer loading animation

A widget that allow user resize the widget with drag

A Flutter Log In Page using Flare Animations

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

Arisslidetransition - Create your own custom SlideTransition combined with some animation in Flutter

This repository demonstrates use of various widgets in flutter and tricks to create beautiful UI elements in flutter for Android and IOS

A tween that allow defining keyframes for various properties.