Exporting Flare animation

Question

Flare animation won't display on the screen. I'm using:

Container(
              height: 300.0,
              width: 300.0,
              child: FlareActor('checkmarkone.flr',
                  fit: BoxFit.contain,
                  alignment: Alignment.center,
              ),
            ),

When I'm running the app I get this message in the run console:

[VERBOSE-2:ui_dart_state.cc(157)] Unhandled Exception: Unable to load asset: checkmarkone.flr
#0      PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
<asynchronous suspension>
#1      FlareCacheAsset.load (package:flare_flutter/flare_cache_asset.dart:31:20)
#2      Cache.getAsset (package:flare_flutter/cache.dart:56:15)
#3      cachedActor (package:flare_flutter/flare_cache.dart:35:16)
#4      FlareRenderBox.loadFlare (package:flare_flutter/flare_render_box.dart:322:35)
#5      FlareActorRenderObject.coldLoad (package:flare_flutter/flare_actor.dart:322:20)
#6      FlareRenderBox.load (package:flare_flutter/flare_render_box.dart:272:7)
#7      FlareRenderBox.attach (package:flare_flutter/flare_render_box.dart:115:7)
#8      AbstractNode.adoptChild (package:flutter/src/foundation/node.dart:132:13)
#9      RenderObject.adoptChild (package:flutter/src/rendering/object.dart:1238:11)
#10     RenderObjectWithChildMixin.child= (package:flutter/src/rendering/object.dart:2905:7)<…>

I appreciate all suggestions. Thanks

score 0 · Answer 1 · answered Dec 31 '19 at 17:51

Make sure you have checkmarkone.flr file in your assets folder, then add it to your pubspec.yaml file

flutter:
  assets:
    - checkmarkone.flr

and then, run flutter packages get command to update the dependencies. Finally, do a cold restart of your project

score 0 · Answer 2 · answered Dec 31 '19 at 17:53

Please check your pubspec.yaml file and ensure that the file checkmarkone.flr has been added/loaded correctly.

Eg.

pubspec.yaml

... (more on top)
# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
   - assets/checkmarkone.flr # Add it here
... (more on bottom)

Now wait for the flutter task (updating packages) to finish, then try loading the Flare animation using the asset path added above in your screen / widget via hot restart.

widget.dart


Container(
  height: 300.0,
  width: 300.0,
  child: FlareActor('assets/checkmarkone.flr',
      fit: BoxFit.contain,
      alignment: Alignment.center,
  ),
),

Further reading

https://flutter.dev/docs/development/ui/assets-and-images

Exporting Flare animation

2 Answers2