👨🏽‍💻 Let's clone a dribbble design using FLUTTER ♡

Поделиться
HTML-код
  • Опубликовано: 1 фев 2025

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

  • @createdbykoko
    @createdbykoko  2 года назад +43

    🥷🏽 FOLLOW ME
    Patreon: www.patreon.com/mitchkoko/
    Instagram: instagram.com/createdbykoko/
    Twitter: twitter.com/createdbykoko/
    TikTok: www.tiktok.com/@createdbykoko/

    • @neuraldevs2801
      @neuraldevs2801 2 года назад +3

      We need more of this even longer if possible

    • @shreshtavelur
      @shreshtavelur 2 года назад +2

      your flutter videos are very helpful for me, i watched your instagram ui clone video, can you make a video of designing post upload screen (ui) similar to instagram

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

      hi maybe you wanna clone Bla Bla Car

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

      also we dont need that cut offs, in that videos

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

      I had to watch this at .5 speed, learned a lot, thank you!

  • @coop4476
    @coop4476 9 месяцев назад +9

    This was one of the most helpful tutorials I've seen. Just seeing you work so efficiently from a design is awesome. Learned a ton especially about grouping with same type widget

  • @techwithupeh
    @techwithupeh 9 месяцев назад +2

    Bro , I can’t believe you taught me flutter within 24hrs , just 3 videos and I am making apps already ,
    Thanks man ❤

  • @cajaaiibtaAduunka
    @cajaaiibtaAduunka 2 года назад +17

    hey mitch i wanted to thank you for you education, i really like how simple and calm you educate us flutter so thank you bro and keep going,

    • @createdbykoko
      @createdbykoko  2 года назад +2

      Hey mohamoud! Thank you for this comment, it really means a lot to me ❤️ i’ll keep going for people like you 👨🏽‍💻✌🏾✌🏾

  • @Alshidimohammed55
    @Alshidimohammed55 2 года назад +101

    To do the curved edges on the white container. All you need to do is to give it a boxdecoration with border radius only left and right.

    • @createdbykoko
      @createdbykoko  2 года назад +41

      omg you can do that? that's so cool I had no idea haha MOE you are a legend!

    • @satyam3762
      @satyam3762 2 года назад +4

      @@createdbykoko it's so common these days, idk why you missed that, also you would have tried to create a container which can move up.

    • @saidaydn5159
      @saidaydn5159 2 года назад +15

      BorderRadius.vertical(top: Radius.circular(25)), u can use this ,too.

    • @mxoody
      @mxoody 2 года назад +1

      thnx moe

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

      @@satyam3762 do you have an example code or reference for moving up the container?

  • @imransefat8770
    @imransefat8770 2 года назад +11

    You can make the design using a Stack and make the curves using border radius on the Container Decoration. But yes you can make it scrollable or make it with bottom sheet as well.

  • @KhanAsim
    @KhanAsim Год назад +1

    21:06 their are flutter properties to give border radius to specific edges
    borderRadius: BorderRadius.vertical(
    top: Radius.circular(50),
    bottom: Radius.circular(0),
    )

  • @Zhang-Xiaoxiaoo
    @Zhang-Xiaoxiaoo 7 месяцев назад

    Man i really like the way you build app's they look so cool, and way better than other, Really Love your content

  • @chuckf1649
    @chuckf1649 2 года назад +5

    I think there's great value that we can get out of videos like this. Thanks a bunch! 😃

  • @tobias6361
    @tobias6361 2 года назад +2

    This is so satisfying and clean actually, I like how you go for it. Can you try a web dashboard or something like this? With material design, that would be nice to see!

  • @CodeOverloaded
    @CodeOverloaded 2 года назад +1

    saw you are nice in flutter, should make a video on errors we find on like opening the keyboard everything flushes .you know it will be more helpfull for everyone ,our flutter community wants to improve ...and also thanks for helping us

  • @rvwandering6227
    @rvwandering6227 2 года назад +8

    Love this style….so easy to follow. Thanks so much!

  • @kodespecs
    @kodespecs 2 года назад +2

    You can use the boxdecoration of the container and use border radius with only then you can use topLeft and topRight make the curve as it is

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

    thank you so much im in my freshie year and this one help me so much!! keep going mitch!!

  • @lanceolana8277
    @lanceolana8277 2 года назад +2

    Bro thankyou so much! Your channel helps me a lot. Keep it up :)

    • @createdbykoko
      @createdbykoko  2 года назад +1

      No problem Lance 👨🏽‍💻❤️

  • @beeshepard
    @beeshepard 2 года назад +2

    I like the unedited style.

  • @vicsystems
    @vicsystems 2 года назад +2

    cool guy, always delivering something rich.

  • @abdorizak
    @abdorizak 2 года назад +3

    💡tip: you can open project in the vscode through the terminal using "code ."

  • @harshasampath4085
    @harshasampath4085 3 месяца назад

    superb video..! pretty calm and quiet.. I love it..! 💙

  • @lfcaroprese
    @lfcaroprese 2 года назад +2

    If you want to made a circular border only in the top you need to use BorderRadius.Vertical( Radius top : BorderRadius.Circular(20))

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

    You make seem so easy, thanks you inspire me.❤❤❤

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

    Dude i really appreciate your awesome tutorials, cheers bro.

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

      No problem 😉 that makes me happy that it helps you👨🏽‍💻❤️

  • @matafungsi89
    @matafungsi89 8 месяцев назад

    Keep it up. Easy to understand and follow especially for beginner like me with basic tag that u used.

  • @ebrahimmansur9815
    @ebrahimmansur9815 2 года назад +2

    A quick way to open an app in vs cod is to cd in the project when created and type in -> code .

    • @createdbykoko
      @createdbykoko  2 года назад +1

      Haha thanks for the tip !

    • @distributedchaos5129
      @distributedchaos5129 2 года назад +1

      You can directly create flutter project in vscode by pressing ctrl+shift+p > Flutter:New Project > select base folder to create project folder > give name to your app and app folder. Once the files are created the main.dart will open directly.

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

    Hey Mitch first of all you don't know how you have made flutter simple for me , thanks soo much
    Secondly i think the place you used a Container was supposed to be a stack, the entire two position(blue background and white container) are supposed to be stacked instead of creating the container as a stack
    Anyways that's a very good video 🎉

  • @arjunc1482
    @arjunc1482 2 года назад +2

    This type of video is really helpful....please make more of dribble clone videos❤️

    • @createdbykoko
      @createdbykoko  2 года назад +1

      Haha hey Arjun! Glad it helps! I love cloning dribbble designs so i will do more hehee

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

    woah bro It 's while i don't see the video you improve man !

  • @neuraldevs2801
    @neuraldevs2801 2 года назад +2

    Since you said your are a teacher can we create a student management app with Flutter i always love your tutorials bro i love how you explain thanks for the tutorials bro ❤️❤️❤️. Always one of the best tutors 👍👍👍👍

    • @createdbykoko
      @createdbykoko  2 года назад +1

      Thanks haha and yeah I am working on something similar to that 👨🏽‍💻

  • @sebamutuku-v4t
    @sebamutuku-v4t Год назад +2

    The emoticonFace column fields looks like repeated data that can be rendered through a list or just looping through some data and then rendering the column

  • @mohamedzahar7877
    @mohamedzahar7877 4 месяца назад +1

    Easy and helpful, thank you

  • @ChigozieImmanuelEzeh
    @ChigozieImmanuelEzeh 8 месяцев назад +1

    Really dope. I learnt a lot from this video ❤

  • @WonderousArmy
    @WonderousArmy 11 месяцев назад +1

    At 21:35 , you can do a code like this to add curve to only top left and right:
    Expanded(
    child: ClipRRect(
    borderRadius: BorderRadius.only(topLeft: Radius.circular(50),topRight: Radius.circular(50),),
    child: Container(
    color: Colors.white,
    ),
    ),
    ),

  • @thenightguy6816
    @thenightguy6816 2 года назад +2

    The new style looks cool , Keep it up !!

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

    Thank you so much for showing us how you do it. Good job!

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

    Really dope man helped me a lot in my app creation

  • @henryriehl2058
    @henryriehl2058 2 года назад +2

    Hey, nice face reveal my dude! Hope your startup works out :)

    • @createdbykoko
      @createdbykoko  2 года назад +1

      Thanks Henry! How is flutter going for u?

  • @iangithinji13374
    @iangithinji13374 2 года назад +1

    you make me love flutter more by the day. thanks

  • @MWStudiooo
    @MWStudiooo 2 года назад +2

    One request Can you start series on Custom Painters and Animations ❤️ Please

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

    Thank you dear, you did the lesson successfully

  • @neuraldevs2801
    @neuraldevs2801 2 года назад +2

    Keep up the good work 👍👍💕

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

    thank you so much i love the way you speak and style ! cool! cool ! cool !

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

      Haha hey thanks! Glad you like it 👨🏽‍💻❤️ how’s flutter going so far for u?

  • @david_junior
    @david_junior 2 года назад +1

    What a nice video. Subscribed!

  • @vicsystems
    @vicsystems 2 года назад +3

    1:19 yes you do have quite alot

    • @createdbykoko
      @createdbykoko  2 года назад +1

      😅 I gotta clean it up one day hahaha

  • @PrateekAher
    @PrateekAher 2 года назад +4

    Cool walkthrough. Shouldn't you be making the search-field a TextField instead of a container?

    • @createdbykoko
      @createdbykoko  2 года назад +1

      Yup hahaha you should

    • @KaskoO83
      @KaskoO83 2 года назад +1

      That's exactly what I thought too when I saw the video ... Like ... wtf is he doing !? 🤪

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

      depends if you want to create search page seperately and when clicking the container you open the search page with a textField

  • @Syed-zc6tl
    @Syed-zc6tl 10 месяцев назад +1

    getting some error while creating container() under the row children[]

  • @aloktiwari3334
    @aloktiwari3334 2 года назад +1

    Really awesome work i learned so much from your video thank you keep going 👍

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

    thank you so much ! Now i'm able to know some widgets and how they works

    • @createdbykoko
      @createdbykoko  2 года назад +1

      Yay nice haha glad i could help. 👨🏽‍💻❤️

  • @Bruno_Mota
    @Bruno_Mota Год назад +1

    I loved this video! Thank you very much!

  • @dhrumikansara6182
    @dhrumikansara6182 2 года назад +6

    To get only the top part radius in exercise section. We can do something like
    ClipRRect(
    borderRadius: BorderRadius.only(
    topLeft: Radius.circular(50),
    topRight: Radius.circular(50),
    ),
    child: Container(..),
    ),

    • @_jfsanchez_
      @_jfsanchez_ 2 года назад +2

      ClipRRect(
      borderRadius: BorderRadius.vertical(top: Radius.circular(50)),
      child: Container(
      color: Colors.white,
      ),
      ),

  • @dylanroman7738
    @dylanroman7738 Год назад +1

    Great video man, make more videos like this pls

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

      glad you like them! check out my recent videos, I have made many UIs like these 💜

  • @michaeleke9632
    @michaeleke9632 Год назад +2

    Hi Mitch, using the method you used in this video, the Search bar is not clickable.

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

      Hey michael! You can use a textfield for the search bar. Here’s the tutorial for that ruclips.net/video/LFQgZc4oKa4/видео.html

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

    This was a fun activity. I even nailed the rounded top 😂

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

    putting emoticons is a lit 😁😁😁

  • @BenknoBK
    @BenknoBK Год назад +1

    thanks for the video, i would be great if you share your way of learning and the materials you used for learning flutter in a video

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

      noted! 💜 might be a good idea for a video

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

    I think this should have been implemented with a bottom sheet as this white area slides up through bottom nav actions

  • @surfacetechmarvellous7277
    @surfacetechmarvellous7277 2 года назад +2

    Thanks alot for sharing this knowledge
    God bless you 🤲🙏

  • @everything..in.all.
    @everything..in.all. 2 года назад

    thanks very much man this is very useful

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

    Can you make more complex designs from dribble ?

  • @mehdishahsavari954
    @mehdishahsavari954 2 года назад +1

    easy to follow, thanks .😍

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

    Hey, please make more such videos
    Much appreciated

  • @hamzael3613
    @hamzael3613 11 месяцев назад +1

    You can try:
    BorderRadius: BorderRadius.vertical(top: Radius.circular(20))

  • @anonymousghost5384
    @anonymousghost5384 Год назад +1

    Can I ask for design files(just image)
    Or could you plz suggest a way to improve our ui devel skill?

  • @youssefelhenawy4060
    @youssefelhenawy4060 2 года назад +1

    Nice video but wouldnt it be better to use a TextField for the Searchbar with a hint ?

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

    Hi Mitch Koko, can you please guide me how do you prepare all the assets of Dribble designs?

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

      You can just google them. Also flaticon.com is a great place too

  • @alextrajkosky4125
    @alextrajkosky4125 2 года назад +1

    do more of this type please

  • @islamal-domiatti1667
    @islamal-domiatti1667 2 года назад

    soft. Thank you

  • @AppWorkIndonesia-ck6qo
    @AppWorkIndonesia-ck6qo Год назад

    Thank you, awesome tutorial bro. Where do i get the emoji? I am using Windows PC

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

    Mate 20:03 what button are you pressing? I didn't quite understand what you was doing. Can you explain in detail?

  • @mirzashahbazbeg5996
    @mirzashahbazbeg5996 2 года назад +1

    Is this design responsive for small and big screen phone. How do you create responsive design from a figma design where we have to follow each pixel width and height?

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

    thanks for tutorial

  • @enemysahead16262
    @enemysahead16262 8 месяцев назад

    Sir. Sorry, I wanna asking.
    in the favorite icon for speaking skills 16 exercise (31:30), why wrap it again with ClipRect()? Just using the Container() it's can also make a radius, right? why use ClipRect() again?

    • @createdbykoko
      @createdbykoko  8 месяцев назад

      Yep you are correct. ClipRRect is just a quick way to do it. But you can it using containers too. In code, there are many ways to do the same thing :)

  • @hanzalaahmedmalik4296
    @hanzalaahmedmalik4296 13 дней назад +1

    Mitch what about the custom Nav bar? Any guess how to do it?

  • @ai-bloggers
    @ai-bloggers 2 года назад

    It's very, very great 👍🏻👍🏻👍🏻

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

    amaizng man

  • @syedharis2771
    @syedharis2771 2 года назад +2

    Awesome👍

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

    from the emoji part, where I need to take the emoji because I use the android studio emulator

    • @createdbykoko
      @createdbykoko  Год назад +1

      Hey I want to help. Can you rephrase your question? I want to understand to help u

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

      Ooo thankyou for you help.. so i started to code and follow you and i use the emulator android studio not the ios emulator..then i stuck at duration 17 mins something that u want to build for face emoticon.. when i see you just click on the emulator it has own emoji but when i want to find the emoji on android’s emulator i dont know how so i stop here 😅do you understand what i mean.. sorry for my english

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

      I hope you can help me 🥰your video easy to understand and follow.. im newbie and need tk repeat certain that you code so fast but i still can catch up the code and can you make the youtube video for short cut key and explain what the function we use this code 🙏🏻✨

  • @nikuzair3178
    @nikuzair3178 2 года назад +1

    Thank you

  • @양바름채널
    @양바름채널 13 дней назад +1

    안녕하세요 잘 보고있습니다
    감사합니다
    컨텐츠 간격줄때 패딩으로 주지 않고 사이즈박스로 주로 주시는데
    패딩이나 마진보다 우선시하시는 이유가 따로 있는지 궁금합니다

    • @createdbykoko
      @createdbykoko  12 дней назад

      저도 Padding이나 Margin을 많이 사용하지만, 가끔은 코드를 읽을 때 더 쉽게 보이도록 SizedBox를 사용하는 것을 선호합니다. 저에게는 순전히 코드를 최대한 명확하고 읽기 쉽게 만드는 관점에서의 선택입니다. 사실 큰 차이는 없으니, 편한 것을 사용하시면 됩니다.

  • @nupe_peace_tv
    @nupe_peace_tv 2 года назад +1

    hello... @mitch koko am new here. i just became interestd in learning programming recently. i dont have any knowledge of coding at all. nothing nothing... is it okay if i start with flutter/dart ??????? or i have to learn html and css first>>> because i wanna focus on a the one i can perfect>>>> thanksss please answer my question

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

    Can you share the source code so that I can compare with the code that I have. I seem to have a error but I can't locate it

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

    can you create dribble with bloc state management please?

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

    Very helpful 👌

  • @Sebastian-zs8cp
    @Sebastian-zs8cp 11 месяцев назад

    How do I start if I have a custom view that is not made with Material Design? Wrong way and right way? I don't know where the beginning is

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

    Hi My friend i hope you're well, regards from Colombia, can i ask you a question please? What si the site where You take the example for the app? Can You give me the name or url please? Thanks My friend, Nice video! 🙏🏼💪🏼

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

    Hi Mitch, Thank you for your tutorial, i am just following you but i am not able to get same in my flutter, could you help?
    when i try to add import, for you auto complete is showing but for me not shows, also in main.dart when you click bubble its shows home page url to select but for me not shows same.

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

    I'd like to buy your course in gumroad but I'd like to see any type of proof about the content in your course

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

    what about the source code to follow missing parts ?

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

    Hi, I'm trying to do a functionality which matches the face from firestore database multiple users profile image and compare it to the recently taken. If it matches timer starts. If don't just give error message.
    Can u guide how to implement this.
    And the users profile I'm using are not the user I logged in with, they are subusers. So that why I cannot jse local auth face id detection.

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

    How did you get to add emojis to your code?????? Can somebody help answer this?

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

    Please share the code for this one

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

    Very good👍

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

    please share us modern icons 🙏🙏🙏🙏

  • @ShahanGhani-m1c
    @ShahanGhani-m1c Год назад

    I really like your video and subscribe, keep going on, Bro actually i am Django developer and want to learn now UI with flutter so to create a complete mobile app,

  • @saidaydn5159
    @saidaydn5159 2 года назад +1

    267 lines Really???
    you could've made it shorter to use class and it would be more advanced.
    anyway thanks for your effort.

  • @novrain7310
    @novrain7310 10 месяцев назад +1

    Is that code working a android emulator

  • @ai-bloggers
    @ai-bloggers 2 года назад

    I don't have these icons.(((

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

    Is think design responsive?

  • @云起张
    @云起张 11 месяцев назад

    Do you have a bilibili account?It would be nice if you could do some chinese lessons.

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

      Sorry I am not chinese unfortunately

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

    Pls provide the source code 🥺

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

    Super