flutteranimationdartflare

flare_flutter animation display issues


The issue is the animation can't be displayed but only image can be shown. There is only part of code about BottomAnimeLoader right here. So please help me figure what's happen why only the static image is right here. (using flutter framework and dart language)

the animation is static

import 'package:flare_flutter/flare_actor.dart';
import 'package:flutter/material.dart';

class BottomAnimeLoader extends StatefulWidget {
  @override
  _BottomAnimeLoaderState createState() => _BottomAnimeLoaderState();
}

class _BottomAnimeLoaderState extends State<BottomAnimeLoader> {
  String _animationName = "new";
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Expanded(
              child: FlareActor(
            "assets/flr/success.flr",
            fit: BoxFit.contain,
            alignment: Alignment.center,
            animation: _animationName,
          ))
        ],
      ),
    );
  }
}

Solution

  • I use the official example's flr file to simulate this case because I do not have your flr file
    If you have wrong _animationName name, then it will become static image
    In official example, the _animationName is idle, if I change it to new it will become static image
    Please correct your _animationName, for example the following https://rive.app/a/pollux/files/flare/success-check _animationName is Untitled

    enter image description here

    working demo

    enter image description here

    full test code

    import 'package:flutter/material.dart';
    import 'package:flare_flutter/flare_actor.dart';
    
    class BottomAnimeLoader extends StatefulWidget {
      @override
      _BottomAnimeLoaderState createState() => _BottomAnimeLoaderState();
    }
    
    class _BottomAnimeLoaderState extends State<BottomAnimeLoader> {
      String _animationName = "success";
      @override
      Widget build(BuildContext context) {
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              Expanded(
                  child: FlareActor(
                "assets/flr/success.flr",
                fit: BoxFit.contain,
                alignment: Alignment.center,
                animation: _animationName,
              ))
            ],
          ),
        );
      }
    }
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          home: BottomAnimeLoader(),
        );
      }
    }