Flutter UI Tip 3: Popup Card

Sdílet
Vložit
  • čas přidán 27. 07. 2024
  • Easily create a popup effect for cards or buttons. Invest in yourself! Use my link and check out the first chapter of any course for FREE! bit.ly/3qLlX7g
    --
    Program I use for mockups: bit.ly/rotatopro
    This is an affiliate link, if you purchase from this link then I'll earn a small commission. Which is a great way to support the channel :)
    --
    Check out my Flutter Animation and Performance course.
    Discounted link: bit.ly/funwithcourse
    Or use the promo code: FUN
    for a discount at checkout: courses.funwith.app
    --
    Github code: github.com/funwithflutter/flu...
    --
    Join me on the socials.
    Twitter: / gordonphayes
    This video was sponsored by DataCamp.

Komentáře • 73

  • @FunwithFlutter
    @FunwithFlutter  Před 3 lety +4

    Invest in yourself! Use my link and check out the first chapter of any course for FREE! bit.ly/3qLlX7g

  • @enchance
    @enchance Před rokem

    This is great man. I'm working on my own app right now and I think I might have a place for this. Amazing stuff.

  • @AndreasR.95
    @AndreasR.95 Před 3 lety +5

    Best Flutter channel out there!

  • @dylanroman7738
    @dylanroman7738 Před rokem

    thank u sm brother... this is just what I needed

  • @danimanabat5791
    @danimanabat5791 Před 2 lety

    great tutorial!

  • @NajeebAslan
    @NajeebAslan Před 2 lety

    Thank you so much 💓

  • @Mandoo145
    @Mandoo145 Před 3 lety +1

    What a nice video!!

  • @durgeshkudalkar6574
    @durgeshkudalkar6574 Před 3 lety +1

    Thanks bro, this video really helped me

  • @tadaspetra
    @tadaspetra Před 3 lety +3

    Great video! You have the nicest UI designs 🔥

  • @vbatan
    @vbatan Před 2 lety

    Thank You!Great job!

  • @codevillage4235
    @codevillage4235 Před 3 lety +1

    Super explanation. Carry on please.

  • @advaithsridhar9424
    @advaithsridhar9424 Před 3 lety +1

    Hey great video! Im having trouble updating the list with the new note (once someone hits the "add button"). Can you point me to the part of your code that does this update? would be really helpful!

  • @paynedanger1925
    @paynedanger1925 Před 2 lety +2

    Absolutely love this design! I am however having issues with the popup card going into full screen. I have copied the code exactly, and its still showing me a full screen of the dialog box. Has this happened to anyone else?

  • @_birdy_birdy
    @_birdy_birdy Před 3 lety +1

    Very nice 👍

  • @duarteleal5964
    @duarteleal5964 Před 6 měsíci

    A like, a comment and a sub for providing the source code

  • @jeromearenas8028
    @jeromearenas8028 Před 3 lety

    This is what container transform transition looks like, just add fade to exiting and entering widgets. Currently there's a package called "animations" officially release by flutter team long ago, the only problem is their container transform always transition to fullscreen not a dialog. btw Great job sir :)

    • @FunwithFlutter
      @FunwithFlutter  Před 3 lety

      Thanks for the info. Yeah I've used that OpenContainer before. Sometimes it works great, but I've also had times where I needed more control.

    • @vmkantu
      @vmkantu Před 2 lety

      I think that container transition best works when using search box like use case. Like you tap on a search box and it opens up to a new screen.

  • @mecil9
    @mecil9 Před 3 lety +1

    thanks,it's usefully!

  • @sinaebr7337
    @sinaebr7337 Před 3 lety +1

    perfecttttttt
    thank you sooo much

  • @RobertBrunhage
    @RobertBrunhage Před 3 lety +2

    Looks great, awesome video!

  • @marc7951
    @marc7951 Před 3 lety +4

    Hello Fun with Flutter,
    I love your tutorials.
    Can i use this animation code for my own Apps?

  • @jaayaustin336
    @jaayaustin336 Před 2 lety +2

    Your voice bro, gaddamn❤️

  • @laythabdulkareem1887
    @laythabdulkareem1887 Před 3 lety +1

    You are a Flutter Rockstar 😎

  • @Raziem
    @Raziem Před rokem

    Is your animation course still up to date? if so I'd willing to buy it!

  • @artemartem6993
    @artemartem6993 Před 11 měsíci

    Hi ! Could you help me with one question? How can I transfer entering text from popup card to field on another creen if popup card is StatelessWidget? If I understend right, we can't using TextEditingController for StatelessWidget.

  • @weareorpheez
    @weareorpheez Před 5 měsíci

    Can someone use this for any kind of popup? and also how can I add dark background overlay under the popup so there is contrast on the app?

  • @rc-pilot9131
    @rc-pilot9131 Před 3 lety

    Thanks a lot, but how did you that amazing intro with the turned phone?

  • @santosvision
    @santosvision Před rokem

    Thank you for this awesome tutotiral. however, with the no-null-safety upgrade in flutter 3.0 this is getting a lot of errors. would you be so kind to revise and update the tutorial or the github? or if you know any other video tutorial that you can point us out with would be really helpful and appreciated it. nevertheless thank you for sharing this bro!

  • @eliasayele1102
    @eliasayele1102 Před 3 lety

    Thanks bro

  • @NeraJima
    @NeraJima Před 2 lety

    Is there any reason why the animation is not occurring for me? I copied the tutorial exactly and the button doesn't animate into the popup. Instead the popup just appears. Help please.

  • @lamo5751
    @lamo5751 Před rokem

    i have a problem with herodialogroute settings flutter showing me error can u help pls (flutter 3.3.2)

  • @funandgameswithzayn
    @funandgameswithzayn Před 2 lety

    this code is outdated having issue with rect tween file can you please help or tell the right way

  • @mugen153
    @mugen153 Před 2 lety

    Fucking legend man, love you

  • @moammarqaddafi4858
    @moammarqaddafi4858 Před 11 měsíci

    There is no discount code bloc at the purchase

  • @radhakanna6005
    @radhakanna6005 Před 3 lety

    Plz post smart water bottle app in flutter bcz no one did before

  • @tentacle_sama3822
    @tentacle_sama3822 Před 2 lety

    how do I dismiss after submit

  • @anomihekenneth9586
    @anomihekenneth9586 Před rokem

    is your animation class here on youtube

  • @ahmadabdelaziz1396
    @ahmadabdelaziz1396 Před 3 lety

    hey buddy , i've just copied your code , but i'm facing an issue , when the dialog pop up , the screen beneath are black and opaque , although opacity = false ,

    • @FunwithFlutter
      @FunwithFlutter  Před 3 lety

      Eh not sure. You can get the code used in the video from Github

  • @faheemahmad3957
    @faheemahmad3957 Před 3 lety

    very very difficult...please teach us how to do this using GETX package...and make it simpler like a packge

  • @shei69
    @shei69 Před 3 lety

    Which font ?

  • @markpolak8317
    @markpolak8317 Před 2 lety

    If somebody skips the whole materialApp setup, and goes without material or cupertino, using the WidgetsApp , you need to add navigatorObservers: [HeroController()], to the widgetsApp, without that no transforming animation happens.

    • @akankshaverma9712
      @akankshaverma9712 Před rokem

      I've faced the same issue, can you tell me how to add navigatorObservers

    • @markpolak8317
      @markpolak8317 Před rokem

      @@akankshaverma9712 the WidgetsApp has a property navigatorObservers which accepts an array thats the exact thing in my comment

  • @tomicriedel5005
    @tomicriedel5005 Před 3 lety

    Hey!
    It's not a design tutorial, but can you make a tutorial on how to make Streak days? I am in the process of programming a Streak app (just for practice) and have no idea how to solve this.

  • @venkateshsetty7246
    @venkateshsetty7246 Před 3 lety

    Hi
    When I run flutter cmd it shows
    BITS Transfer
    Can you help

  • @kbo359
    @kbo359 Před 2 lety

    thx m8t

  • @codeaxen
    @codeaxen Před 2 lety

    hello man... the explanation is really all over the place i wish if you could stick on one example would really be great.. a bit confusing

  • @callofdutymobile1811
    @callofdutymobile1811 Před 3 lety

    hi please put the github link

  • @phillip_jacobs
    @phillip_jacobs Před 2 lety +1

    Seethroughness - Maybe not an official word haha but definitely used out there: en.wiktionary.org/wiki/see-throughness

  • @NajeebAslan
    @NajeebAslan Před 2 lety

    Thank you so much 💓