I'm working on a Flutter app and want to add a Rive animation within a Column widget. According to the Rive documentation, animations typically need to be placed inside a Scaffold. However, my app's structure requires embedding the animation directly inside a Column. I haven't found specific guidance on achieving this in the documentation or through my searches.
Here's an example provided by the Rive team that uses a Scaffold:
void main() {
runApp(MaterialApp(home: SimpleAnimation()));
}
class SimpleAnimation extends StatelessWidget {
const SimpleAnimation({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: RiveAnimation.network(
'https://cdn.rive.app/animations/vehicles.riv',
),
),
);
}
}
> To play an animation from an asset bundle, use:
RiveAnimation.asset('assets/truck.riv');
This is my code, to give you some clues about the problem (dart code):
class WeSentYouAnEmail extends StatefulWidget {
const WeSentYouAnEmail({Key? key}) : super(key: key);
@override
State<WeSentYouAnEmail> createState() => _WeSentYouAnEmailState();
}
class _WeSentYouAnEmailState extends State<WeSentYouAnEmail> {
@override
Widget build(BuildContext context) {
return BackdropFilter(
filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
child: Scaffold(
backgroundColor: Colors.transparent,
body: TextSelectionTheme(
data: TextSelectionTheme.of(context).copyWith(
selectionColor: Color(0xffD7D7D7),
cursorColor: Color(0xff3B3B3B),
selectionHandleColor: Color(0xffD7D7D7),
),
child: Center(
child: Padding(
padding: const EdgeInsets.all(32.0),
child: Container(
height: double.maxFinite,
width: 600,
decoration: BoxDecoration(
color: Color(0xffF6F6F6), // background white color: Color(0xffF6F6F6),
borderRadius: BorderRadius.all(
Radius.circular(0.0),
),
),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RichText(
text: TextSpan(
style: GoogleFonts.questrial(),
children: [
WidgetSpan(
child: Icon(FontAwesomeIcons.checkDouble,
size: 40,
color: Color(0xffD7D7D7)),
),
],
),
),
RichText(
text: TextSpan(
style: GoogleFonts.questrial(),
children: [
WidgetSpan(
child: GestureDetector(
onTap: () {
showDialog(
context: context,
barrierColor: Colors.transparent,
builder: (ctx) => HomePagePomodoroTimer());
},
child: Icon(FontAwesomeIcons.squareXmark,
size: 40,
color: Color(0xff3B3B3B),),
),
),
],
),
),
],
),
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
decoration: BoxDecoration(
color: Color(0xffF4CFDD),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(96.0, 30, 96.0, 30),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"We send you an Email",
style: TextStyle(
fontSize: 20,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Color(0xff3B3B3B),
),
),
],
),
const SizedBox(height: 120,),
const SizedBox(height: 90,),
Divider(color: Color(0xff3B3B3B)),
const SizedBox(height: 15,),
const Center(
child: Text(
"Please, check your Email inbox",
style: TextStyle(
fontSize: 20,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
color: Color(0xff3B3B3B),
),
),
),
const SizedBox(height: 15,),
],
),
),
),
Container(
decoration: BoxDecoration(
color: Color(0xffF4CFDD),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(600.0, 30, 600.0, 200.0),
),
),
],
)
],
),
),
),
),
),
),
),
);
}
}
Despite following the documentation and experimenting with different approaches, I'm unsure how to properly integrate a Rive animation in this context. How can I embed a Rive animation within a Flutter Column widget without compromising the app's layout or functionality?
Thank you for your help!
Provide constraints/size and it will work. You can use LayoutBuilder on top level widget or MediaQuery to get the constraints, wrap your rive widget with SizedBox and provide height. If it wasn't inside scrollable widget, Expanded would better option to get available space.