Build an Animated App with Rive and Flutter - Episode 1

Welcome to our tutorial series on how to build an animated app with Rive and Flutter! In this series, we will be focusing entirely on creating stunning animations that will make your app stand out.
✅ Starting Project: cutt.ly/90yuHCA
🔥 Source Code: cutt.ly/b14ZAuh
Build it using SwiftUI: cutt.ly/A0Qz7U5
In the first video, we will start by setting up a Flutter project and integrating Rive into it. Then, we will use Rive's powerful design tools to create beautiful background animations using shapes and blur. We will also create a cool button animation. Next, we will focus on adding animated icons to the bottom navigation bar, which will really make your app design pop.
By the end of this series, you will have a solid understanding of how to use Rive and Flutter together to create stunning, animated apps that are both visually appealing and functional. So if you're a mobile developer looking to add some flair to your apps, or just want to learn more about animating with Rive and Flutter, be sure to check out this tutorial series!
► Nominate as a Github Star: bit.ly/3dLXFWJ (@abuanwar072)
►For the 3D intro, I'm using Rotato: bit.ly/3heGagj
►Support Us: / theflutterway
► Social Media
GitHub: github.com/abuanwar072
Twitter: / theflutterway
Twitter: / abuanwar072 (my personal profile)
Facebook: / theflutterway
► Timestamps
0:00 Intro
Thanks for watching!
Make sure to like + Subscribe For More!

[@esperaawo2437]

Can't wait for the second episode ! I enjoyed it a lot. Thank you !

[@GoodlyRogue]

Damn. I thought it looked so much like one of Design + Code's designs. I'm so happy this video exists. I wanted them to try Flutter for so long.

[@fatihyilmazz]

master please continue these animations got me excited :)

[@frankmungai7765]

This is so amazing, the UI is uniquely awesome ❣️🔥 many thanks to you for sharing this 😊

[@TheFlutterWay]

My pleasure 😊

[@youcefmoulla1828]

@@TheFlutterWay not your work 👎

[@amorenog5]

Amazing, already waiting for episode 2.

[@BO-nn9up]

Thank you for your kindness! I am sooo excited to use this animation for my current project! You are my savior!!

[@TheFlutterWay]

You're very welcome!

[@Williamrozier3191]

The project i was looking for!!

[@LeTranTrongNghia]

Fantastic video, I can't wait to see the next episode. Thank you so much for sharing this

[@TheFlutterWay]

You are so welcome!

[@hiepinh6153]

Awesome. Thanks a lot.!👍👍

[@KaranveerSingh97]

This was absolutely sick. Amazing work!

[@TheFlutterWay]

Thank you! Cheers!

[@user-nl7it2xm1x]

I really love it, amazing

[@amirkhosro428]

That's great. Thanks for sharing that🌹

[@KhanhHoang-fi6yh]

So amazing, thank you. I have 1 question, could we run the rive animation by using isolate ?

[@akshattamrakar9071]

Amazing, we need more videos like this.

[@TheFlutterWay]

More to come!

[@akshattamrakar9071]

@@TheFlutterWay 🆒😎🆒

[@justmusic9959]

Have waited for this =))

[@TheFlutterWay]

More to come!

[@uminhtetoo]

Thank you so much for sharing. You are amazing, Sir.

[@TheFlutterWay]

You are very welcome

[@vishwaskotegar5248]

This is amazing ... beautifully shown...

[@TheFlutterWay]

Thanks for watching!

[@rantungsampouw9099]

Amazing. Thank you 👍

[@TheFlutterWay]

Glad you liked it!

[@ishaqsaeed]

I really need this so much thank you

[@TheFlutterWay]

Glad you like it!

[@toBeABetterTranslator]

COOL!

[@delarrampoudel4561]

amazing ui

[@okiantech9077]

I love your videos

[@parthpatel08]

which extension you have used for dart code tree map on vs code?

[@andrealbernaz]

Thank you so much for sharing. You are amazing! From Brasil

[@TheFlutterWay]

Wow, thank you!

[@S-Lomar]

Well done 🥰👍👍❤️💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕

[@shalikaashan7924]

I’m here after the devfest 2022. amazing animation. 😊

[@TheFlutterWay]

Glad you like it!

[@Pedro5antos_]

AWESOME

[@pow33rz99]

Nice video!! I need more

[@TheFlutterWay]

More to come!

[@MehmetTUYGUN]

This is amazing. Many thanks. Can I find another icon type for the user name, phone etc., you used for e-mail and password, in SVG format?

[@Hazara_boy]

Thank u man, 👍

[@TheFlutterWay]

Any time!

[@ojangolejordan4819]

nice video. how did you do the voice over?

[@mohilbansal]

Bro can u please tell how do you get the assets like these shapes and other images. It is really very difficult for me to find these cool shapes and images. Please tell me bro please

[@saidaydn5159]

ı so like that. Thanks for your effort Mrs.

[@TheFlutterWay]

You are welcome!

[@peterbk364]

❤️❤️🔥

[@amimohamedleminebereka2131]

Merci beaucoup

[@ricetech1396]

Please what Mac do you use and the specs

[@MehmetTUYGUN]

Teşekkürler.

[@vaibhavbilwal5903]

how your vscode files are colored ?? can you share trick for that !!

[@Muhammad-AnasKhan]

*Quick question regarding flutter issue*🤓 I am a beginner in flutter, what I want to do is to disable / hide / override the status bar (top) and navigation bar(bottom) in the mobile app permanently!❎ I have disabled the back key of mobile with 'WillPopScope' but couldn't found any way to disable the rest of mobile controls. also used the 'setEnabledSystemUIMode' but it don't hide permanently Can you tell me that how can we achieve this functionality in flutter

[@HanuuniyeOfficialChannel]

Sir. How to get first setup of your project

[@Justin_Roy]

Rive Tutorial Please 🙂

[@faheemahmad3957]

are you using a dubbing software?

[@MoinooTayara]

where i can find an animation image?

[@ismaelperezmesa524]

Hi everyone!! Excellent video!! I have a performance problem when I load a Rive Animation in my flutter app, I'm using an iphone 15 pro device and when it loads the animation the cpu works at 80% and makes the device heat up, I'm already using skia as a rendering engine. This happens even without having any simple svg shape in the artboard (in the rive side), just having a timeline animation even empty is enough for get this behavior on the device. How can I fix this? Any Suggestions ? Thanks a lot.

[@Yellomellowil]

These all are flutter native can we make design here and import them on Android studio ????

[@MaGeGoBLiN]

i see you directly use int values on your sizes, doesn't it make layout differences between different sized devices ?

[@TheFlutterWay]

On phones there is no problem but if you try it on Tab.

[@masoud_or_whatever]

Yooooooooooo hooooooooooo amazing bro

[@TheFlutterWay]

Glad you like it!

[@casp9957]

Is the code MIT Licensced?

[@abassfadeil6225]

How do I solve the size problem? When using the Rive library, the application size increases by 10 megabytes

[@kiengnguyenhuynh800]

Hi bro. I don't know what .riv files are. Can I convert from video to .riv? Is there a website or tool where I can do that?

[@sivakanthreddy1778]

How to implement seek functionality or seek operation on the stream data in flutter? And the stream data is built by using List.

[@TheFlutterWay]

To implement seek functionality or seek operation on stream data in flutter, you can use the `StreamController` class and its`add` and `addError` methods.

[@AlexMarton]

Amazing work!! But not worth it as Rive use watermark just for using your own icons.

[@ApexNotLegend-dg6se]

Can i use the design

[@arunkashyap3527]

bro why background music voiceover is good

[@moazamijaz4404]

Rive tutorial please

[@Shoptisfy]

Is this animation will make app slow ?

[@TheFlutterWay]

I don't think so

[@masterpiece2436]

if anyone has problem with lib folder go the yaml file and change the sdk version

[@samldev]

We are all lookin' for adventure.

[@azamatzhanaliev713]

👍

[@TheFlutterWay]

Glad you like it!

[@RohanKumar-zl6wf]

when will you upload next episode?

[@TheFlutterWay]

This Friday! Get ready!

[@RohanKumar-zl6wf]

@@TheFlutterWay 😃😃😄😄

[@amirhosseinrajaizadeh2232]

Hey Thanks it looks good But that doesn't interested me😅

[@Beautifulglobe130]

Hi l want your help

[@TheFlutterWay]

How can I help you?

[@Beautifulglobe130]

You send me code for 5 screens how l am send the pic of screens

[@naxcall]

Rive or lottie?

[@TheFlutterWay]

Rive

[@youcefmoulla1828]

Shame on you, stealing work from other people and upload it without reference to them as it was your's, this app is from @designcode free course for anyone who is interested