Online Shop App - Flutter UI - Speed Code

Sdílet
Vložit
  • čas přidán 28. 07. 2024
  • Today I will share with you a nice and clean Online Shop app UI by using #Flutter.
    Flutter Shop App Template: github.com/abuanwar072/E-comm...
    On our E-commerce app #UI has two pages one for the product page which has a horizontal list of categories then a list of our products. Then on the details page, it shows the price and a short description of the product with the Buy Now button. The best part of our E-commerce app is, each product has its own color which looks great.
    Learn to use SVG icons, passing data from one screen to another screen, hero animation while navigating to the detail page, create your own button widget from MaterialButton, and more.
    ►Source Code: bit.ly/3itixC7
    ►For the 3D intro, I'm using Rotato: bit.ly/3heGagj
    ► Social Media
    GitHub: github.com/abuanwar072
    Twitter: / theflutterway
    Twitter: / abuanwar072 (my personal profile)
    Facebook: / theflutterway
    ► Timestamps
    0:00 Intro
    0:38 Project Setup
    2:15 Home Page
    11:14 Details Page
    Thanks for watching!
    Make sure to like + Subscribe For More!

Komentáře • 771

  • @ZulhamErtanto
    @ZulhamErtanto Před 4 lety +25

    Abu Anwar, you nailed it once again, as always, wow, amazing result, more better when you choose vector or svg rather than png as your assets ( compare with the Furniture videos bit pixelated ), and yes, the animation. Well done

  • @IshanKesharwani
    @IshanKesharwani Před 4 lety +11

    The more I see flutter videos the more I want to learn it, they are super easy to learn and way better in terms of user experience.

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

    Just a week ive been into flutter and ive found your channel , such great content, keep it up man!

  • @Mohammad3id
    @Mohammad3id Před 3 lety +62

    Man you make it look so easy, it's pretty amazing and creative.
    I started learning flutter recently, and this video actually made me more confident that I can make great looking apps with what I know already about flutter as mostly no 'rare' or 'weird' widgets were used in this, instead most of them were pretty common, yet it looks very nice.
    Thanks for the inspiration sir, I hope your channel keeps growing, you have a new subscriber.

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

      Happy to hear that!

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

      And how is your learning exp after 3 years and was it hard or easy and the only thing is hard for me now is to right the code on my own without video or any help 😢😢😢

  • @orlumbuspirate330
    @orlumbuspirate330 Před 3 lety +16

    loved the format and it was so easy to follow what's going on. thank you! 💘

  • @Pedro5antos_
    @Pedro5antos_ Před 3 lety +8

    I've been learning a lot through your channel, mate! THANK YOU for the effort on posting great content!

  • @dhiaeddineabdelli4296
    @dhiaeddineabdelli4296 Před 3 lety +7

    Please don't stop making us happy and confident ♥ we appreciate ♥

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

    I am bingewatching your videos. And I have to say, I love your style of code management

  • @karthigadevi7227
    @karthigadevi7227 Před 3 lety +41

    Great job... I am completely new to this field... Even I can follow ur steps.. It gives me confidence.. Thank you for your kind and smart work.. Pls keep going... ... U will get more subscribers like me

  • @annarugoli6080
    @annarugoli6080 Před rokem

    THIS IS CRAZY. Man, you're just incredibly cool. I am learning flutter recently. The fact that I found you is a miracle! You are really cool. For the past 12 hours I've been tinkering with your code. You are a great programmer, but the fact that Google has changed the whole syntax so much in two years is terrible. I do not understand this. For the last two hours I've been trying to get "ItemCard" to work. I have been programming in python for a long time and know css, but flutter breaks my brain.
    Many thanks for your work! 😄

  • @wotarra96
    @wotarra96 Před 2 lety +6

    Love how organized the codes are with classes. Learned a lot from u man!

  • @muhammadnasreldin
    @muhammadnasreldin Před 4 lety +4

    I just start to learn flutter one week ago , your videos become my daily inspiration for coding 🖐️❤️

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

    This was awesome to watch even tho I am not gonna use flutter for a while currently but its super easy! 👌🏻

  • @mutluemre93
    @mutluemre93 Před 4 lety +7

    Great work! No need to speak, just flow the codes. I like that format. :)

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

    Wow, your coding ability is pretty amazing. I had never seen others code process, algorithm gives me to see it. I really respect this youtuber guy. thanks for gives an oppertunity to watch your wonderful code.

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

    Você é demais! Aplicativo feito com excelência, meus parabéns!

  • @_mansoor
    @_mansoor Před 2 lety

    After A Year, still not boring...
    Awesome, kudos!!!

  • @kelvinotieno4381
    @kelvinotieno4381 Před 3 lety

    You are awesome...I think this is the best way to learn if you are not like a newbie in software dev. Building small apps like to do list apps is great if you are starting out but you just don't learn as much....

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

    Hi,
    Really strong job. The way coding is organised with classes and these widgets. Great job.
    Thanks !

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

    Great work! It was really good example for me(beginner). Loved it. Thank you.

  • @Losquepasaremoselsemestre

    Gran diseño de interfaz, lo seguí paso a paso y va genial, hubieron errores al compilar pero eran descuidos míos.
    Sería interesante un video continuando esto pero con la lógica que se requiere.

    • @carlosenrique1700
      @carlosenrique1700 Před 2 lety

      Bro, en esta parte del codigo no te dio error? en el ".copyWith"(fontWeight: FontWeight.bold) del body

  • @ariakamandanu3282
    @ariakamandanu3282 Před 3 lety

    Really love the music. Such great video.

  • @PrabowoMurti
    @PrabowoMurti Před 3 lety +10

    Thank you. I felt like watching Sim City play growing to 1 million pop.

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

    you are so amazing doing great work for opensource community!!!
    such a excellent work Thank you!!!!

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

      Just keep supporting us like this🙏, more are coming 🤗

  • @gabrielcustodiodasilva

    You so so fast, amazing and creative! Awesome!

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

    you are first people i flow , good job ! Thank you !

  • @ChristianMayori
    @ChristianMayori Před 3 lety

    it's beautiful!!! thanks for idea! psdt: great work!

  • @chrisogonas
    @chrisogonas Před 2 lety

    I love it! Thanks for sharing the work.

  • @stephenmugisha5253
    @stephenmugisha5253 Před 4 lety +7

    Great tutorial...And great background song.

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

    Great tutorial,
    Love so much with the music 😄😁

  • @arielbulan6226
    @arielbulan6226 Před 3 lety

    This is a big help to us newbies, Great job...Thank you very much.

  • @YodiSatriani
    @YodiSatriani Před 3 lety

    Didn't know Hero before, now I'm amazed and will try! Thank you!

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

    Your app looks awesome, congratulations!!!

  • @subtainmalik7375
    @subtainmalik7375 Před 4 lety +7

    A great channel for understanding hands-on development practical work

  • @HabiasaDeveloper
    @HabiasaDeveloper Před 4 lety +16

    That's looks hard but when i've watched your videos, that looks so so easy

  • @AliSaeed
    @AliSaeed Před 3 lety

    I would prefer this tutorial with commentary and with normal speed, but still with all resources provided its an amazing tutorial to learn.

  • @makemypetgamedevprocess6475

    Love your vids, your code is so clean. You are achieving awesome results, 👍

  • @codyzhu6114
    @codyzhu6114 Před 3 lety

    really nice and elegant, i am now a iOS developer, this tutorial and bgm just like a very efficient and amazing travelling of flutter project in practice... Thanks!

  • @hemingmathews7790
    @hemingmathews7790 Před 3 lety

    The app UI is so classy and beautiful just waaooo.

  • @AlmiraTechId
    @AlmiraTechId Před 4 lety +8

    i love your coding style broo ...

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

    this tutorial learn me a lot of things .. thank you sir for the great tutorial.

    • @TheFlutterWay
      @TheFlutterWay  Před 3 lety

      Glad to hear that

    • @JobaerArman
      @JobaerArman Před 3 lety

      I'm too learning a lot watching your videos. This is quite amazing that we get learn from speed coding. Such an amazing work. Keep up the good work.

  • @rikiamaru
    @rikiamaru Před 3 lety

    i dont know what is happening, but i smile most of the time watching this video, damn this is beautiful

  • @deepakkumarraushanbs21b012

    I love your work.

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

    Dude, you are amazing! The Flutter HERO

  • @goldstein47
    @goldstein47 Před 4 lety +1

    Thank god i stumbled on this channel. I thought all those designs were fake and can't be done solely in Flutter untill i saw it made right here.
    Btw, can you please show me the direction to start learning Flutter. Book, tutorials, hell even make a new tutorial for us. You are going to be huge bud.

    • @TheFlutterWay
      @TheFlutterWay  Před 4 lety +1

      Thanks it means a lot for us.
      you may check this one
      www.udemy.com/course/flutter-bootcamp-with-dart/

  • @10trends57
    @10trends57 Před 4 lety +1

    Great tutorial, helped a lot.

  • @rampun5788
    @rampun5788 Před 4 lety +1

    Great!! It helped me a lot. Thank you

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

    Great job. You make it look easy.

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

    WTF!, You're the best one! 🔥

  • @master-b8437
    @master-b8437 Před rokem

    This is super! Good work

  • @t0nyz0
    @t0nyz0 Před 4 lety

    So well done, thank you!

  • @ArtflixYT
    @ArtflixYT Před 4 lety +1

    Nice. Thanks for the video. i was Inspired by this video ❤

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

    Great job! That was amazing

  • @xdli2879
    @xdli2879 Před 4 měsíci

    非常感谢,从你的项目中我学到了许多。

  • @svgsport9043
    @svgsport9043 Před 4 lety +1

    ı watched your videos and ı think flutter is easy . you are very good teacher. THANK YOU SO MUCH FROM TURKEY

  • @sangamrimal3610
    @sangamrimal3610 Před 4 lety +24

    No need to speak. Still powerful . Great

  • @thithuyta6771
    @thithuyta6771 Před 2 lety

    So beautiful. Thanks you. Your code is very cool!

  • @RafaelSilva-vt3zk
    @RafaelSilva-vt3zk Před 3 lety

    I love your UI, simple e beautiful.

  • @bashir26
    @bashir26 Před 4 lety +1

    Awesome tutorial. Thank you very much

  • @Saransha
    @Saransha Před 3 lety

    Lovely UI. Inspired to learn more.

  • @moneeralmatri9670
    @moneeralmatri9670 Před 2 lety

    Thank you so much for your good explaining

  • @universitassubang423
    @universitassubang423 Před 3 lety

    I learned flutter from your video, thanks for the knowledge

  • @georgemelo4565
    @georgemelo4565 Před 4 lety

    Amazing
    . I will try it, Thanks!

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

    Thank you for this amazing video! But I had a problem, in the listview there are difffrent sctions, jewlerry, handbags, etc. So can you help in making diffrent flutter pages appear when one of them is clicked?

  • @flutterquickdemo2468
    @flutterquickdemo2468 Před 4 lety

    Sense of colop picking is amazing

  • @sjeditions
    @sjeditions Před rokem

    Very impressed by your way of creating all the effects and doing it so effortlessly.. em gonna make a clone of this app by using the assets you have provided link.. very good work done though

  • @braasite
    @braasite Před 2 lety

    Thank you for the effort on posting great content 🙂

  • @amanpatel4867
    @amanpatel4867 Před 3 lety

    thanks man for this video. It's best of all, easily understandable by anyone.
    Can you please add feature add to cart functionality with & without using BLoC pattern in the upcoming videos in this same module. Keep going, It's excellent stuff

  • @lapridayim4287
    @lapridayim4287 Před 4 lety +1

    Thank you for this tutorial 🙂

  • @selvarajant
    @selvarajant Před 4 lety +1

    awesome way of learning. kudos. 👍🏻

  • @santiagomamani6111
    @santiagomamani6111 Před 4 lety

    Dude, you are amazing!

  • @rushichaganti4633
    @rushichaganti4633 Před 2 lety

    Loved it
    U earned a new sub

  • @zapeeosheikh
    @zapeeosheikh Před 2 lety

    Amazing Session
    Fruitfull Knowledge ❣️

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

    this video tutorial is inspiring. Thank you sir

  • @techseminal3355
    @techseminal3355 Před 3 lety

    great work with good background score

  • @photogenie7298
    @photogenie7298 Před 3 lety

    Nice video. What i want to know is What theme are you using on your VS Code? I like the straight dotted lines for each nest of code

  • @ayubkara1092
    @ayubkara1092 Před 3 lety

    wow i'm very impressed man

  • @nithinr999
    @nithinr999 Před 3 lety

    Neat and superb , Bgm also feels great 👍

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

    Can I ask what extension you used? That dashed-line indentation is so cool.

  • @nishantsharma4313
    @nishantsharma4313 Před 4 lety +1

    Awesome 👍. I enjoyed it a lot.

  • @hp6385
    @hp6385 Před 4 lety +16

    These kinds of videos are the best!!!
    As I can't stay focus for long where things are explained by smbdy, but this style of teaching, I think it's the best way to learn (in my opinion)
    Thz u for your hardwork

  • @waltergutierrez910
    @waltergutierrez910 Před 3 lety

    Excellent video!!!

  • @raitasorin
    @raitasorin Před 4 lety +1

    Wooooow you are The Best on this Planet

  • @korndev6862
    @korndev6862 Před 3 lety

    So cool!

  • @arafathussain851
    @arafathussain851 Před 3 lety

    Too good man!! thanks for sharing!!!

  • @leeboy_
    @leeboy_ Před 4 lety

    The music beautiful 👌

  • @mr.knight8967
    @mr.knight8967 Před 2 lety

    thank you for sharing this , let me tell you , i learn lot from this , but nor this is 2022 so little change is also i have to do and your 30 min. video take my almost half day but at the end i fill well and thank you , also hope for sharing similar lot of contain

  • @ShubhamSharma-xt5ft
    @ShubhamSharma-xt5ft Před 3 lety +1

    great source of learning of flutter beginner

  • @amanilsisay1462
    @amanilsisay1462 Před 4 lety

    Special from Eastern Africa Ethiopia thanks you create a room for us to learn flutter because there is no way to get udemy course because of lack of foreign currency thanks to you we can get update course through your channel it helps me a lot thank you again

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

    Hi, 10:00 When you are building the Card, how could I place an IconButton.ADD in the bottom right corner of the bag, to add to the cart, without opening the item details? With Stack? How can I do this?

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

    Sweet. enjoying your work

  • @matheuskoba
    @matheuskoba Před rokem

    Thanks for your videos

  • @agustinlenga25
    @agustinlenga25 Před 2 měsíci

    Great content!
    Question: Which VS extention is the one that links each widget with small continuous lines? That would come up pretty handly!
    Thanks!

  • @PKDragoN999
    @PKDragoN999 Před 4 lety +1

    Awesome man!

  • @techandro6093
    @techandro6093 Před 3 lety

    nice tutorial and very useful

  • @mtoheed1085
    @mtoheed1085 Před 3 lety

    I really appreciate it. good work bro

  • @whoadityanawandar
    @whoadityanawandar Před 2 lety

    Thank you for the videos. I have a question, where do you get these images from? Also, could you build a UI for an android developer portfolio app? Thanks.

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

    Very good video ..the best.. to learn.. thank you !

  • @shivachittiprolu635
    @shivachittiprolu635 Před 4 lety +1

    Beautiful ❤️

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

    can u show me how to navigate to other page when tapping other Categories like Footwear