Rendering issues with Asus tab

[miguelcmedeiros]

Rendering of all flare animations are broken in Asus tab:

This issue was not seen in other devices (iOS or Android).

Device: Asus P027 tablet
OS: Android 7
Flutter: 1.10.7 (beta)
flare_flutter: 1.6.4
flare_dart: 2.2.3

Is there other information that could be useful to troubleshoot this issue?

[luigi-rosso]

Hey @miguelcmedeiros, could you try this on a different Flutter channel and see if the results are different? Similarly, does debug/release make a difference? We've seen issues like this before, usually when they're device-specific they tend to be something out of Flare's reach. We may need to bubble this up to the Flutter repository.

[miguelcmedeiros]

Hi @luigi-rosso, I confirmed that the issue is reproducible in debug and release mode using flutter master channel.

One thing to add to the details is that the creation of the flare animation used in this case, involved importing and svg (what should look like a light build in the screenshot :)). When importing the svg to flare editor, it did not look the same (didn't handle well gradients) and our designer fixed it directly in flare. For most devices the animation runs without flaws.

I tried to reproduce this issue with other flare files (found in 2Dimensions page), but failed to do so...

Aside from the issues that flutter seems to have in rendering this animation on a specific device, could it be that the svg importer in flare also has some issues?

[miguelcmedeiros]

We also tried to import one of our Lottie animations to flare editor and it looked fine in there. But when we export the flr file and play it on a flutter app, it misses most of the gradients.

[miguelcmedeiros]

It seems that this device can't also render properly the flare animations from Flutter Developer Quest:

[luigi-rosso]

Thanks for all the info! It sounds like gradients in particular are having problems on this device. I wonder if it's a graphics driver issue on that specific device.

There are definitely some SVG edge cases that we don't handle properly in the importer (basically an SVG to Flare converter). But once it looks one way in Flare, it should look the same in Flutter. Are you seeing the issue with the SVG and Lottie imported gradients (once fixed) only with this Asus tablet or on other devices too?

Which Asus tablet is it? We can try to grab one for testing here...Just in case you have two of them, is it reproducible on both?

[miguelcmedeiros]

I dumped so much information yesterday that I didn't structure it properly...
So, we found the issue on a Asus P027 running on Android 7.

Let me try to summarise the issues found mentioned in the previous comments:

1. Importing an SVG when creating a flare animation

• The imported SVG asset misses all kind of gradients in flare editor (our designer fixed this in flare editor)
• The export to flutter of the reworked animation works fine in all devices, except Asus P027 (might be more...)

2. Importing Lottie when creating a flare animation

• The imported Lottie asset looks perfect in flare editor (including animation)
• The export to flutter misses all kind of gradients on all devices

[miguelcmedeiros]

@luigi-rosso, I tried the latest versions of flare (flare_dart: 2.2.5 and flare_flutter: 1.7.3) and issue #2 in the comment above (created from Lottie) is now solved for us. Big thanks for that!!!

Issue #1 is still the same.

[luigi-rosso]

Great, glad to hear it!

Regarding the first issue, in the Developer Quest, most of those artifacts seem to be coming from elements that are drawn texture mapped (canvas.drawVertices). Is the lightbulb created with just vector shapes or does it also have some images?

[miguelcmedeiros]

The lightbulb is coming from an svg