Creating an Animated Sidebar Menu in Flutter with Rive - Episode 5

🎬 Episode 1: • Build an Animated App ...
🎬 Episode 2: • Build an Animated App ...
🎬 Episode 3: • Build an Animated App ...
🎬 Episode 4: • Animated Bottom Naviga...
In this episode, I'll demonstrate how to create an animated sidebar in Flutter using Rive Animated Icons. Thank you for following the series, and please let me know your thoughts.
✅ Episode 4 code: cutt.ly/Q2LIIde
🔥 Source Code: cutt.ly/b14ZAuh
►For the 3D intro, I'm using Rotato: bit.ly/3heGagj
►Support Us: / theflutterway
► Social Media
GitHub: github.com/abu...
Twitter: / theflutterway
Twitter: / abuanwar072 (my personal profile)
Facebook: / theflutterway
► Timestamps
0:00 Intro
Thanks for watching!
Make sure to like + Subscribe For More!

[@TheFlutterWay]

FlutterShop - Premium shop UI kit Source Code👉 cutt.ly/rFOscFo

[@user-rh1sw6ji6t]

How did I you made this beginning animate

[@danielalessandro7031]

How to navigate from screen to screen with menu

[@erickmendozaballona4051]

Can you help me, I'm a beginner@@danielalessandro7031

[@CLY_-mj5tg]

thank you dear. It has been an incredible adventure, I think rive animations should be in all applications!

[@TheFlutterWay]

Glad you like it.

[@pazfelipe]

The best ever Flutter channel on youtube

[@TheFlutterWay]

Thanks, means a lot 💙.

[@receptopaktas9276]

The page change video should be Episode 6. We need this very much. Anyone who watches the first 5 videos can get hooked on it. Thanks for your quality content. 🙏

[@YS_Yousef]

it is really easy brother/sister no need for a full video for that

[@TowgenRD]

@@YS_Yousef How can I do it bro?

[@YS_Yousef]

how will i tell you in the comments 😅 @@TowgenRD

[@amorenog5]

I customized my own screen but used some of your ideas. Really cool videos.

[@clovisstanford6515]

where you learn this advanced flutter

[@amorenog5]

@@clovisstanford6515 Self-taught with videos and making my own apps it’s a good way to learn.

[@binarnesia]

Wow the ui looks really good, I'll try this one

[@gillesashley9314]

Flutter is the G.O.A.T.

[@nicoletti05]

Where do I click to like more than once? Terrific! Tks for sharing!

[@mahmoud2000]

Fantastic, very professional, thank you so much

[@luismiguelagamezaguas1710]

It's just amazing man.

[@mojtabasaebi6096]

im really happy to find you :) thank you for great and high quality content and project ... we waiting for more Episode of this curse

[@CarlosHenrique-er7zq]

Amazing job, thanks for all!

[@zhangkevin8147]

Nice share

[@TowgenRD]

I want to know how I can make each menu button go to a different page, because as I see in the video if I add something to the press it will be like this for all the buttons

[@zaid4481]

Good Job

[@TheFlutterWay]

Glad you like it!

[@sharck1]

And now need Episode 6 with switch pages, routing 😅

[@receptopaktas9276]

goes between pages but stays in the background

[@osvaldomota838]

@@receptopaktas9276 in which background? Could you tell me please 😅

[@josealejandrosanchez4180]

termine estos cursos completo, muy bueno aprendí cosas que no sabia de flutter

[@dmytros1213]

Thanks! Super animations!!

[@aliounesakho8582]

Amaaaaaazing

[@TheFlutterWay]

Glad you like it!

[@UnesSaadaoui]

thank you brother.❤❤❤

[@antoniiocg_7]

Nice video mate! Could someone help me explaining how to visualize the colors in that way when you are write 'Colors.' in VS Code? I can´t see that previsualization that eases the choice.

[@S-Lomar]

Thanks for sharing ❤️💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕

[@TheFlutterWay]

Thanks for watching

[@davidhrgl]

Amazing, Good Job!

[@TheFlutterWay]

Thank you! Cheers!

[@leothehustler]

where to get these rive components

[@hashankannangara8723]

Wow!!! thats awesome!!!😍😍

[@vbk-no4pk]

please guide me how can i perform onpressed function on these side menus to go to new screen.......

[@ffmasskama2537]

It's work tq ❤️❤️

[@viveshoy]

awesome awesome

[@developerzull]

Very good! So nice design 👍

[@arafathussain851]

nice work brother!

[@J.a.k.e.b.r.a.v.o]

Super !.

[@aliafsarian1379]

Enjoyed buddy❤

[@cunningmentor]

You are amazing

[@TheFlutterWay]

Thanks for watching!

[@sunhsiang6644]

Amazing

[@wukimus1]

How would the navigation work for different pages?

[@WaniTech]

The menu will close, with the screen you navigated, just like your home screen

[@connelasikong8069]

new subscriber!

[@ayandas7988]

Bhai tum dartz ke upar ek video banao. Jaha pe Either use hota hain and uske return me left and right return hota hain fold method use karke.

[@wsemdawoodi7074]

I just mad cuz i can’t give you more than 1 like Very nice job sir I hope that i can be like you someday ❤

[@harshjaviya8547]

How we are find a ArtboardName And Load file means a load a rive assets?

[@greendiga]

Hi, I really enjoyed the course, I would like to see episode 6. As a beginner, I have a question, how do I go to the next page when clicking? Thanks for the informative content

[@erickmendozaballona4051]

Hello, can you help me, I'm also a beginner.

[@utsavff4076]

Kya aap next episode me overflow ki pb ko solve karva sak te hai ?

[@neidsonsouza]

Awesome video! Anyone knows what vscode plugin is used to make the open-close parentheses be market as a tree?

[@maelc9206]

You mean the automatic comments that show which elements the brackets belong to ? It's juste the official Flutter plugin, that you should anyway install.

[@neidsonsouza]

@@maelc9206 I'm talking about the vertical lines that link the begin of a widget and his child

[@aduntoridasful]

@@neidsonsouza kzbin.info/www/bejne/pHLQgKdrlMuAqrc

[@neidsonsouza]

@@aduntoridasful Thank you!

[@OneMoreJack]

@@neidsonsouza what's plugin? please

[@rezaazizi-gh7pg]

How can I make it open from the right side?

[@tejasjani2544]

Better than CSS.

[@sunilkumar-om3kt]

What are the extensions your using

[@osvaldomota838]

Hello good ones, where can you put the pages to open them with the Sidebar? Even though I'm looking for it, I don't know how to integrate it. If someone knows, please help me. I'm new to this and I like the sidebar that this project has, but I don't know how to make it work so that it opens other pages. :(

[@TheCedrc]

hey you learn it?

[@osvaldomota838]

@@TheCedrc if you mean did I manage to fix it, no, I tried several ways but none worked so I had to use another one from a different video than this one but the other one used a different method and I had to remove the sidebar and the navbar. :'(

[@TheCedrc]

İ fix it only write navbar page index and state

[@osvaldomota838]

@@TheCedrc in the page called entry_point.dart there is a child that houses the HomePage(), as far as I can understand there it tells you which page to start but in the section of the button that in my case I think is called menu_btn.dart I think that's where it goes but I do not know where, and put in several ways and even based on other videos but still did not come out, if you can help me with just activate the navbar really would make me very happy bro, oh if you could provide the part where you wrote that section i would appreciate it :c

[@user-bx2wd5wz6c]

wow

[@danielalessandro7031]

How to navigate from screen to screen with menu

[@adrianavinade4880]

I can't use "RideUtils" , the code not found the property. What to need for using? Sorry for my english. I don't speak

[@seemscurious]

Good video friend! I need help: How can I download .riv icons? You could make a video explaining it.

[@SereneVista443]

cool

[@user-hg5fd8tp5g]

Please how i can select colors in design❤

[@faisalhatila1844]

at 12:55, I am getting an error Another exception was thrown: LateInitializationError: Field 'isMenuOpen' has not been initialized. this is my code I rive icon is different that's why my state machine name is different class UploadReceipt extends StatefulWidget { const UploadReceipt({super.key}); @override State createState() => _UploadReceiptState(); } class _UploadReceiptState extends State { late SMIBool isMenuOpen; @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.amber[50], body: Stack( children: [ Padding( padding: const EdgeInsets.only(top: 150.0), child: Text("Upload Receipt"), ), MenuBtn( riveOnInit: (artboard) { StateMachineController controller = RiveUtils.getRiveController( artboard, stateMachineName: "State Machine 1"); isMenuOpen = controller.findSMI("isOpen") as SMIBool; isMenuOpen.value = true; }, press: () { isMenuOpen.value = !isMenuOpen.value; }, ) ], )); } } class MenuBtn extends StatelessWidget { const MenuBtn({ Key? key, required this.press, required this.riveOnInit, }) : super(key: key); final VoidCallback press; final ValueChanged riveOnInit; @override Widget build(BuildContext context) { return SafeArea( child: GestureDetector( onTap: press, child: Container( margin: EdgeInsets.only(left: 16), height: 40, width: 40, decoration: BoxDecoration( color: Colors.white, shape: BoxShape.circle, boxShadow: [ BoxShadow( color: Colors.black12, offset: Offset(0, 3), blurRadius: 8) ]), child: RiveAnimation.asset( "assets/rive_assets/menu_button_1.riv", onInit: riveOnInit, ), ), ), ); } } import 'package:rive/rive.dart'; class RiveUtils { static StateMachineController getRiveController(Artboard artboard, {stateMachineName = "State Machine 1"}) { StateMachineController? controller = StateMachineController.fromArtboard(artboard, stateMachineName); artboard.addController(controller!); return controller; } }

[@casp9957]

not sure but try removing "late" from your isMenuOpen variable or remove "const" from your constructer or try removing them both

[@hpsunday]

what extensions are you using on vscode?

[@amangit1314]

I am having an error of null check operator used on null value in rive_utils.dart file. anybody please help

[@8899sarang]

home stateMachineName is "HOME_interactivity". 'i' is small in interactivity word

[@XxSouIxX]

@@8899sarang Thank you!

[@Beacon_Bacon]

@@8899sarang I couldn't figure this out for the life of me. Thank you so much!

[@adeebmark]

how can i get a call back to update the screen to the selected index ?

[@dendyarmanda4417]

i need that answer

[@zahaanmahajan1606]

external static Never _throw(Object error, StackTrace stackTrace); why is this error showing after I try to include the animation part to the rive icons when I restart the app? also if i do the hot reload, the below error shows up: _CastError (Null check operator used on a null value) """ FOUND THE PROBLEM """" It is in the home icon, It is HOME_interactivity not HOME_Interactivity i is in lowercase, it took me 7 hours to figure that out

[@mazenshawky]

Make sure that in the model, home stateMachineName is "HOME_interactivity". 'i' is small in interactivity word for this icon

[@nozo8488]

Thanks man.

[@eldarkk4566]

damn boy

[@TheFlutterWay]

Enjoy 😎

[@JohnAdenyuma]

Can anybody please help me with the background music? Please?

[@abdoulhamiddiallo1264]

Hi, I'm trying to reproduce your code, but arrive at minute 7, or call you the "StateMachineController" in the "riveonInit" an error occurs which is as follows: ChromeProxyService: Failed to evaluate expression’FlutterErrorDetails’: InternalError: Expression evaluation in Async frames it’s not supported .No frame with the index 14. “ Can you help me the solve this problem ? By the way , I like the content you offer

[@huseyinburakinci2755]

Flutter Rive code How can I add text under submenu icons?

[@everythinghotd1]

There will be no hover in mobile app, so why that animation?

[@yisahkelvin1532]

Please,most of the flutter apps in KZbin are not responsive. Is this responsive?

[@rezaazizi-gh7pg]

please put rive file menu link

[@mattmatt5925]

I have a different question. Song name?

[@wukimus1]

what is this sound track?

[@zapeeosheikh]

The Reasonable Sense able Google Developer Expert in Flutter - Dart

[@keremaydn7837]

What is the music?

[@sagarvadnala7162]

How to add routing to the Rive icons, without routing the app looks boring ):

[@Alivajid582]

Sir beginners ke full tutorial hindi me upload kare please 🙏

[@user-uc5xo4tj2f]

to push pages from sidebar you can create navigatorobserver, connect it to your navigator and in sidebar write construction like this: customNavigatorObserver.navigator!.pushNamed('/someroute')

[@amannirmalkar3533]

@AshishGarg_ did you find any solutions ??

[@user-pc9uo8my4b]

I was about to pay... If need to make a app, i already made a decision.

[@xeno7828]

Yeee))

[@TheFlutterWay]

Enjoy!

[@superuser8636]

How does this look on the browser? Can you DM me?

[@taiinh3819]

Please send me source code because it is not working

[@akagrawal85]

where is sixth episode ?

[@ahmetcantemel59]

I need more icons can you give artboard names for me

[@mahmoudbadr132]

where source code for this video

[@TheFlutterWay]

Check the description.

[@kelana8894]

This is for android or ios?

[@VIPERSSHOW]

Both

[@ZezoTalaat]

source code link not working

[@kamalelrefaey]

3:00

[@phamtomcr]

git?

[@youraccountissuspended]

but why?

[@kelvinkirwa4887]

anyone with the code to help me please .

This isn’t real in a app. 😂 can you make some page and push?

[@TheFlutterWay]

You can use that in any of your app

[@Albadry13]

المصمم عربي ؟

[@naeeminformationtv9953]

please Password send me

[@shakibhossen1970]

video is so fast to learn otherwise its good

[@TheFlutterWay]

Thanks for the feedback, you can slow it down like 0.5 speed, and I’m planning to publish videos with voice over.

[@achieverstv8244]

Yeah, that would be great

[@flutterdeveloperabir1782]

Why are u using custom code? Using the Flutter package is quite easy

[@TheFlutterWay]

What do you mean by custom code?

[@flutterdeveloperabir1782]

@@TheFlutterWay Good package is available brother, so why write so much code

[@mmokenape4730]

@@flutterdeveloperabir1782 What's the package name?

[@flutterdeveloperabir1782]

Using the Flutter package is quite easy

[@hashankannangara8723]

@@flutterdeveloperabir1782 you can use a package, but using a package, how do you learn to code something like this?

[@pyiushved1647]

Exception has occurred. _CastError (Null check operator used on a null value) this error occoured on 6:52 import 'package:rive/rive.dart'; class RiveUtils { static StateMachineController getRiveController(Artboard artboard, {stateMachineName = "State Machine 1"}) { StateMachineController? controller = StateMachineController.fromArtboard(artboard, stateMachineName); artboard.addController(controller!); return controller; } }

[@mazenshawky]

Make sure that in the model, home stateMachineName is "HOME_interactivity". 'i' is small in interactivity word for this icon

[@S-Lomar]

Welcome to my pages 🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰

[@dauviethieu9215]

RiveUtils.getRiveController not woking for me, i check flutter rive don't function