Creating an Animated Sidebar Menu in Flutter with Rive - Episode 5
HTML-код
- Опубликовано: 12 янв 2023
- 🎬 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/abuanwar072
Twitter: / theflutterway
Twitter: / abuanwar072 (my personal profile)
Facebook: / theflutterway
► Timestamps
0:00 Intro
Thanks for watching!
Make sure to like + Subscribe For More!
FlutterShop - Premium shop UI kit
Source Code👉 cutt.ly/rFOscFo
How did I you made this beginning animate
How to navigate from screen to screen with menu
Can you help me, I'm a beginner@@danielalessandro7031
Wow the ui looks really good, I'll try this one
thank you dear. It has been an incredible adventure, I think rive animations should be in all applications!
Glad you like it.
Fantastic, very professional, thank you so much
The best ever Flutter channel on youtube
Thanks, means a lot 💙.
Amazing job, thanks for all!
It's just amazing man.
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. 🙏
it is really easy brother/sister no need for a full video for that
@@YS_Yousef How can I do it bro?
how will i tell you in the comments 😅
@@towgenrd7780
Very good!
So nice design 👍
Thanks! Super animations!!
termine estos cursos completo, muy bueno aprendí cosas que no sabia de flutter
I customized my own screen but used some of your ideas. Really cool videos.
where you learn this advanced flutter
@@clovisstanford6515 Self-taught with videos and making my own apps it’s a good way to learn.
im really happy to find you :) thank you for great and high quality content and project ... we waiting for more Episode of this curse
Where do I click to like more than once? Terrific! Tks for sharing!
Wow!!! thats awesome!!!😍😍
This is SO COOL! 🤩
Amazing, Good Job!
Thank you! Cheers!
thank you brother.❤❤❤
Enjoyed buddy❤
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.
Flutter is the G.O.A.T.
Amazing
Amaaaaaazing
Glad you like it!
please guide me how can i perform onpressed function on these side menus to go to new screen.......
nice work brother!
Nice share
Good Job
Glad you like it!
Super !.
It's work tq ❤️❤️
new subscriber!
awesome
awesome
Kya aap next episode me overflow ki pb ko solve karva sak te hai ?
what extensions are you using on vscode?
What are the extensions your using
You are amazing
Thanks for watching!
How can I make it open from the right side?
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 ❤
where to get these rive components
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
Awesome video!
Anyone knows what vscode plugin is used to make the open-close parentheses be market as a tree?
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.
@@maelc9206 I'm talking about the vertical lines that link the begin of a widget and his child
@@neidsonsouza ruclips.net/video/nAmOt5_fMtU/видео.html
@@aduntoridasful Thank you!
@@neidsonsouza what's plugin? please
I can't use "RideUtils" , the code not found the property.
What to need for using?
Sorry for my english.
I don't speak
How would the navigation work for different pages?
The menu will close, with the screen you navigated, just like your home screen
Thanks for sharing ❤️💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕
Thanks for watching
And now need Episode 6 with switch pages, routing 😅
goes between pages but stays in the background
@@receptopaktas9276 in which background? Could you tell me please 😅
cool
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
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
Hello, can you help me, I'm also a beginner.
Better than CSS.
How to navigate from screen to screen with menu
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. :(
hey you learn it?
@@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. :'(
İ fix it only write navbar page index and state
@@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
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;
}
}
not sure but try removing "late" from your isMenuOpen variable or remove "const" from your constructer or try removing them both
Please how i can select colors in design❤
I have a different question. Song name?
how can i get a call back to update the screen to the selected index ?
i need that answer
what is this sound track?
Please,most of the flutter apps in RUclips are not responsive. Is this responsive?
Flutter Rive code How can I add text under submenu icons?
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
Make sure that in the model, home stateMachineName is "HOME_interactivity". 'i' is small in interactivity word for this icon
Thanks man.
source code link not working
I am having an error of null check operator used on null value in rive_utils.dart file. anybody please help
home stateMachineName is "HOME_interactivity". 'i' is small in interactivity word
@@8899sarang Thank you!
@@8899sarang I couldn't figure this out for the life of me. Thank you so much!
There will be no hover in mobile app, so why that animation?
How does this look on the browser? Can you DM me?
What is the music?
damn boy
Enjoy 😎
Good video friend!
I need help:
How can I download .riv icons? You could make a video explaining it.
please put rive file menu link
where is sixth episode ?
Can anybody please help me with the background music? Please?
How to add routing to the Rive icons, without routing the app looks boring ):
git?
3:00
Sir beginners ke full tutorial hindi me upload kare please 🙏
I need more icons can you give artboard names for me
I was about to pay...
If need to make a app, i already made a decision.
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')
@@AshishGarg_ did you find any solutions ??
This is for android or ios?
Both
where source code for this video
Check the description.
but why?
The Reasonable Sense able Google Developer Expert in Flutter - Dart
This isn’t real in a app. 😂 can you make some page and push?
You can use that in any of your app
anyone with the code to help me please .
المصمم عربي ؟
Yeee))
Enjoy!
video is so fast to learn otherwise its good
Thanks for the feedback, you can slow it down like 0.5 speed, and I’m planning to publish videos with voice over.
Yeah, that would be great
please Password send me
Why are u using custom code?
Using the Flutter package is quite easy
What do you mean by custom code?
@@TheFlutterWay Good package is available brother, so why write so much code
@@flutterdeveloperabir1782 What's the package name?
Using the Flutter package is quite easy
@@flutterdeveloperabir1782 you can use a package, but using a package, how do you learn to code something like this?
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;
}
}
Make sure that in the model, home stateMachineName is "HOME_interactivity". 'i' is small in interactivity word for this icon
Welcome to my pages 🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰
RiveUtils.getRiveController not woking for me, i check flutter rive don't function