Flare-flutter: Use multiple ArtBoards

[bmatheus91]

On Flare online tool i can work using multiple Artboards in a single file. But how can i use them on Flutter?

I tried following #10 Fundamentals to Flare, but failed to understand how i could use multiple artboards

[luigi-rosso]

There isn't a way to switch the main artboard through Flutter yet. We will support this soon and show some more advanced features like embedding one artboard into another.

What is it that you are trying to do, we can perhaps give you the option to specify the name of the artboard to display in the FlareActor widget.

[bmatheus91]

What is it that you are trying to do, we can perhaps give you the option to specify the name of the artboard to display in the FlareActor widget.

I'm trying to change a pulsing button whenever my state changes. This pulsing button changes its SVG Icon, color and Animation.

• Already tried to make one artboard to rule them all. Changing in each animation SVG Icon and color. Not very good looking.
• I've seen on Flare manual that you can use one file with multiple artboards so i created a file (current one), with 5 ArtBoards (each one with a specific SVG and Animation).

[tafelito]

when working on a bottom nav icons animations, I could see using different artboards for every single icon instead of creating a different flare file.

Will this be a correct use case?

Also, is there any best practices on what the size of the artboard should be? Does it have any implications at all? For example, if I have an artboard of 1024x1024 and an icon of 20x20, should I make the artboard 20x20 as well? I usually try to make the images greater so I can see them better when I zoom in, as the zoom only allows to go up to 800%

[luigi-rosso]

That's a good use case!

The size of the artboard matters as it's used as the bounds of the content when it's sized to fit at runtime. If you tell the widget to use the intrinsic size of the artboard, it'll also size the widget to the dimensions of the selected artboard. We now support using different artboards. You can provide the name of the artboard to the FlutterActor widget.

[tafelito]

OK that's great to hear. So if you don't use the intrinsic size, it will just use the size of the container?

One issue I found when resizing the artboard when already have an animation is that I have to re align the images and then the animation breaks, because the translation is not relative

---

From: Luigi Rosso [e-mail]
Sent: Thursday, August 8, 2019 18:58
To: 2d-inc/Flare-Flutter
Cc: tafelito; Manual
Subject: Re: [2d-inc/Flare-Flutter] Use multiple ArtBoards (#71)

That's a good use case!

The size of the artboard matters as it's used as the bounds of the content when it's sized to fit at runtime. If you tell the widget to use the intrinsic size of the artboardhttps://github.com/2d-inc/Flare-Flutter/blob/b5e86e90bf7b0be156d947a320a0e8970b1b0233/flare_flutter/lib/flare_actor.dart#L59, it'll also size the widget to the dimensions of the selected artboard. We now support using different artboards. You can provide the name of the artboardhttps://github.com/2d-inc/Flare-Flutter/blob/b5e86e90bf7b0be156d947a320a0e8970b1b0233/flare_flutter/lib/flare_actor.dart#L19 to the FlutterActor widget.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHubhttps://github.com/2d-inc/Flare-Flutter/issues/71?email_source=notifications&email_token=ABNSNFAH4IKHMVIAM6SWFJLQDSQK5A5CNFSM4HFGF6V2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD35EBLQ#issuecomment-519717038, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ABNSNFEF6C6GDAJP5TL2PELQDSQK5ANCNFSM4HFGF6VQ.

[luigi-rosso]

You can also translate the content on the art board by tweaking the origin. 0, 0 places the origin on the top right, 1, 1 bottom left, 0.5, 0.5 center, etc. This will affect all transformations and animations.

[tafelito]

what about copying one shape with animations from one artboard to another? is that possible?

[gctommy]

We now support using different artboards. You can provide the name of the artboard to the FlutterActor widget.

Having trouble with this, @luigi-rosso could you provide an example of what to do with the controllers when there are 2 or more artboards?

For example, I currently have one .flr file with two artboards containing one animation each and both are non-looping animations, calling the widgets like this:

FlareActor('assets/my_animation.flr',
    isPaused: _isPaused,
    fit: BoxFit.contain,
    alignment: Alignment.center,
    animation: 'animation1',
    artboard: 'Artboard1',
    controller: this,
),
FlareActor('assets/my_animation.flr',
    isPaused: _isPaused,
    fit: BoxFit.contain,
    alignment: Alignment.center,
    animation: 'animation2',
    artboard: 'Artboard2',
    controller: this,
),

This will cause a duration null error since both widgets are referencing the same controller. If I omit the controllers, then the animations only run once and does not loop. If I edit the .flr file animations to loop or provide my own separate FlareControls for the controller, then the advance() function isn't called at all? Please help, thanks.