2d-inc / Flare-Flutter

Load and get full control of your Rive files in a Flutter project using this library.
https://rive.app/
MIT License
2.55k stars 469 forks source link

Flare animation inside SingleChildScrollView #194

Closed kasyrm closed 4 years ago

kasyrm commented 4 years ago

Is it possible to use flare animation inside SingleChildScrollView? It works fine if I put it in a Container inside a Scaffold. When the widget hierarchy is more complex it starts to break, especially after adding SingleChildScrollView above the column that has FlareActor as one of its children.

The following assertion was thrown during performResize():
FlareActorRenderObject object was given an infinite size during layout.

This probably means that it is a render object that tries to be as big as possible, but it was put inside another render object that allows its children to pick their own size.
The nearest ancestor providing an unbounded width constraint is: RenderFlex#0d557 relayoutBoundary=up5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
The constraints that applied to the FlareActorRenderObject were: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=30.0)
The exact size it was given was: Size(Infinity, 30.0)

See https://flutter.dev/docs/development/ui/layout/box-constraints for more information.

User-created ancestor of the error-causing widget was
    Row 
lib/…/screens/feed_screen.dart:235
When the exception was thrown, this was the stack
#0      RenderBox.debugAssertDoesMeetConstraints.<anonymous closure> 
package:flutter/…/rendering/box.dart:1953
#1      RenderBox.debugAssertDoesMeetConstraints 
package:flutter/…/rendering/box.dart:2021
#2      RenderBox.size=.<anonymous closure> 
package:flutter/…/rendering/box.dart:1738
#3      RenderBox.size= 
package:flutter/…/rendering/box.dart:1740
#4      FlareRenderBox.performResize 
package:flare_flutter/flare_render_box.dart:101
...
The following RenderObject was being processed when the exception was fired: FlareActorRenderObject#6dfe0 NEEDS-LAYOUT NEEDS-PAINT
RenderObject: FlareActorRenderObject#6dfe0 NEEDS-LAYOUT NEEDS-PAINT
    parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
    constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=30.0)
    size: Size(Infinity, 30.0)
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
FlareActorRenderObject object was given an infinite size during layout.
User-created ancestor of the error-causing widget was
    Row 
lib/…/screens/feed_screen.dart:235
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
A RenderFlex overflowed by Infinity pixels on the right.
User-created ancestor of the error-causing widget was
    Container 
lib/…/screens/feed_screen.dart:232

I have tried putting it inside a SizedBox or Container with specified size but it didn't have a ny effect.

///

I found a solution: fit had to be set to BoxFit.none and FlareActor had to be in a Container with assigned size.