I've been having quite a bit of issues lately with columns and rows in Flutter, using Rive animations. For instance, I have a column, and one of its children is a Rive animation. Via setting the flex of the main axis or by specifying a height, I can constrain the height of the rive animation in the column, and the width of the rive animation matches the aspect ratio of the animation, fitting the rive animation into the column.
The problem I'm encountering comes when I try to fit a border around it, by putting this rive file into a container that has a border defined for it. The problem is that the container's border will expand to the full width of the column out the left and right, leaving giant blocks of white to the left and right instead of a thin border than runs around the outside of it.
Here's an example of the code I'd use to do this:
Container(
height: constraints.maxHeight * 0.4,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
color: Colors.white,
border: Border.all(
color: Colors.blue,
width: 2,
),
),
padding: EdgeInsets.all(4),
margin: EdgeInsets.all(4),
child: //rive file goes here
),
To sum up: How do you make it so that the container hugs around the Rive animation's size, rather than expanding its width to the full availible area?
I'm definitely still a Flutter beginner, and I'd appreciate any perspective you could give!