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

  Рет қаралды 193,968

Mitch Koko

Mitch Koko

Күн бұрын

💬 Chat App w/ Notifications • mitchkoko.gumroad.com/l/ChatA...
📱 Flutter Courses • mitchkoko.app/
👨🏽‍💻 I'm coding a startup.. / mitchkoko
/ createdbykoko
/ createdbykoko
/ createdbykoko
💰 Book Consultation Call • mitchkoko.gumroad.com/l/CallW...
~ ;
A bit different from my usual tutorial style. Much more casual and unedited lol. The dribbble design is from dribbble.com/shots/15002657-M...

Пікірлер: 182
@createdbykoko
@createdbykoko 2 жыл бұрын
🔥📱 Flutter Templates • mitchkoko.app/ 🥷🏽📱 Minimal Social App • mitchkoko.gumroad.com/l/MinimalSocialApp 💰📱 Minimal Ecommerce App • mitchkoko.gumroad.com/l/MinimalEcommerceApp This is a little different from my usual tutorial style. Much more casual and unedited, that's why it's 38 minutes haha. Also let me know if anyone has a particular design they'd like me to clone. If I like it, I will make a video for it 👨🏽‍💻 Thanks for watching!
@neuraldevs2801
@neuraldevs2801 2 жыл бұрын
We need more of this even longer if possible
@shreshtavelur
@shreshtavelur 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 Жыл бұрын
also we dont need that cut offs, in that videos
@rockogs
@rockogs Жыл бұрын
I had to watch this at .5 speed, learned a lot, thank you!
@coop4476
@coop4476 2 ай бұрын
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
@chuckf1649
@chuckf1649 2 жыл бұрын
I think there's great value that we can get out of videos like this. Thanks a bunch! 😃
@VIVID-Facts1
@VIVID-Facts1 12 күн бұрын
Man i really like the way you build app's they look so cool, and way better than other, Really Love your content
@tobias6361
@tobias6361 Жыл бұрын
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!
@missyplays6117
@missyplays6117 Жыл бұрын
thank you so much im in my freshie year and this one help me so much!! keep going mitch!!
@heerahyouvraj6878
@heerahyouvraj6878 Жыл бұрын
Thank you so much for showing us how you do it. Good job!
@techwithupeh
@techwithupeh 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 жыл бұрын
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 жыл бұрын
Hey mohamoud! Thank you for this comment, it really means a lot to me ❤️ i’ll keep going for people like you 👨🏽‍💻✌🏾✌🏾
@rvwandering6227
@rvwandering6227 2 жыл бұрын
Love this style….so easy to follow. Thanks so much!
@createdbykoko
@createdbykoko 2 жыл бұрын
No problem 😛
@briankiprop7743
@briankiprop7743 8 ай бұрын
Really dope man helped me a lot in my app creation
@codespec
@codespec Жыл бұрын
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
@aloktiwari3334
@aloktiwari3334 Жыл бұрын
Really awesome work i learned so much from your video thank you keep going 👍
@shiearco
@shiearco Жыл бұрын
Thank you dear, you did the lesson successfully
@matafungsi89
@matafungsi89 Ай бұрын
Keep it up. Easy to understand and follow especially for beginner like me with basic tag that u used.
@ChigozieImmanuelEzeh
@ChigozieImmanuelEzeh Ай бұрын
Really dope. I learnt a lot from this video ❤
@createdbykoko
@createdbykoko Ай бұрын
Lets gooo❤️
@Alshidimohammed55
@Alshidimohammed55 2 жыл бұрын
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 жыл бұрын
omg you can do that? that's so cool I had no idea haha MOE you are a legend!
@satyam3762
@satyam3762 2 жыл бұрын
@@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 жыл бұрын
BorderRadius.vertical(top: Radius.circular(25)), u can use this ,too.
@mxoody
@mxoody Жыл бұрын
thnx moe
@johnpaulico18
@johnpaulico18 Жыл бұрын
@@satyam3762 do you have an example code or reference for moving up the container?
@lanceolana8277
@lanceolana8277 2 жыл бұрын
Bro thankyou so much! Your channel helps me a lot. Keep it up :)
@createdbykoko
@createdbykoko 2 жыл бұрын
No problem Lance 👨🏽‍💻❤️
@neuraldevs2801
@neuraldevs2801 2 жыл бұрын
Keep up the good work 👍👍💕
@david_junior
@david_junior 2 жыл бұрын
What a nice video. Subscribed!
@afrasiabmahdy
@afrasiabmahdy 2 жыл бұрын
Dude i really appreciate your awesome tutorials, cheers bro.
@createdbykoko
@createdbykoko 2 жыл бұрын
No problem 😉 that makes me happy that it helps you👨🏽‍💻❤️
@everything..in.all.
@everything..in.all. Жыл бұрын
thanks very much man this is very useful
@mehdishahsavari954
@mehdishahsavari954 Жыл бұрын
easy to follow, thanks .😍
@imransefat8770
@imransefat8770 2 жыл бұрын
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.
@sameer.creates
@sameer.creates 24 күн бұрын
Yea i need to know how to do it with stack can you help? I need that scrollable sheet which will slide down and reveal a music player behind it
@theextrovert_
@theextrovert_ Жыл бұрын
woah bro It 's while i don't see the video you improve man !
@BrunoMotadeOliveira
@BrunoMotadeOliveira Жыл бұрын
I loved this video! Thank you very much!
@createdbykoko
@createdbykoko Жыл бұрын
My pleasure bro glad u like it
@pnat5239
@pnat5239 Жыл бұрын
thank you so much i love the way you speak and style ! cool! cool ! cool !
@createdbykoko
@createdbykoko Жыл бұрын
Haha hey thanks! Glad you like it 👨🏽‍💻❤️ how’s flutter going so far for u?
@nickphu699
@nickphu699 Жыл бұрын
thanks for tutorial
@arturodelosangeles
@arturodelosangeles 20 күн бұрын
amaizng man
@beeshepard
@beeshepard 2 жыл бұрын
I like the unedited style.
@CodeOverloaded
@CodeOverloaded Жыл бұрын
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
@subhamroy5368
@subhamroy5368 Жыл бұрын
Hey, please make more such videos Much appreciated
@arjunc1482
@arjunc1482 2 жыл бұрын
This type of video is really helpful....please make more of dribble clone videos❤️
@createdbykoko
@createdbykoko 2 жыл бұрын
Haha hey Arjun! Glad it helps! I love cloning dribbble designs so i will do more hehee
@vicsystems
@vicsystems 2 жыл бұрын
cool guy, always delivering something rich.
@createdbykoko
@createdbykoko 2 жыл бұрын
thank you :)
@islamal-domiatti1667
@islamal-domiatti1667 Жыл бұрын
soft. Thank you
@Jack_Ranold
@Jack_Ranold 9 ай бұрын
This was a fun activity. I even nailed the rounded top 😂
@_ace01
@_ace01 2 жыл бұрын
thank you so much ! Now i'm able to know some widgets and how they works
@createdbykoko
@createdbykoko 2 жыл бұрын
Yay nice haha glad i could help. 👨🏽‍💻❤️
@omninspire
@omninspire 2 жыл бұрын
Very helpful 👌
@nikuzair3178
@nikuzair3178 2 жыл бұрын
Thank you
@user-ot9qh3df1s
@user-ot9qh3df1s 11 ай бұрын
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
@dylanroman7738
@dylanroman7738 Жыл бұрын
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 💜
@anandprajapati7237
@anandprajapati7237 Жыл бұрын
putting emoticons is a lit 😁😁😁
@ai-bloggers
@ai-bloggers Жыл бұрын
It's very, very great 👍🏻👍🏻👍🏻
@syedharis2771
@syedharis2771 2 жыл бұрын
Awesome👍
@KhanAsim
@KhanAsim 10 ай бұрын
21:06 their are flutter properties to give border radius to specific edges borderRadius: BorderRadius.vertical( top: Radius.circular(50), bottom: Radius.circular(0), )
@surfacetechmarvellous7277
@surfacetechmarvellous7277 2 жыл бұрын
Thanks alot for sharing this knowledge God bless you 🤲🙏
@createdbykoko
@createdbykoko 2 жыл бұрын
Glad it helps 😇
@abdorizak
@abdorizak Жыл бұрын
💡tip: you can open project in the vscode through the terminal using "code ."
@youssefelhenawy4060
@youssefelhenawy4060 Жыл бұрын
Nice video but wouldnt it be better to use a TextField for the Searchbar with a hint ?
@thenightguy6816
@thenightguy6816 2 жыл бұрын
The new style looks cool , Keep it up !!
@createdbykoko
@createdbykoko 2 жыл бұрын
Thanks for the comment 😇
@babrygaledou6661
@babrygaledou6661 7 ай бұрын
Very good👍
@yasirarafath3552
@yasirarafath3552 Жыл бұрын
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.
@mirzashahbazbeg5996
@mirzashahbazbeg5996 Жыл бұрын
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?
@anonymousghost5384
@anonymousghost5384 11 ай бұрын
Can I ask for design files(just image) Or could you plz suggest a way to improve our ui devel skill?
@shashreesamuel
@shashreesamuel Жыл бұрын
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
@sidacademy764
@sidacademy764 Жыл бұрын
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.
@nupe_peace_tv
@nupe_peace_tv Жыл бұрын
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
@beneficialknowledge124
@beneficialknowledge124 Жыл бұрын
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
@iangithinji13374
@iangithinji13374 Жыл бұрын
you make me love flutter more by the day. thanks
@createdbykoko
@createdbykoko Жыл бұрын
I ❤️ flutter!! Hahahah
@ashokchandra4911
@ashokchandra4911 Жыл бұрын
Super
@Sebastian-zs8cp
@Sebastian-zs8cp 5 ай бұрын
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
@uguraggon6451
@uguraggon6451 Жыл бұрын
Mate 20:03 what button are you pressing? I didn't quite understand what you was doing. Can you explain in detail?
@Syed-zc6tl
@Syed-zc6tl 3 ай бұрын
getting some error while creating container() under the row children[]
@jimohhammed6409
@jimohhammed6409 11 ай бұрын
How did you get to add emojis to your code?????? Can somebody help answer this?
@enemysahead16262
@enemysahead16262 Ай бұрын
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 Ай бұрын
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 :)
@lfcaroprese
@lfcaroprese Жыл бұрын
If you want to made a circular border only in the top you need to use BorderRadius.Vertical( Radius top : BorderRadius.Circular(20))
@jesuslovesdanieli
@jesuslovesdanieli Жыл бұрын
can you create dribble with bloc state management please?
@kaiparado
@kaiparado 7 ай бұрын
what about the source code to follow missing parts ?
@alextrajkosky4125
@alextrajkosky4125 2 жыл бұрын
do more of this type please
@createdbykoko
@createdbykoko 2 жыл бұрын
Ok sure
@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! 🙏🏼💪🏼
@henryriehl2058
@henryriehl2058 2 жыл бұрын
Hey, nice face reveal my dude! Hope your startup works out :)
@createdbykoko
@createdbykoko 2 жыл бұрын
Thanks Henry! How is flutter going for u?
@sebastianestevezcarvajal3008
@sebastianestevezcarvajal3008 Жыл бұрын
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
@mukundieldridge7803
@mukundieldridge7803 7 ай бұрын
Please share the code for this one
@neuraldevs2801
@neuraldevs2801 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 жыл бұрын
Thanks haha and yeah I am working on something similar to that 👨🏽‍💻
@michaeleke9632
@michaeleke9632 Жыл бұрын
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 kzfaq.info/get/bejne/gqyBmr2UmdWvkWg.html
@AppWorkIndonesia-ck6qo
@AppWorkIndonesia-ck6qo Жыл бұрын
Thank you, awesome tutorial bro. Where do i get the emoji? I am using Windows PC
@AppWorkIndonesia-ck6qo
@AppWorkIndonesia-ck6qo Жыл бұрын
Nevermind, i found it. Press Windows + .
@flutterIgnite
@flutterIgnite Жыл бұрын
@mitchKoko . you're the man
@ghulammurtaza7959
@ghulammurtaza7959 Жыл бұрын
Hi Mitch Koko, can you please guide me how do you prepare all the assets of Dribble designs?
@createdbykoko
@createdbykoko Жыл бұрын
You can just google them. Also flaticon.com is a great place too
@wassaufkhalid8593
@wassaufkhalid8593 Жыл бұрын
I think this should have been implemented with a bottom sheet as this white area slides up through bottom nav actions
@createdbykoko
@createdbykoko Жыл бұрын
That’s a great idea ☀️❤️
@user-wo6qj1lm2x
@user-wo6qj1lm2x 9 ай бұрын
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,
@lophixarts
@lophixarts Жыл бұрын
Is think design responsive?
@vicsystems
@vicsystems 2 жыл бұрын
1:19 yes you do have quite alot
@createdbykoko
@createdbykoko 2 жыл бұрын
😅 I gotta clean it up one day hahaha
@MWStudiooo
@MWStudiooo 2 жыл бұрын
One request Can you start series on Custom Painters and Animations ❤️ Please
@createdbykoko
@createdbykoko 2 жыл бұрын
Yes definitely coming soon
@mdmiyamhosen7585
@mdmiyamhosen7585 8 ай бұрын
How to use emoji ?
@beelikeflutter
@beelikeflutter 3 ай бұрын
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 🎉
@PrateekAher
@PrateekAher 2 жыл бұрын
Cool walkthrough. Shouldn't you be making the search-field a TextField instead of a container?
@createdbykoko
@createdbykoko 2 жыл бұрын
Yup hahaha you should
@KaskoO83
@KaskoO83 2 жыл бұрын
That's exactly what I thought too when I saw the video ... Like ... wtf is he doing !? 🤪
@SudeepDasguptaiginition
@SudeepDasguptaiginition Жыл бұрын
depends if you want to create search page seperately and when clicking the container you open the search page with a textField
@ai-bloggers
@ai-bloggers Жыл бұрын
I don't have these icons.(((
@crexur8666
@crexur8666 7 күн бұрын
Gang Gang😭🤣
@flutterquick
@flutterquick Жыл бұрын
please share us modern icons 🙏🙏🙏🙏
@sawzarnilinhtay5551
@sawzarnilinhtay5551 2 жыл бұрын
u r myanmar, bro?
@dhairyshrivastava
@dhairyshrivastava 9 ай бұрын
Pls provide the source code 🥺
@novrain7310
@novrain7310 3 ай бұрын
Is that code working a android emulator
@createdbykoko
@createdbykoko 3 ай бұрын
Ofc
@kamomokgabudi5854
@kamomokgabudi5854 Жыл бұрын
Bro I need your help with my Flutter app design. Are you available for a quick chat?
@createdbykoko
@createdbykoko Жыл бұрын
I offer consultation for those that need mitchkoko.gumroad.com/l/CallWithMitch
@Randomzzzz27
@Randomzzzz27 Жыл бұрын
from the emoji part, where I need to take the emoji because I use the android studio emulator
@createdbykoko
@createdbykoko Жыл бұрын
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 🙏🏻✨
@santoslaguna13cls
@santoslaguna13cls 2 жыл бұрын
18:10 😂
@createdbykoko
@createdbykoko 2 жыл бұрын
HAHAHAHA 🤭
@santoslaguna13cls
@santoslaguna13cls 2 жыл бұрын
@@createdbykoko thank you for the code. I am learning dart. Then I will go to flutter afterwards. Thanks for the vid.
@createdbykoko
@createdbykoko 2 жыл бұрын
@@santoslaguna13cls no worries, good luck!
@user-yj5qf2fb5w
@user-yj5qf2fb5w 4 ай бұрын
Do you have a bilibili account?It would be nice if you could do some chinese lessons.
@createdbykoko
@createdbykoko 4 ай бұрын
Sorry I am not chinese unfortunately
@saidaydn5159
@saidaydn5159 2 жыл бұрын
267 lines Really??? you could've made it shorter to use class and it would be more advanced. anyway thanks for your effort.
@flutter6
@flutter6 2 жыл бұрын
You are very fast. in writing
@createdbykoko
@createdbykoko 2 жыл бұрын
In writing?? What do u mean haha
@flutter6
@flutter6 2 жыл бұрын
@@createdbykoko yes fast😝😝
@ebrahimmansur9815
@ebrahimmansur9815 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 жыл бұрын
Haha thanks for the tip !
@distributedchaos5129
@distributedchaos5129 2 жыл бұрын
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.
@user-jq5gr8gh3p
@user-jq5gr8gh3p Ай бұрын
borderRadius: BorderRadius.vertical(top: Radius.circular(50)) This property can be used to achieve radius on the top only.
@WonderousArmy
@WonderousArmy 4 ай бұрын
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, ), ), ),
Top 30 Flutter Tips and Tricks
6:50
Flutter Mapp
Рет қаралды 540 М.
🖥📱RESPONSIVE DESIGN • Flutter Tutorial
8:03
Mitch Koko
Рет қаралды 271 М.
The child was abused by the clown#Short #Officer Rabbit #angel
00:55
兔子警官
Рет қаралды 25 МЛН
ОСКАР ИСПОРТИЛ ДЖОНИ ЖИЗНЬ 😢 @lenta_com
01:01
KINDNESS ALWAYS COME BACK
00:59
dednahype
Рет қаралды 134 МЛН
1❤️
00:17
Nonomen ノノメン
Рет қаралды 13 МЛН
wallet app UI👨🏽‍💻flutter tutorial from scratch ♡
58:23
Build an Animated App with Rive and Flutter - Episode 1
11:46
The Flutter Way
Рет қаралды 189 М.
Flutter Basics by a REAL Project
25:42
Flutter Guys
Рет қаралды 416 М.
Top 2024 Web Design Trends
5:32
Codex Community
Рет қаралды 510 М.
Reacting to 21 Design Portfolios in 22 Minutes
22:41
Flux Academy
Рет қаралды 505 М.
Modern Bottom Nav Bar📱Flutter Tutorial ♡
8:15
Mitch Koko
Рет қаралды 166 М.
КРУТОЙ ТЕЛЕФОН
0:16
KINO KAIF
Рет қаралды 4,8 МЛН
⚡️Супер БЫСТРАЯ Зарядка | Проверка
1:00
Урна с айфонами!
0:30
По ту сторону Гугла
Рет қаралды 8 МЛН
НЕ ПОКУПАЙ СМАРТФОН, ПОКА НЕ УЗНАЕШЬ ЭТО! Не ошибись с выбором…
15:23