0

I have a simple Stack with a Card, and on top of it a Flare animation. I want the animation to fit the width of the card and align to the bottom of the card. As it is, it is only covering roughly a third of the card, and is pretty much in the middle. Any ideas how I can scale the animation to cover the width of the card and align the animation?

I tried fit: Boxfit.cover, fit: BoxFit.fitWidth, etc but it's not changing anything.

Here is my code:

Stack(
          children: <Widget>[
            Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(24.0),
              ),
              color: Colors.white,
              elevation: 4.0,
              shadowColor: Colors.grey,
              child: Column(
                children: <Widget>[
                  Text(
                    'DASHBOARD',
                    style: TextStyle(
                      fontSize: 20.0,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  StepProgressIndicator(
                    totalSteps: 14,
                    currentStep: 10,
                    size: 20,
                    selectedColor: Colors.orange,
                    unselectedColor: Colors.green,
                    roundedEdges: Radius.circular(10),
                  ),
                ],
              ),
            ),
            FlareActor(
              'assets/animations/liquid_animation.flr',
              fit: BoxFit.cover,
              animation: liquidAnimation,
            ),
          ],
        ),

enter image description here

4

0 回答 0