Flare-flutter: FlareActor flashing last frame when creating dynamically

Created on 25 Apr 2019  路  10Comments  路  Source: 2d-inc/Flare-Flutter

Hi,

When creating a FlareActor "dynamically" I'm seeing at the beginning a brief flash of what I guess is the last frame of the animation. This does not happen when using FlareActor in a normal way.

This works:

@override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          SizedBox(
            width: 300,
            height: 300,
            child: FlareActor(
              'animations/success.flr',
              animation: 'Untitled',
              snapToEnd: false,
            ),
          )
        ],
      ),
    );
  }

This doesn't work:

  @override
  Widget build(BuildContext context) {
    var children = <Widget>[];

    if (_showAnimation) {
      children.add(SizedBox(
        width: 300,
        height: 300,
        child: FlareActor(
          'animations/success.flr',
          animation: 'Untitled',
          snapToEnd: false,
        ),
      ));
    }

    return Container(
      child: Column(
        children: children,
      ),
    );
  }

I'm using 1.5.0, also happens with 1.3.13.

To replicate just use this Flare: https://www.2dimensions.com/a/pollux/files/flare/success-check

And this example code:

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _showAnimation = false;

  @override
  void initState() {
    Future.delayed(Duration(seconds: 2), () {
      setState(() {
        _showAnimation = true;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var children = <Widget>[];

    if (_showAnimation) {
      children.add(SizedBox(
        width: 300,
        height: 300,
        child: FlareActor(
          'animations/success.flr',
          animation: 'Untitled',
          snapToEnd: false,
        ),
      ));
    }

    return Container(
      child: Column(
        children: children,
      ),
    );
  }
}

All 10 comments

Got the same issue, also had it on 1.3.12, please any response?

We'll take a look soon!

Same here,
But I think it is a cover image.

Also getting this, makes the whole animation look jagged

Any progress on that one? We just have all flare code commented out cause of that. :(

We've made numerous updates, please test with dev or master channel of both Flare and Flutter. On master, the latest looks like this:
https://drive.google.com/file/d/17Vst8-y33zMYfx1wSXjYhybsEYe1Gy9l/view?usp=sharing

I believe the flashing has been fixed.

Fixed for me, thank you!

When do you think we could see these changes on pub?

I've been using this workaround on pub: set the actor's opacity to 0 in design mode, then key the actor's opacity to 1 at the start of each animation. The "flash" will presumably still occur but it will be invisible.

The changes are now on pub with version 1.5.1.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

lukepighetti picture lukepighetti  路  5Comments

rohan20 picture rohan20  路  6Comments

Nijinsha picture Nijinsha  路  7Comments

izzatzr picture izzatzr  路  4Comments

yjoo9317 picture yjoo9317  路  5Comments