The Best 7 Flutter Animations

แชร์
ฝัง
  • เผยแพร่เมื่อ 5 ส.ค. 2024
  • Flutter Animations can be overwhelming sometime. We don't really know were to find the animations, what it look like or how to code them. In this video I will show you 7 new Flutter Animations because you seems to really like the first video. I will link the Part 1 in the description and at the end of this video. We will look at 7 animations in this video. The First one is the Animated Cross Fade and this animations allow you to animate the transition between two different widgets. In this example I used 2 images with different size to show you the transition. The second one is the Animated List. I don't usually use this one because I never remember that it exist but I think it's a very nice animation when you want to work with list and you want to make the transitions of items more fluid. After we have the Animated Physical Model which let you create a shadow behind any widget. In the example, I use an image again to see the shadow creating animation. Next, we have the Animated Widget, one of my favorite by far because you can do pretty much everything with this Flutter animation. In the video I show you the rotation animation but you can use the Animation Widget for more than this. The Fade transition allow you to fade in and out widgets. Make sure that when you use it, the UI is still relevant in you app because this can create blank space. The Scale transition can animation the scale factor of any widget. The last one is the slide transition. In the video I use the Curve elastic in out to make the animation. I hope you receive any value from this Flutter video.
    LINK FOR THE VIDEO
    Animated List: api.flutter.dev/flutter/widge...
    Animated Widget: flutteragency.com/animatedwid...
    Fade Transition: api.flutter.dev/flutter/widge...
    Slide Transition: api.flutter.dev/flutter/widge...
    OVERVIEW
    0:00​ Animated Cross Fade
    0:16 Animated List
    0:32 Animated Physical Model
    0:47 Animated Widget
    1:04 Fade Transition
    1:25 Scale Transition
    1:39 Slide Transition
    MISSION
    Our mission at Flutter Mapp (Flutter Mobile App) is to help purpose driven Flutter developers go full-time doing what they love and making an impact through coding. We achieve this with useful Flutter tips and clean UI design apps.
    RECOMMENDED
    Top 30 Flutter tips and tricks: • Top 30 Flutter Tips an...
    7 Flutter Animation Part 1: • Top 7 Flutter Animations
    SOCIAL MEDIA:
    Instagram : fluttermapp
    Twitter : FlutterMapp
    Website: www.fluttermapp.com
    CONTACT
    For business inquiries email me here: info@fluttermapp.com
    Website: fluttermapp.com
    #Flutter
    #FlutterMapp
    #FlutterTutorial
    Keep the good vibes, ✌️.

ความคิดเห็น • 66

  • @henrypowell3496
    @henrypowell3496 2 ปีที่แล้ว +7

    Never Change Flutter Mapp, you are soo humble making all kinds of tutorials 😊.

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว

      Thank you very much Henry! I really appreciate it 👏 I wish you a wonderful day 🚀

  • @gldzzpro5793
    @gldzzpro5793 2 ปีที่แล้ว

    legend

  • @salmanrafi4253
    @salmanrafi4253 2 ปีที่แล้ว +2

    Awesome! ❤️

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว +2

      Thank you very much Salman! I appreciate your comment, keep the good vibes 🙏🚀✌🍃

  • @gldzzpro5793
    @gldzzpro5793 2 ปีที่แล้ว +1

    sharing is carring thank u for sharing code

  • @rgbmines4295
    @rgbmines4295 2 ปีที่แล้ว +1

    really really helpfull. Btw I am very exited to see your next video cause I have the same amazon echo as you

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว +1

      Letsgooo lol. This was hard to be honest. Still editing the video right now. Might have to edit all night to release tomorrow 👏

  • @computerprogrammer9279
    @computerprogrammer9279 ปีที่แล้ว

    nice video

  • @ClickGamingZonee
    @ClickGamingZonee 2 ปีที่แล้ว +1

    Very informative 👏. Thanks boss

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว +1

      Pleasure Click Gaming Zone 👏 Thank you for the comment 👍

  • @ooings
    @ooings 2 ปีที่แล้ว +3

    Just what I needed, thanks ❣️

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว +2

      Letsgoo! Thanks a lot Blasia! Glad that it make your day 🚀🙏

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว +2

      You video called "what is this" on your channel is so funny 😂😂😂

    • @ooings
      @ooings 2 ปีที่แล้ว +2

      @@FlutterMapp oh (*^^*)

  • @hasipattopl7409
    @hasipattopl7409 ปีที่แล้ว

    really u are different and i love ur videos, thanks alot:)

  • @dovas90
    @dovas90 2 ปีที่แล้ว +1

    dude! keep it up! wtf we ain't many but every one of you and me is worth the grind! that's why we ain't many

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว

      Thanks a lot Dovas. Grind never stop 🙌😂✌️

  • @danhabib3441
    @danhabib3441 2 ปีที่แล้ว +1

    J'aime bien ce contenu rapide et efficace continue comme ça !

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว +2

      Super! Merci encore et bonne journée à toi 🙏

  • @danhabib3441
    @danhabib3441 2 ปีที่แล้ว +1

    Thanks dude

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว +1

      Pleasure, thanks for the comment ✌🚀

  • @winlifegame129
    @winlifegame129 2 ปีที่แล้ว +1

    Very nice

  • @md.ismailalamkhan
    @md.ismailalamkhan 2 ปีที่แล้ว +1

    Teaching Alexa how to code an app will be hilarious waiting for it ☺️. Also this video was awesome, great job!!!!!

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว

      Thank you very much Ismail! You are always there with super nice comments! I appreciate it 🔥🔥 Have a nice day 👏

    • @md.ismailalamkhan
      @md.ismailalamkhan 2 ปีที่แล้ว +1

      @@FlutterMapp you'r welcome. You have a nice day too

  • @mohamedel-moustafa3667
    @mohamedel-moustafa3667 2 ปีที่แล้ว +1

    You best keep going

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว

      Thanks a lot Mohamed! Keep the good vibes 👏

  • @usama_khalid
    @usama_khalid 2 ปีที่แล้ว +1

    Thanks bro. your flutter videos are awesome....
    I have a problem with flutter. when i put cards/images in listview.builder, scroll feels janky. do you have any solution for this jank in list view ?

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว +1

      Thanks you very much Usama. For your Flutter problem. I don't know about this. I have never experience such a thing also 🤔 Let me know if you find something new about it ✌

    • @usama_khalid
      @usama_khalid 2 ปีที่แล้ว

      @@FlutterMapp Thanks. I'll let you know.

  • @sikkicoding
    @sikkicoding ปีที่แล้ว

    when you say "don't subscribe" then i subscribed.🤣

  • @dev.faizan
    @dev.faizan 2 ปีที่แล้ว +1

    B E S T 💕

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว +1

      Thanks a lot Faizan! I appreciate it 🙏🚀🚀🚀 To the moooooonb 😂

  • @trinib1
    @trinib1 2 ปีที่แล้ว +2

    ahh a good day today

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว +1

      lolll Thanks a lot Brandon, what make you day a good day today? 🙏🚀

    • @trinib1
      @trinib1 2 ปีที่แล้ว +1

      @@FlutterMapp today im on your last video of your flutter beginner tutorial...2 week ago i was just a average human being .. today im a junior flutter developer .. you post on a good day ..my sensi 🙏

  • @newta3797
    @newta3797 2 ปีที่แล้ว +4

    Waiting for Alexa to build an app😀

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว

      loll, this is much harder than expected 😂😂

    • @newta3797
      @newta3797 2 ปีที่แล้ว

      @@FlutterMapp 😂
      U can do it for sure 😎🥳 Go ahead brother🤠

  • @user-jchjkitv77896
    @user-jchjkitv77896 2 ปีที่แล้ว +2

    What's the property _animation contain? It didn't show on the screen

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว +2

      Which animation? I might forget something 😲 Let me know, I will add the code in the description also. Thanks I appreciate it 🙏

  • @Flutterdev6391
    @Flutterdev6391 2 ปีที่แล้ว +3

    First

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว +1

      Letsgooo ahhaa Thanks a lot Amit! Keep the good vibes 🙏✌

  • @shivanshmishra752
    @shivanshmishra752 2 ปีที่แล้ว +2

    Bro I thin you should make a complete flutter tutorial for beginners all in one vedio because there are not many vedios like that on yt and people learning flutter find it difficult to find a good all in one vedio on TH-cam

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว

      Ok so 1 video for each animation? With all the code from scratch? Thanks aslo 👏

  • @RPAChampion
    @RPAChampion 2 ปีที่แล้ว +2

    dam man so many comment already , who would have said 1 year ago

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว +1

      So true! This is awesome. So grateful about it and thanks as always for commenting, help the algo 🚀🙏

  • @hi-s
    @hi-s 2 ปีที่แล้ว +3

    Third here 😂

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว +2

      Loll 😂 Thanks Hisham for the comment! It help the TH-cam algo 🚀🙏✌

    • @hi-s
      @hi-s 2 ปีที่แล้ว +1

      @@FlutterMapp Good work keeping that

  • @darianmorat
    @darianmorat 2 ปีที่แล้ว +1

    I'm learning react native but I'm watching this XD

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว +1

      Letsgooooo lolll 😂 Have you ever try Flutter also? If yes, I would like to know from your opinion, which one is easier to learn 👏 (I never really tried React Native)

    • @darianmorat
      @darianmorat 2 ปีที่แล้ว

      @@FlutterMapp I think both are easy, if you like to learn clear XD ... but in my case, it was easy to learn RN because it was a web developer and all the knowledge is applied ... I like both, but I prefer more stylizing with RN.

  • @sutalk1236
    @sutalk1236 2 ปีที่แล้ว +1

    100%

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว

      Thank you SuTalk 👏👏

  • @ripper6062
    @ripper6062 2 ปีที่แล้ว +1

    Make tutorial

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว

      Tutorial about all of them? or only one?

  • @manishdhruw5237
    @manishdhruw5237 2 ปีที่แล้ว +2

    Reverse psychology ,don't subscribe

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว

      Exact lol. Not sure if it will work tho 😂 Trying to find creative ways to do it 🚀

    • @manishdhruw5237
      @manishdhruw5237 2 ปีที่แล้ว +1

      @@FlutterMapp your videos are useful to me , so I subscribed.

    • @FlutterMapp
      @FlutterMapp  2 ปีที่แล้ว +1

      Thank a lot Manish. Hope to give you more value in the future also 🙏🚀

    • @manishdhruw5237
      @manishdhruw5237 2 ปีที่แล้ว

      @@FlutterMapp 🙏

    • @randomusername982374
      @randomusername982374 2 ปีที่แล้ว

      Yeah it didn't take me long to subscribe anyway. Alot of the content is useful