rive-flutter does not respect the specified ‘Fills and Strokes’ order

[k1zerX]

Description

It seems that rive-flutter always draws stroke atop of fill
I've attached screenshots with semitransparent fill, so you can see clearly see the difference
With an opaque fill the button looked like its stroke was twice as thick as in the Rive editor, which is quite difficult to notice, but it felt like something was wrong

Steps To Reproduce

Steps to reproduce the behavior:

1. Set up a stroke with a fill atop of it for rectangle in Rive editor
2. Run Flutter app with this component
3. Compare thickness of the rendered stroke in Rive editor and Flutter app
4. In Rive editor you only see the outer part of the stroke, because fill covers the inner part. In Flutter app you see the entire stroke, because it is rendered atop of fill

Source .riv/.rev file

test.rev.zip

Expected behavior

rive-flutter draws fills and strokes in the specified order

Screenshots

Here you can see the stroke with a semitransparent fill atop in Rive editor (the stroke is enlarged for clarity)

And how it actually looks in Flutter app

Device & Versions

• Device: iOS Simulator
• OS: iOS 17.5
• Flutter Version:

Flutter 3.27.1 • channel stable • https://github.com/flutter/flutter
Framework • revision 17025dd882 (9 days ago) • 2024-12-17 03:23:09 +0900
Engine • revision cb4b5fff73
Tools • Dart 3.6.0 • DevTools 2.40.2

[HayesGordon]

@k1zerX thanks for reporting, we'll get this resolved soon

[HayesGordon]

This is fixed in 0.14.0-dev.1

You can read more here:

• Migration Guide
• Rive Native for Flutter
• Rive Flutter Docs

If you're having issues updating to the latest, please open a new issue with reproducible steps.