Flare-flutter: Objects outside the ArtBoard are visible

[optimygmbh]

Is it a setting in Flare or Flutter, that drawing elements only are visible inside the ArtBoard and not outside?

For example I'm having an animation with clouds flying from left to right. They start at left outside the ArtBoard and end right outside of the ArtBoard. But I can see the clouds "waiting" in the Flutter App. And how you can see the sun is visible as well outside the ArtBoard:

[umberto-sonnino]

Did you enable "Clip Contents" for the Artboard in your Flare file?
There's an option for that in the Selection Panel:

[optimygmbh]

Yes I enabled "Clip Contents" in the Artboard of my Flare file.

Now I thought maybe I overwrite it in Flutter in the Flutter Actor Artboard. But there clipContents is set to true as well:

This is my Flare file: https://www.2dimensions.com/a/optimygmbh/files/flare/hollywood/embed.

[jcairo]

Any updates on this? I have the exact same problem.

Artboard is 100 x 100 in Flare

Artboard appearance in Flutter at the end of the animation (contains nothing)

Appearance in Flutter at end of animation (portion of object that has been animated off the artboard is still visible)

Flare file is set to 'Clip contents'

Actor in Flutter:

Container(
        decoration: BoxDecoration(border: Border.all(color: Colors.black)),
        height: 100,
        width: 100,
        child: FlatButton(
          child: FlareActor(
            "assets/animations/anim.flr",
            fit: BoxFit.fill,
            animation: _animationName,
            sizeFromArtboard: true,
          ),
...)

Also tried Boxfit.contain with same results

Flare File Link

[umberto-sonnino]

Hey @jcairo, I've tested your file locally and I don't see the issue on my side.
Could you share a more complete example with your widget layout where this is happening?

[jcairo]

Hey Umberto. Not sure how much you want here. I've added the code for the widget where the problem is. I can also provide you with a Flutter repo if that is easier?

class PlayButton extends StatefulWidget {
  final Player player;
  const PlayButton({
    Key key,
    this.player,
  }) : super(key: key);

  @override
  _PlayButtonState createState() => _PlayButtonState();
}

class _PlayButtonState extends State<PlayButton> with TickerProviderStateMixin {
  String _animationName = "PlayToPause";
  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(border: Border.all(color: Colors.black)),
        height: 100,
        width: 100,
        child: FlatButton(
          child: FlareActor(
            "assets/animations/anim.flr",
            fit: BoxFit.fill,
            animation: _animationName,
            sizeFromArtboard: true,
          ),
          onPressed: () {
            var tempName;
            if (_animationName == "PlayToPause") {
               tempName = "PauseToPlay";
            } else {
              tempName = "PlayToPause";
            }

            setState(() {
              _animationName = tempName;
            });
          },
        ));

    return IconButton(
      onPressed: widget.player.fileIsLoaded ? () => widget.player.play() : null,
      icon: Icon(
        FontAwesomeIcons.playCircle,
        color: Colors.black,
      ),
      iconSize: kIconSize,
    );
  }
}

[umberto-sonnino]

With your file above and this configuration, everything still looks fine on my side.

[luigi-rosso]

It looks like the Flare runtime may not be applying the final frame of the animation. Is the behavior consistent amongst re-runs or is it always at a slightly different spot? Does the behavior change in release/debug mode?

[jcairo]

Hey Luigi,

I've now tried in release mode and i'm still seeing the same problem.

I don't think it's just the final frame. Using this
animation I'm seeing way outside the artboard.

Artboard in Flare shows:

Flare actor in Flutter shows:

Same code as above but with boxfit.contain

class PlayButton extends StatefulWidget {
  final Player player;
  const PlayButton({
    Key key,
    this.player,
  }) : super(key: key);

  @override
  _PlayButtonState createState() => _PlayButtonState();
}

class _PlayButtonState extends State<PlayButton> with TickerProviderStateMixin {
  String _animationName = "PlayToPause";
  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(border: Border.all(color: Colors.black)),
        height: 100,
        width: 100,
        child: FlatButton(
          child: FlareActor(
            "assets/animations/PlayPause.flr",
            fit: BoxFit.contain,
            animation: _animationName,
            sizeFromArtboard: true,
          ),
          onPressed: () {
            var tempName;
            if (_animationName == "PlayToPause") {
               tempName = "PauseToPlay";
            } else {
              tempName = "PlayToPause";
            }

            setState(() {
              _animationName = tempName;
            });
          },
        ));
  }
}

[umberto-sonnino]

Hey @jcairo, thanks a lot for your last example! We were finally able to reproduce the problem and found the bug.

We published a new version of the package which should now behave correctly; you can find it here!

[luigi-rosso]

TL;DR: Update your pubspec flare_flutter: ^1.5.7! 😃

[jcairo]

Awesome! Great tool you have here guys! Thanks for being so responsive.