Massive Educator
Massive Educator
  • Видео 10
  • Просмотров 39 543
Custom Animated Sidebar/Drawer with animated icons - Flutter & Rive - Part III
🎬 Part I: ruclips.net/video/vmdafWtYzBg/видео.html
🎬 Part II: ruclips.net/video/a7_CSrT8CYI/видео.html
🔗 Source code:- github.com/Aashu-Dubey/flutter-samples/tree/main/lib/samples/ui/rive_app
🌐 Web demo: aashu-dubey.github.io/flutter-samples/#/course-rive
References:
🌻 Inspiration: designcode.io/swiftui-rive-animated-app
🎬 RepaintBoundary - Fun with Flutter (31:05) - ruclips.net/video/Nuni5VQXARo/видео.html
📦 Configurations and packages used:
Flutter: 3.3.10
rive: 0.10.1
📚 Chapters
- (00:00) Intro
- (00:23) Inspiration
- (00:43) Creating Side Menu
- (13:34) Integrating Side Menu with Home
- (15:50) Applying animations with Side Menu
- (23:13) Integrating OnBoarding with Home
- (30:39) Wrapping up
- (31:52)...
Просмотров: 6 146

Видео

Custom Bottom Navigation Bar with animated icons - Flutter & Rive - Part II
Просмотров 11 тыс.Год назад
🎬 Part I: ruclips.net/video/vmdafWtYzBg/видео.html 🎬 Part III: ruclips.net/video/LHbzddzD1W4/видео.html 🔗 Source code:- github.com/Aashu-Dubey/flutter-samples/tree/main/lib/samples/ui/rive_app 🌐 Web demo: aashu-dubey.github.io/flutter-samples/#/course-rive 🌻 Inspiration: designcode.io/swiftui-rive-animated-app 📦 Configurations and packages used: Flutter: 3.3.10 rive: 0.10.1 📚 Chapters - (00:00)...
OnBoarding & Login Modal UI - Flutter & Rive - Part I
Просмотров 2,8 тыс.Год назад
🎬 Part II: ruclips.net/video/a7_CSrT8CYI/видео.html 🎬 Part III: ruclips.net/video/LHbzddzD1W4/видео.html 🔗 Source code:- github.com/Aashu-Dubey/flutter-samples/tree/main/lib/samples/ui/rive_app 🌐 Web demo: aashu-dubey.github.io/flutter-samples/#/course-rive 🌻 Inspiration: designcode.io/swiftui-rive-animated-app 🔗 References as mentioned in the video: 1. Initial Setup (00:01:12 - 00:02:28): i. a...
Cards Gesture Rotation Animation in React Native (Reanimated & gesture handler)
Просмотров 2 тыс.2 года назад
🔗 Source code:- github.com/Aashu-Dubey/youtube/blob/0543549531d7668f533fc749cd9ee155ebc3f74b/rn_youtube/src/colorSwatch/ColorSwatch.tsx 🔗 Original Repo: github.com/Aashu-Dubey/react-native-animation-samples (original repository with more complete and advance implementation for this demo) 🐦 Inspiration: philipcdavis/status/1544703548423778311 ℹ️ Description: In this video we will imp...
Creating Vertical Animated Toolbar in React Native (Reanimated)
Просмотров 1,9 тыс.2 года назад
🔗 Source code:- github.com/Aashu-Dubey/youtube/tree/9098bccf42a2ce594044eb74f9315d6f9539f681/rn_youtube/src/animatedToolbar 🔗 Original Repo: github.com/Aashu-Dubey/react-native-animation-samples (original repository with more complete and advance implementation for this demo) 🐦 Inspiration: jmtrivedi/status/1517561485622321152 ℹ️ Description: In this video we will implement an inter...
Highlight any object in your video using Blender video editing | Blender 3.1
Просмотров 1,2 тыс.2 года назад
In this video we will learn how to Highlight a Clip or any Text in a video using Blender 3.1. You will usually highlight some object in your video if you want your audience to have special focus on that or when it's the central topic at a certain timeframe, and we'll also highlight Text, Text in a video can be useful in certain situation when audio can't be of much help, or to make text appear ...
How to create project specific local plugin | Ionic | Capacitor
Просмотров 4,9 тыс.2 года назад
Source code:- github.com/Aashu-Dubey/youtube/tree/ionic/local_plugin Capacitor Documentation:- capacitorjs.com/docs ℹ️ Description: We will get Status Bar height through native platform code and learn how to communicate between Ionic JavaScript and native code to build a custom Capacitor plugin that is local to your app. 🌟Chapters🌟 - (00:00) Intro - (00:14) Android Native Implementation - (03:0...
How to implement Side Menu Hamburger Icon Animation | Ionic | HTML, CSS
Просмотров 2,3 тыс.2 года назад
🔗 Resources: Drawer animation (previous video - 00:10): ruclips.net/video/TH75SYPs5Lo/видео.html Source code: github.com/Aashu-Dubey/Ionic-UI-Templates free menu animation samples: freefrontend.com/css-hamburger-menu-icons/ Animation code we have used: codepen.io/carlosriera/pen/qNgrEo 🌟Chapters🌟 - (00:00) Intro about task - (00:27) Understanding the code - (01:26) Let's get started - (02:40) A...
How to implement Side Menu Animation in Ionic | HTML, CSS
Просмотров 3,2 тыс.2 года назад
Source code: github.com/Aashu-Dubey/Ionic-UI-Templates Menu icon transition animation (next video - 22:51): ruclips.net/video/9ssPXzVecas/видео.html Description:- How to implement Drawer animation in Ionic 6 & Angular. Drawers are important part of the UI on mobile applications, where we usually show essential screens, some user detail or app's quick actions in one place. So to make drawer inte...
How to Implement List Animation in Ionic | HTML, CSS
Просмотров 3,6 тыс.2 года назад
🔗 Resources: Source code: github.com/Aashu-Dubey/Ionic-UI-Templates Article: medium.com/@aashu_dubey/list-animation-in-ionic-6-angular-c01930fbf527 Gist: gist.github.com/Aashu-Dubey/7b652abfe4a03c7d52c782386f744663 Easing (09:47):- developer.mozilla.org/en-US/docs/Web/CSS/easing-function 🎥 Other Videos Drawer animation (17:22): ruclips.net/video/TH75SYPs5Lo/видео.html Playlist: ruclips.net/p/PL...

Комментарии

  • @mahdibouguerzi
    @mahdibouguerzi День назад

    Very helpful thanks!

  • @ahmadabdallah2896
    @ahmadabdallah2896 9 дней назад

    to anyone who might face this error ||| Error: "AppUsageStats" plugin is not implemented on android ||| like me, for capacitor 4 and after the registerPlugin line needs to be before the super.onCreate call public class MainActivity extends BridgeActivity { @Override protected void onCreate(Bundle savedInstanceState) { registerPlugin(AppUsageStats.class); super.onCreate(savedInstanceState); } }

  • @ahmadabdallah2896
    @ahmadabdallah2896 10 дней назад

    straight to the point, thanks

  • @EnkhmandalBattsengel
    @EnkhmandalBattsengel 23 дня назад

    thank you!. it's really helped me

  • @Abhishekn._
    @Abhishekn._ Месяц назад

    thank you <3 , it worked !

  • @CS_Bisht_Vinesss
    @CS_Bisht_Vinesss 2 месяца назад

    amazing work😍

  • @syedzaid4346
    @syedzaid4346 4 месяца назад

    Awesome explanation.

  • @kamal9650-z1w
    @kamal9650-z1w 4 месяца назад

    Sir please create tutorial for you rope view svg using svg

  • @taiinh3819
    @taiinh3819 4 месяца назад

    please send me file riv

  • @TuanTran-ym7ik
    @TuanTran-ym7ik 5 месяцев назад

    Amazing!

  • @tuananhvo7608
    @tuananhvo7608 5 месяцев назад

    Thank's Pro!

  • @ccompass
    @ccompass 5 месяцев назад

    Thank you!

  • @elazarzadiki3059
    @elazarzadiki3059 6 месяцев назад

    very good tutorial thanks! can you make a video on how to create a plugin that will handle notifications in addition to capacitor's notification plugin without interfering? thanks

  • @alexanderclay5847
    @alexanderclay5847 7 месяцев назад

    Love these videos please do more animation reanimated videos

  • @GodRishUniverse
    @GodRishUniverse 7 месяцев назад

    how do I update the rive icon upon clicks on the sidemenu - like changing pages on click?

  • @kinggrey2511
    @kinggrey2511 10 месяцев назад

    Brother please please please teach me react native animation yours aee super smooth and feel really native also tell us how to add native code in it as well and yeah please be consistent with your videos your videos help a lot . Your templates make a video tutorial on them please

    • @massive.educator
      @massive.educator 9 месяцев назад

      Hi, I'll try to be consistent, I have couple of videos in line so stay tuned in either of my channels. Regarding templates, I currently don't have plans for tutorials on them, maybe in the future, but most of their source code is open source. Currently I have some content related to animations which I'll be share in coming days or weeks, to stay updated for the next stuff you can follow me on twitter/X.

  • @huseyinburakinci2755
    @huseyinburakinci2755 11 месяцев назад

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

    • @massive.educator
      @massive.educator 11 месяцев назад

      For a Bottom Tab with label below the icons, you have to do some minor UI changes, like wrapping the Rive Widget with a Column and then adding the Text widget as a second item.

    • @huseyinburakinci2755
      @huseyinburakinci2755 11 месяцев назад

      I understand, but how can I change the icons in a simple way?

  • @huseyinburakinci2755
    @huseyinburakinci2755 11 месяцев назад

    Hi how are you TabItem(stateMachine: "SEARCH_Interactivity", artboard: "SEARCH"), How can I add text under the icons?

    • @massive.educator
      @massive.educator 11 месяцев назад

      Hi, are you asking for SideMenu or the Bottom TabBar? To add Text below you just need minor UI changes using Column and adding the Text widget as a second entry.

    • @huseyinburakinci2755
      @huseyinburakinci2755 11 месяцев назад

      I want to write text under the icons of the fixed menu at the bottom and how can I change the icons?@@massive.educator

  • @buna8355
    @buna8355 Год назад

    icons are not loading

    • @massive.educator
      @massive.educator 11 месяцев назад

      Hi, sorry for late reply, but is your issue fixed now? if not which version are using?

  • @kesavanr5341
    @kesavanr5341 Год назад

    Great content, Is there are anyway to customize the capacitor's Official Plugin?

  • @non9119
    @non9119 Год назад

    Thank you!

  • @mika961
    @mika961 Год назад

    Thank you !

  • @praveshpal9644
    @praveshpal9644 Год назад

    This is grate videos with animated with using react native . So Please create a more videos with scratch with create a responsive ui with mobile and table mode both.

  • @gonecoderstudio5516
    @gonecoderstudio5516 Год назад

    Plz make more Animation with Flutter

  • @omerbennahum1903
    @omerbennahum1903 Год назад

    Thank you!

  • @gouravnainwaya5669
    @gouravnainwaya5669 Год назад

    Use Hindi

    • @massive.educator
      @massive.educator Год назад

      Hi, there's also a Hindi version: ruclips.net/video/cu49qg2E6eo/видео.html

  • @tinkugupta1
    @tinkugupta1 Год назад

    Can you make it in react native you explain in a very great way 🔥🔥🔥🔥

    • @massive.educator
      @massive.educator Год назад

      Thank you! While there are gonna be more react-native content on this channel, I created this project in Flutter and Ionic only, so I can create tutorials for them, and currently don't have any plans to do the same in react-native. But if you're looking for a react-native version of this project, it is already created by someone else, and it is open source twitter.com/lima_lucas3/status/1531100140769103873

  • @tinkugupta1
    @tinkugupta1 Год назад

    This amzing really awsm make more react native videos please .. ...... kindly please reply

  • @amitsharmaav9924
    @amitsharmaav9924 Год назад

    you explaining in great way.. thank you for this video.

  • @massive.educator
    @massive.educator Год назад

    Credit: This app is inspired from the original free SwiftUI + Rive course by @DesignCodeTeam, and is fully replicated Flutter version of the same. The original free course can be found here: designcode.io/swiftui-rive-animated-app --- This Flutter version as shown in the video is also completely free and open source. Source code: github.com/Aashu-Dubey/flutter-samples Web demo: aashu-dubey.github.io/flutter-samples/#/course-rive On a different note, there's another version of this project created by me using Ionic + Angular + Capacitor, also free and open source, here's a source for anyone interested. Source code: github.com/Aashu-Dubey/Ionic-UI-Templates Web Demo: aashu-dubey.github.io/Ionic-UI-Templates/course-rive

  • @abdel-ilahsaaof8353
    @abdel-ilahsaaof8353 2 года назад

    This is realy awesome! Thank you so much for your easy explanation

  • @native.ninjas
    @native.ninjas 2 года назад

    Lovely 💐😍

  • @native.ninjas
    @native.ninjas 2 года назад

    Thank you Bhai 💖💖💖💖

  • @khanhduy3364
    @khanhduy3364 2 года назад

    awesome

  • @khanhduy3364
    @khanhduy3364 2 года назад

    amazing

  • @Alan4F50
    @Alan4F50 2 года назад

    Amazing video and explanation!! Thanks for this :)

  • @crkvend
    @crkvend 2 года назад

    This is an amazing tutorial! I wasn’t even interested in the animation nor the gesture handling, just wanted to see how you would tackle the rotation anchor point, but stayed and watched the whole thing! You’re explaining all the concepts very clearly, great job!

  • @LudwigVillalba
    @LudwigVillalba 2 года назад

    Thank you for sharing, really cool! :)

  • @lucky765
    @lucky765 2 года назад

    What emulator are u using ?

    • @massive.educator
      @massive.educator 2 года назад

      The default iOS simulator we get in Xcode, same for Android.

  • @sumanth3036
    @sumanth3036 2 года назад

    🚀

  • @sob3ygrime
    @sob3ygrime 2 года назад

    Thank you!

  • @konstantinverenev558
    @konstantinverenev558 2 года назад

    Looks awesome. Subscribed for more videos about react native

  • @sumanth3036
    @sumanth3036 2 года назад

    Amazing.. thanks a lot. More animation work please 🥺

  • @Cadknowledge
    @Cadknowledge 2 года назад

    and please make video on react native more frequently

  • @Cadknowledge
    @Cadknowledge 2 года назад

    bro find you on reddit keep up the good work and yeah subscribed

  • @SohelIslamImran
    @SohelIslamImran 2 года назад

    Subscribed and excited for more videos like this.

  • @SohelIslamImran
    @SohelIslamImran 2 года назад

    Great work

  • @massive.educator
    @massive.educator 2 года назад

    Note:- IF you're Capacitor v4, there is a minor change in case of Android, in MainActivity. java you have to call 'registerPlugin' before 'super.onCreate' instead of after, as in the video. reference:- capacitorjs.com/docs/updating/4-0#change-registerplugin-order This change is only required for Capacitor v4.x projects, while everything stays the same in case of Capacitor v3.x.

    • @navaneeth-007
      @navaneeth-007 7 месяцев назад

      This tip really helped me. 😍😍

    • @elazarzadiki3059
      @elazarzadiki3059 6 месяцев назад

      note: v4 or *above* needs to do that

    • @php_master
      @php_master 25 дней назад

      I have spent more than 12 hours to fix Thanks for your instructions! It's fix just 1 mnt!

  • @emberarc
    @emberarc 2 года назад

    It's simply does not work with Capacitor 4. "cap sync android" cannot find your plugin this way and will result "Msg: ERROR Error: Uncaught (in promise): Error: "CustomPlugin" plugin is not implemented on android Error: "CustomPlugin" plugin is not implemented on android

    • @massive.educator
      @massive.educator 2 года назад

      I tried the steps with Capacitor 4 project, just to make sure, while iOS is working fine, I was able to reproduce the error on Android. It seems because of a minor change for Android in v4, where you have to call 'registerPlugin' before 'super.onCreate' instead of after as in the video. reference:- capacitorjs.com/docs/updating/4-0#change-registerplugin-order After making the change, it worked on Android too, so that should fix the issue for you. Other than that this error also occur when plugin name is not same on JS, Android and iOS code, so also make sure of that. I'll mention this change in the pin comment.

    • @gabrielmoreno7482
      @gabrielmoreno7482 2 года назад

      @@massive.educator 😀thank you so much, this works

    • @dronesete
      @dronesete Год назад

      @@massive.educator I've searched everywhere and found nothing until I found your comment. Thank you!

  • @note380
    @note380 2 года назад

    awesome video thank you, can we use this technique to run capacitor app as a background /foreground service?

    • @massive.educator
      @massive.educator 2 года назад

      Thank you. I think, as we are allowed to use platform specific native code, if some API is available for that platform, it should be possible to integrate that in a Capacitor app (as you can see from a lot of existing plugins). Rest you can get a better idea from the Capacitor docs, if it can work for your specific use case, or try to find if there are some existing solutions by the community.