Flutter Flare Basics - Let's Build Giphy's Nav Menu

Поделиться
HTML-код
  • Опубликовано: 3 апр 2019
  • Master the basics of vector animation 🎨🔥 with Flare 2D in Flutter by re-creating the awesome navigation menu from the Giphy mobile app fireship.io/lessons/animated-...
    - Flare www.2dimensions.com/about-flare
    - Flutter flutter.dev/
    - Giphy Apps giphy.com/apps
    #flare #flutter #giphy
  • НаукаНаука

Комментарии • 141

  • @darshangowda309
    @darshangowda309 5 лет назад +133

    This is pro content for free :D

  • @PerfectEn3my
    @PerfectEn3my 5 лет назад +26

    Your tuts quality is just insane. Bravo and thanks a lot for your efforts!

  • @FilledStacks
    @FilledStacks 5 лет назад +19

    Absolutely great content. The quality of your Tutorials are insane. A tutorial this compact and to the point is my goal for my tutorials as well.

  • @siddhantkumar7036
    @siddhantkumar7036 5 лет назад +1

    Not many videos of this type are on youtube right now. You have done a great work.

  • @AbrahamCm
    @AbrahamCm 5 лет назад

    Useful, clean, simple and the best. I just subscribed and I can say one of the best of RUclips. Cheers ! From 🇲🇽

  • @antoniodominikovic7496
    @antoniodominikovic7496 3 года назад +1

    This was a great tutorial and very flexible in terms of applying the examples to many different types of animations.

  • @dc5
    @dc5 4 года назад +1

    Your videos couldn't be more awesome! Thanks for sharing!

  • @aaronsoto5711
    @aaronsoto5711 5 лет назад +3

    Wow, it looked so complex but you made it so simple. Greetings from Mexico.

  • @Rive_app
    @Rive_app 5 лет назад +18

    Rockin'! 🤘

  • @sadabwasim9850
    @sadabwasim9850 5 лет назад

    You're going beyond the limits, awesome video keep it up.

  • @stephanedondyas6457
    @stephanedondyas6457 5 лет назад +2

    Thanks a lot! I was looking for this since a long time. Always a great content on your channel.

    • @Fireship
      @Fireship  5 лет назад +1

      Thank you! Animation is always a fun topic to cover :)

  • @bjrnbjrn
    @bjrnbjrn 5 лет назад +1

    Excellent intro to Flare 🙌 thanks!

  • @nash9785
    @nash9785 5 лет назад +5

    One of the best tutorials on Flare I've seen, awesome job 👌👌

  • @kennyhall9638
    @kennyhall9638 5 лет назад +1

    So cool! I really need to start working with Flutter now!

  • @Darthilandia
    @Darthilandia 3 года назад

    I love the way you edit the video! This is the way!

  • @MirkoRaimoViaggi
    @MirkoRaimoViaggi 5 лет назад +1

    Wow, this tutorial is amazing! Thank you a lot! ❤

  • @narcodico
    @narcodico 5 лет назад

    And here’s Jeff again with a flutter punch, knocking out the whole channel!

  • @TheCebulon
    @TheCebulon 4 года назад

    Awesome.
    Very detailed and therefore recreatable.
    Thanks.
    Greetings from Munich, Tom.

  • @saurabhsawant9182
    @saurabhsawant9182 5 лет назад

    Very nice and clean explanation dude love it. Eagerly waiting for your flutter course. Love from India

  • @azizattouche5328
    @azizattouche5328 4 года назад

    This is nuts, look at where technology has arrived, amazing !

  • @digimation6862
    @digimation6862 4 года назад

    I am new in flutter design and is awesome this tutorial. Thanks bro

  • @anshulsinghla998
    @anshulsinghla998 5 лет назад

    Straight away subscribed!!!!!!

  • @biondanilorenzo
    @biondanilorenzo 5 лет назад

    Awesome tutorial! Congrats!

  • @santerek28
    @santerek28 5 лет назад +4

    "Vivement" the course on flutter ! I'm waiting for it !

  • @sagnikpradhan3594
    @sagnikpradhan3594 5 лет назад +2

    I love the way you teach stuff. Would love if you could cover out some minimal basics. You know like Electron, VueJS Getting Started, GraphQL and stuff similar.

  • @ajanieniola9172
    @ajanieniola9172 5 лет назад

    I have been waiting for this video since I saw the tweet

  • @zehijean8817
    @zehijean8817 5 лет назад

    i was very pleased with the vido...liked and subscribed..do more complex flare and flutter stuff

  • @avikenz3334
    @avikenz3334 3 года назад

    YOUR ARE AMAZING DUDE !!!!

  • @alessandrodona4296
    @alessandrodona4296 4 года назад

    This video is FIRE

  • @philo.sophical5955
    @philo.sophical5955 5 лет назад

    As always high Quality content

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

    very cool i like your work

  • @chetannager9246
    @chetannager9246 4 года назад

    Amazing Bro Superrrrrrrrrrrrrrb job..............

  • @RaymondAtivie
    @RaymondAtivie 5 лет назад

    Top notch content right here

  • @llkoole7
    @llkoole7 4 года назад +1

    Bro...that "hot pink hype man" animation at 3:41....lost it! 🔥🔥🔥

  • @namoradinhahunter7086
    @namoradinhahunter7086 5 лет назад +1

    thx for this amazing flutter content

    • @Fireship
      @Fireship  5 лет назад +1

      Thanks for watching!

  • @themindstorm9947
    @themindstorm9947 5 лет назад +1

    You've read my mind! Again!

    • @Fireship
      @Fireship  5 лет назад +1

      Nice, this was a fun demo to build!

  • @The-Average-Gamer
    @The-Average-Gamer 5 лет назад

    awesome video, cant wait for your angular course.

    • @Fireship
      @Fireship  5 лет назад

      Expect that after Angular 8 in late spring

  • @trophieboi1820
    @trophieboi1820 5 лет назад

    Nice!

  • @mido5219
    @mido5219 4 года назад

    thank you so muuuuuuuuuch

  • @hyltoncarboo8303
    @hyltoncarboo8303 5 лет назад

    I had to subscribe after this!

  • @sebblesssing
    @sebblesssing 5 лет назад +3

    So fucking lit man! 🔥🔥🔥🚀

  • @KL13923j
    @KL13923j 5 лет назад +2

    Thank you, please do more tutorial about flutter.

  • @elliotheath5366
    @elliotheath5366 5 лет назад

    Jeff does it again!

  • @AvinashSingh-nq5ud
    @AvinashSingh-nq5ud 5 лет назад +33

    Eagerly waiting for your flutter course.

  • @LawZist
    @LawZist 5 лет назад

    great!

  • @officialismailshah
    @officialismailshah 3 года назад

    Love this type of content.. it's hard to make...

  • @divinedela9125
    @divinedela9125 5 лет назад +3

    Great content..was just watching with the motion graphics guy at my agency..He crazily loves this video

    • @Fireship
      @Fireship  5 лет назад +2

      Awesome! I'm not an expert animator, but sometimes I can make things look cool.

  • @vasiovasio
    @vasiovasio 5 лет назад +8

    Back in 2000 Macromedia Flash software do exactly this type of easy animations :)

  • @omzer97
    @omzer97 5 лет назад

    legend!

  • @fahadalawam
    @fahadalawam 5 лет назад

    WOW! 😮

  • @Mohamedhassan-if8ww
    @Mohamedhassan-if8ww 5 лет назад

    Flutter is getting intresting . i would suggest in the course you are making to make full course rebuilding an app from scratch Using Firebase and how to handle the diffrent hardles like caching data/local notification and things like that because you are focusing mor ein the Ui aspect . And thank you for this free premium content

  • @OSCAR-CH
    @OSCAR-CH 4 года назад

    good video

  • @3litepker
    @3litepker 4 года назад

    When I do alignment.bottomcenter it looks stupid on iPhone especially because of the bar that appears to indicate to swipe to move out the app. Is there a way to add a nice little margin and some shadows at the top to that child NavBar to make it look native?

  • @ManOnTheMoon2131
    @ManOnTheMoon2131 4 года назад +3

    Your Flare link is broken! (rebranded to Rive..?)

  • @billy-ps7jz
    @billy-ps7jz 5 лет назад

    Thx

  • @nt4f04und
    @nt4f04und 4 года назад +1

    Hey, what theme for VS Code do you use?

  • @ahmxrd
    @ahmxrd 5 лет назад +1

    Woow, thank you so much for this. Genuinely appreciate this! Honestly you should get into Vue more.

    • @Fireship
      @Fireship  5 лет назад +1

      Vue is great! You'll probably see a vue video here some day...

    • @LukePighetti
      @LukePighetti 4 года назад

      Fireship would love to see you compare vuejs to vue dart as well.

  • @mawulijo
    @mawulijo 5 лет назад +1

    Fireship.io is killing it. Again and again. FYI. Building a Frankenstein with all your lessons. wink wink

    • @Fireship
      @Fireship  5 лет назад +1

      Haha, let me know what you want to see next to make this Frankenstein come alive!

    • @mawulijo
      @mawulijo 5 лет назад

      @@Fireship I wanna see implementation of VR/AR stuff of a room in flutter 🙈. #askedTooMuch

  • @gursheeshsingh5536
    @gursheeshsingh5536 4 года назад +1

    Flare is Rive now :)

  • @VinayKumar-ud9on
    @VinayKumar-ud9on 5 лет назад

    Hi . I have a problem in ionic . I got a situation where user selects a excel file from ionic and upload it to firebase storage and after few seconds he should get all excel data to json format and view in html format please help me . I have done till firebase storage but i am unable to convert excel to json .

  • @AlvaroGarzo
    @AlvaroGarzo 5 лет назад

    💥💕

  • @Anullos42
    @Anullos42 4 года назад

    i want to put with 4 icons but the AnimatedContainer fail, just do with 5 elements, i try with 3 element and is good, but with 4 element is very bad, how i do?

  • @nemanjasubotin5465
    @nemanjasubotin5465 5 лет назад

    Hey Jeff could you please make a video about passing the entire component as an argument? For example, creating a component using MatDialog and the function openDialog should accept a whichever component we pass in. In the official Material docs they did similar thing but they have placed 2 components in the same file... So there is no @ViewChild and no forwardref.

  • @mustafDev
    @mustafDev 3 года назад

    Riveeeeee

  • @jimmycanosa7496
    @jimmycanosa7496 4 года назад

    Does the animation works the same in iOS version of the app?

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

    can u make a tutorial on how to deal with listview builder when the data is of type "Future ". I dont know how to display this type of data using listview. Can u help plz.

  • @elaith9
    @elaith9 5 лет назад

    What is the name of theme for VS Code you are using?

  • @casul-4891
    @casul-4891 3 года назад

    Can you do the rive 2 tutorial ? Like creating side bar, or listview with it ?

  • @jatinraj4974
    @jatinraj4974 5 лет назад +2

    Make fully fleged application on flutter using firebase sir ..love your video💓✌️

    • @Fireship
      @Fireship  5 лет назад +7

      Working on full flutter course and the fireship mobile app, will be out soon :)

    • @jatinraj4974
      @jatinraj4974 5 лет назад

      @@Fireship thanks sir❣️💓

    • @Rassy_
      @Rassy_ 4 года назад

      @@Fireship What's the status of this and the link please?

  • @EddieDemon
    @EddieDemon 4 года назад

    Exporting to other more basic web-wares is not possible, right? Like GIF, animated SVG?

  • @dacratos416
    @dacratos416 3 года назад

    Can you upload a video on side bottom nav bar fade when scroll down

  • @nishantpandey1607
    @nishantpandey1607 4 года назад

    This is great but you need to slow down a bit. Really hard to catch up all along for beginners like me. Great job anyways! :)

  • @obengkuning3260
    @obengkuning3260 3 года назад

    Yea bois, now talking about future

  • @3litepker
    @3litepker 4 года назад

    Where does he get these shapes from, does anyone know?

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

    This is great but is there a animator for CSS?

  • @NoName-sw5ye
    @NoName-sw5ye 2 года назад

    try to click flare link but cant be reached

  • @marcosaureliosousagoncalve4208
    @marcosaureliosousagoncalve4208 5 лет назад +2

    I can use this in REACT-JS ? the flare

    • @Fireship
      @Fireship  5 лет назад +2

      They have JS sdk, but have not actually used it with react.

  • @floridosmarpepa8904
    @floridosmarpepa8904 5 лет назад +3

    this is very similiar on how the animation on the Godot engine works.

    • @Fireship
      @Fireship  5 лет назад +1

      It's also similar to Adobe AfterEffects, which is how I create most of the video animations.

    • @floridosmarpepa8904
      @floridosmarpepa8904 5 лет назад

      @@Fireship yes animating properties is a very smart way for animation. thank you for your effort on this amazing tutorial.

  • @amishanarsingani2307
    @amishanarsingani2307 5 лет назад

    Hey, i don't know which version i m using, but i could not find any edit vertices option for the shape.Looking for someone to help, Thank you in advance.

    • @theducksneezes4987
      @theducksneezes4987 5 лет назад

      Same here too. Anyone found out the answer?

    • @theducksneezes4987
      @theducksneezes4987 5 лет назад +2

      Click on the Shape, and press ENTER. That will enable Edit Vertices

  • @enzonicolas7998
    @enzonicolas7998 4 года назад

    what is the intro music?

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

    link of 2dimention website is not working

  • @drajakovic
    @drajakovic 4 года назад

    So Flare is Flash for Flutter?

  • @fanonxrogers109
    @fanonxrogers109 5 лет назад

    This was pretty dope, but I think you just went a tad bit fast in your explanations. But keep up the work.

    • @LukePighetti
      @LukePighetti 4 года назад

      I like to rewind the video if I missed something. I’m not going to slow down the rest of the class.

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

    2:16 all this time I thou T stand for transform 😂😂

  • @3litepker
    @3litepker 4 года назад

    FYI - the icons are under "No license" which means no one can use it. "The Unlicense" was probably the one you were looking for?
    _Disallowing use of your code might not be what you intend by “no license.” An open source license allows reuse of your code while retaining copyright. If your goal is to completely opt-out of copyright restrictions, try a public domain dedication instead._

  • @top10thingwhichyoushouldkn37
    @top10thingwhichyoushouldkn37 4 года назад

    Sir i am confused in mediaquery sir please make video for a responsive app

  • @dhiyaaulauliyaa3988
    @dhiyaaulauliyaa3988 3 года назад

    anybody has try using flare in flutter-web? mine just won't start in web, but with the exact same source code, it runs well in mobile. anybody have suggestion?

  • @Bielocke
    @Bielocke 4 года назад

    RIP Giphy

  • @DSodienye
    @DSodienye 5 лет назад

    Can flare animation be exported and used vanilla JS

    • @Rive_app
      @Rive_app 5 лет назад +1

      Yes, check out our JS runtime here: 2Dimensions.com/runtimes

    • @TimeoutMegagameplays
      @TimeoutMegagameplays 5 лет назад

      @@Rive_app 🤯

  • @SondreSrbye
    @SondreSrbye 5 лет назад

    Can you export flare to angular as well?

    • @guidorosso
      @guidorosso 5 лет назад

      We have a JS runtime, so you should be able to use that. All our runtimes are open source, so anybody can use them to create new ones. Check out all of them at 2Dimensions.com/runtimes

    • @Fireship
      @Fireship  5 лет назад +1

      I have not tried personally, but yes, Flare's JS runtime should work great in Angular.

  • @yohannes7975
    @yohannes7975 4 года назад +3

    ⚠️⚠️⚠️!PLEASE READ MY COMMENT!⚠️⚠️⚠️
    I know your busy so I am getting to the point can I download or convert these animations as mp4 for videos and if I can how.

  • @3litepker
    @3litepker 4 года назад

    I can't tell if it's the way you speak or your mic but any words with 's' or 'z' sounds are quite piercing to the ear when you have earphones in.

  • @luqeckr
    @luqeckr 5 лет назад

    wow, can we use this in html?

    • @Rive_app
      @Rive_app 5 лет назад

      Yep, check out our JS runtime at 2Dimensions.com/runtimes

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

    I can't believe rive replaced this

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

      What do you mean by that? We can't use Flare anymore? Currently I am exploring my options

  • @yeisonvelez1198
    @yeisonvelez1198 3 года назад

    I hope not to bother you, I have a question that I would like you to answer me. I want to do the following: the user writes his name in a text field. I previously have an animation made in flare and at a certain moment of the animation I want to put the name that the user has entered in this animation made in flare.
    for example I have the animation of a person showing a cell phone, I would like to put the text entered at a certain point in this animation. i.imgur.com/oapnbWE.jpg

  • @simply-dash
    @simply-dash 2 года назад

    That watermark is huge though-

  • @belahcenebenzaratahar5708
    @belahcenebenzaratahar5708 5 лет назад

    I wonder about the nature of the guys -6 for now- who disliked the video!

  • @divinedela9125
    @divinedela9125 5 лет назад +2

    1

  • @mandaputtra
    @mandaputtra 5 лет назад

    So what makes software so big?
    User experiences. Badum tsssstt

    • @Fireship
      @Fireship  5 лет назад +1

      A user interface is like a joke. It's not very good if you have to explain it 😜

    • @mandaputtra
      @mandaputtra 5 лет назад

      @@Fireship so true 😂