How to expand Rive animation in Flutter?

Question

I want to make rive animation background and feel whole screen. Changing height and width to MediaQuery... does not work. It changes size but proportion stays the same

This is how rive widget looks like for me:

Center(
            child: _riveArtboard == null
                ? const SizedBox()
                : Rive(artboard: _riveArtboard),
          ),

thank you in advance

edit: SOLUTION

Container(
          height: h,
          width: w,
          child: Center(
            child: _riveArtboard == null
                ? const SizedBox()
                : Rive(fit: BoxFit.fill, artboard: _riveArtboard),
          ),
        ),

@helloitsme3 can you please post your answer on the thread? You can mark your own answers as accepted and help other people with this issue :) — Ibrahim Yildirim, Oct 03 '21 at 01:42
@IbrahimYildirim I edited question, there is solution in description :) — helloitsme3, Oct 03 '21 at 06:56

score 1 · Answer 1 · answered Dec 11 '21 at 01:32

Just adding height and width to his parent Container and add a fit(cover, fill, whatever you need) to your Rive widget

 Container(
           width: w,
           height: h,
           child: Rive(
               fit: BoxFit.cover,
               artboard: ctrl.globalArtboard!,
          ),
    ),

How to expand Rive animation in Flutter?

1 Answers1