COVID-19 App - Flutter UI - Speed Code

Подписаться 228 тыс.

Просмотров 471 тыс.

50% 1

We create a nice clean #COVID-19 app #UI by using #flutter, where you can check how many people are affected and how many already died and recovered. It also shows the symptoms of COVID-19 and how you can keep yourself safe.
Learn how to make a custom shape using ClipPath widget, use the DropdownButton and customize it with the preferred design, create a custom card and add shadows.
Source Code: github.com/abuanwar072/Covid-...
►For the 3D intro, I'm using Rotato: bit.ly/3heGagj
►Support Us: / theflutterway
► Social Media
GitHub: github.com/abuanwar072
Twitter: / theflutterway
Twitter: / abuanwar072 (my personal profile)
Facebook: / theflutterway
Thanks for watching!
Make sure to like + Subscribe For More!
#flutterApp #theFlutterWay

Хобби

Опубликовано:

7 апр 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 912

@roshanshetty5661 4 года назад

The UIs you create are absolutely elegant and aesthetically pleasing. It inspires other people to create such great ones as well! Thank you for sharing such a beautiful design.

@TheFlutterWay 4 года назад

Wow, thank you!

@benhakliyim6405 4 года назад

I'm sure this channel will reach great heights. Great job!! It looks really beautiful

@TheFlutterWay 4 года назад

Thank you so much ❤️, you guys inspired me a lot and it means a lot for me.

@vishnunair3479 4 года назад

Evet sen haklısın, Mr. Ben Haklıyım.

@basriyildiz327 4 года назад

Haha nickname Bak oww

@KRITACSS 3 года назад

Thanks for so much! Another channel to keep in mind you guys ru-vid.com both have great designs!!!

@hzlll54 3 года назад

yoo ben haklıyım

@akbarpulatov640 3 года назад

Very straightforward, professional and also the best flutter videos in the youtube! It will be great if you add some comments to your steps with 0.5 seconds pause before implementing this step. By meaning of steps, i mean not the basic, but structural steps, like 10-20 steps per video. However, thank you very much!

@TheFlutterWay 3 года назад

Great suggestion!

@billycheung7095 4 года назад

Thanks for your speedcode video. It shows how that's elegant UI is built from scratch.

@TheFlutterWay 4 года назад

Glade you like it

@drac.96 3 года назад

I love watching these programming videos. This video is done so well! Great job! The also adds a lot of inspiration to me.

@TheFlutterWay 3 года назад

Awesome, thank you!

@JobaerArman 4 года назад

Instantly subscribed. I want to see more of your work and learn more.

@TheFlutterWay 4 года назад

Welcome aboard!

@pettidavide 4 года назад

Just WOW, this channel is fantastic! Keep it up man! Subscribed + real time alerting!! 😍🚀

@TheFlutterWay 4 года назад

Glad you enjoy it!

@dhirajgawande007 4 года назад

Same.

@naveenchristopher 3 года назад

@@TheFlutterWay hi, this is the first video watching yours its amazing. How you remember this much coding things without any doubt serach google.

@michaelh7638 3 года назад

@@TheFlutterWay hey please make a teespring clone. It would be great to see something like that on this channel

@jFernandoZ 4 года назад

Awesome work! I'm finishing my Flutter Bootcamp, and your vids are inspirational. Gained a new subscriber.

@TheFlutterWay 4 года назад

Awesome! Thank you!

@localroast9790 3 года назад

How are you going about learning Flutter?

@AhmedSam 4 года назад

I'm a C++ dev and Flutter just took all my interest because I have many ideas for mobile apps, but cpp isn't best for that. I'm reading docs but it will take me a while to scan all classes as I did with Qt. Watching a life coding using the SDK just pops the highlights into my brain and I got many answers just by tracing your code. Keep it up && Subbed!

@TheFlutterWay 4 года назад

Thanks

@wizzl8513 4 года назад

5:05 I found the reason why it doesn't work without is because the stacks width is the width of the svg image (change the width and you can see a bit more of the text). It seems that by adding a container with undefined measures, the stacks width expands.

@TheFlutterWay 4 года назад

Plz check the repository, it works on all devices

@codez857 3 года назад

stack is set to take all the height it gets so defining a height helps

@santanuagarwal8135 3 года назад

@@TheFlutterWay its not working.. there are some errors.

@dedeagus9001 3 года назад

i change Expand to SizedBox and set width to infinity then remove container()

@fabiofigueiredodasilva264 3 года назад

Congratulations man! Excellent job! I became your fan!

@jonusbrothers2067 4 года назад

Brother...what a video....hats off.... salute to you man! Best video on RU-vid! Thanks man!

@TheFlutterWay 4 года назад

Wow, thanks!

@anonymous-je3ih 4 года назад

Believe it or not, I clicked subcribed the channel after seeing the thumbnail, logo and 10s of the video. I think it's much much better to have your voice to explain things in it.

@TheFlutterWay 4 года назад

Thank you so much, I'm trying to add voice but it take pretty good setup and long time, I will add voice over like after 50-60 videos.

@aditgustiana3237 4 года назад

Now i know how amazing flutter is

@TheFlutterWay 4 года назад

Welcome to the flutter world and best of luck 👍

@ArturoHerrera89 3 года назад

Excellent video dude, please continue with this work.

@TheFlutterWay 3 года назад

Thanks, will do!

@deninshibu 4 года назад

Really wonderful job, sharing your knowledge UI is awesome !!!

@TheFlutterWay 4 года назад

Thank you so much

@ngotuanhien 2 года назад

At 5:09, you must use an empty Container() because it will load an empty space holder into the Stack that contains 3 widgets: SvgPicture, Text, and an empty Container. In order, you tiled the SvgPicture widget first into the stack but its width is not cover the whole width of the screen. The Text widget takes the the second position on top of the SvgPicture but it is still limited by the width of the stack. Once you put the empty Container() that would take the whole width of the stack by default, the three widgets would be display with a whole width of screen. That is why you should need an empty Container in the stack.

@aswinphilip3451 4 года назад

Great job man! Awesome design. Please check the responsiveness in smaller devices.

@TheFlutterWay 4 года назад

Ok, thanks for the suggestion, i will keep that in mind

@adityamiskin6569 3 года назад

You just got a new subscriber!!! Keep up the amazing work...

@TheFlutterWay 3 года назад

Welcome aboard!

@Vellutia 4 года назад

Nice sleek looking UI

@TheFlutterWay 4 года назад

Thanks!

@gopinath9986 4 года назад

im also making an covid 19 awarness app for my state for past 1 week but after i saw this. my design is very dumb when compared to you . but yours is awesome

@TheFlutterWay 4 года назад

Thank you so much, my one design by a UI designer that's why it look good maybe, I think you are way batter dev then me.👍

@gopinath9986 4 года назад

@@TheFlutterWay now I'm happy to be your suscriber

@afrodroidtutorials5869 4 года назад

All of that nesting is giving me a migraine.

@gosnooky 4 года назад

It's the Flutter way....

@fireflyeeeee2980 4 года назад

You get used to it tho. Heck I actually love it now XD

@TheFlutterWay 4 года назад

😜😜😜👍👍

@TheFlutterWay 4 года назад

🤟🏽🤟🏽🤟🏽

@cat-.- 4 года назад

UI code becomes that one way or the other

@wesleybarnes5376 4 года назад

Very good, looks clean, thanks for sharing!

@TheFlutterWay 4 года назад

Thanks for watching!

@JOELwindows7 4 года назад

Corona guidance made with Flutter This is your daily dose of Recommendation

@bijayaadhikari442 4 года назад

Wow, I am gonna code-along, challenge with time keeper. As I know basic flutter, how much time it take, lets do it.

@TheFlutterWay 4 года назад

Actually, it varies person to person, just try your best and you gonna make it soon.

@tripathiabhay1 4 года назад

Great SpeedCode Video. I congratulate on starting a dedicated channel on flutter. Coding Speed perfect, background music wonderful, ui superb, even your coding style is decent. I also learnt how to copy relative path of any asset (using VS code from last 2 years but not aware of this handy thing). One request , kindly also provide a brief side info for uncommon stuff , for example - you used MediaQuery.Of.size.width. Why ? Otherwise everything great. Looking for more such videos.

@TheFlutterWay 4 года назад

Glad you enjoy it! I'm trying to post voice over vides, lets see, if published more speed code vides then I will keep that in my mind :) thanks for the suggestions ❤️

@lintangkusuma2845 4 года назад

it was an amazing design btw!!

@TheFlutterWay 4 года назад

Thank you! Cheers!

@Giigigi1122 4 года назад

Holly. It looks amazing

@TheFlutterWay 4 года назад

Thanks

@tsioryfitiavanaanhykrishna6992 3 года назад

The Flutter God :O

@TheFlutterWay 3 года назад

Glad you like it 😊

@lucas3820 4 года назад

Hello, I would like to suggest a theme for a layout. Theme: World of Warcraft

@anhkhuong2324 3 года назад

Great video . Thank you ❤️

@kbmohamed1 4 года назад

Well done bro.. You gave me great energy.. Thanks

@TheFlutterWay 4 года назад

My pleasure

@immanueldiaz5710 4 года назад

Hey bro I'd like to clone your app but in kotlin, i can use your images and colors? I will give you creditns in my github repository

@TheFlutterWay 4 года назад

Go ahead!

@enesozmen7216 3 года назад

@@TheFlutterWay Thank youuu 😊

@mattischulz8743 4 года назад

Hey, amazing speedcoding! I would like to ask if I am permitted do take the source code and make it work, so it has Live Stats and Stuff... I would link you in the App as Main-Developer

@TheFlutterWay 4 года назад

Plz check the discrimination you got the source code, you can credit us for the UI

@mattischulz8743 4 года назад

@@TheFlutterWay Ok, thank you! I'll do that

@shubhamdeshmukh7939 4 года назад

It was amazing!keep it up

@TheFlutterWay 4 года назад

Thank you! Will do!

@farhanmazario7079 4 года назад

Woww amazing bro, it's beautiful. I am waiting for your next video :)

@TheFlutterWay 4 года назад

It means a lot, next video coming soon😎

@riufq 3 года назад

im a simple man. i see my country, i clicked

@fireflyeeeee2980 4 года назад

Awesome video! But can you tell the name of the soundtrack 😅

@TheFlutterWay 4 года назад

Item Title: Cinematic Adventure Epic Item URL: elements.envato.com/cinematic-adventure-epic-ZMUC2DX

@fireflyeeeee2980 4 года назад

@@TheFlutterWay Thanks!

@r-techs1068 4 года назад

Great channel, Love from India 😍😍😍😍

@TheFlutterWay 4 года назад

Thank you so much 😊, keep supporting us👍

@abdallahnassar1771 4 года назад

dude, your are a UI GOD, thank you

@TheFlutterWay 4 года назад

thanks, keep supporting us

@abdallahnassar1771 4 года назад

@@TheFlutterWay will do

@ashutoshmeena6159 4 года назад

Where can I find those kind of beautiful image assets ???

@TheFlutterWay 4 года назад

I just brought the UI, so it included

@sahiyadav759 4 года назад

@@TheFlutterWay can you suggest how can i use free resource

@PRAS223 4 года назад

@@sahiyadav759 maybe im late, you can find a lot good illustration for UI at undraw.co

@wldnfz 3 года назад

freepik.com maybe?

@lukesfridge 3 года назад

“All you need is stay at home” - The Flutter Way 2020 (btw that’s broken English, maybe just “Stay at Home” would be better and more concise)

@TheFlutterWay 3 года назад

Yeah, you are right

@lukesfridge 3 года назад

The Flutter Way very good video tho

@devsadeq 4 года назад

That's wonderful man ❤️

@TheFlutterWay 4 года назад

Thank you 🙌

@adorna_r 4 года назад

Beautiful UI

@TheFlutterWay 4 года назад

Thanks 😊

@subhamsubhasispatra 4 года назад

If I make this UI to a live application and put it on play store ..then there will be any copyright issue ..

@TheFlutterWay 4 года назад

No, you can do that at list on my all codes. You can use it anywhere you, but plz give us some credit. I think we r worth of it.

@subhamsubhasispatra 4 года назад

@@TheFlutterWay i have made a full working app of your UI , thanks for giving this awesome UI .... This link in the comment

@subhamsubhasispatra 4 года назад

drive.google.com/open?id=1Xzulu4G0_mLlzTV2OHG5LAKbimo56oqJ

@subhamsubhasispatra 4 года назад

you can download the app from the above link

@TheFlutterWay 4 года назад

@@subhamsubhasispatra great work man

@sohelakhtar8044 4 года назад

Wow wonderful app Very very thanks to the developer ❤️❤️❤️ for this effort

@TheFlutterWay 4 года назад

It's my pleasure

@xdauz 4 года назад

Great work! Love it!!

@TheFlutterWay 4 года назад

Thank you! Cheers!

@kenthea365 4 года назад

cool man, i like your app design

@TheFlutterWay 4 года назад

I'm glad you like it

@SulemanKhan-nk4lc 4 года назад

Wow great..keeping making videos like these 🖤

@TheFlutterWay 4 года назад

Thank you so much ❤️

@tadaspetra 4 года назад

I saw your first video a little while ago, and now this popped up in my recommended with 100k+ views. You really got this youtube algorithm thing figured out haha. Give me your secrets lol

@TheFlutterWay 4 года назад

🤔🤔🤔😂😂, I just upload my videos that's it😜

@tadaspetra 4 года назад

The Flutter Way still very impressive 👍

@yonghuang2305 4 года назад

woooo,this is a great case.thank you!

@TheFlutterWay 4 года назад

Thanks, it means a lot.

@geojvallavancottu6010 4 года назад

Nice work keep doing like this. Love it...,😍❤️

@TheFlutterWay 4 года назад

Thanks bro, keep supporting us 👍

@VJKoding 4 года назад

Amazing ui,thanks sir for inspiration ❤️

@TheFlutterWay 4 года назад

Most welcome, thanks for your comment❤️

@abhinavsrivastav3980 4 года назад

Thank you for this amazing video. I also thought similar idea but didn't framed with such nice ui. Keep it up. Hope you do great in future 😁

@TheFlutterWay 4 года назад

Thanks, you too! Keep supporting us👍

@MochiTheKittyCat 4 года назад

Well this was fun to watch 👌

@TheFlutterWay 4 года назад

Glad you like it!

@codingright 4 года назад

Great video! Thank you.

@TheFlutterWay 4 года назад

Glad you liked it!

@bdananjaya 3 года назад

Wow adorable 💗 i like it just subscribed 🔥🎉

@TheFlutterWay 3 года назад

Thanks for subbing!

@f00kwhiteblackracismwarsh07 4 года назад

Great work!!

@TheFlutterWay 4 года назад

Thanks for the compliment 👍🏽

@deepjyotibaishya7576 4 года назад

amazing UI

@TheFlutterWay 4 года назад

Thank you so much ❤️

@proskyy 4 года назад

Amazing UI

@TheFlutterWay 4 года назад

Glad you like it

@kazuoy 4 года назад

Amazing!! Thanks for sharing!

@TheFlutterWay 4 года назад

Thanks for checking ❤️

@azam2390 3 года назад

Love it bro ❤️

@TheFlutterWay 3 года назад

Thanks 🔥

@RizwanKhan-tc7ys 4 года назад

This is awesome, time to flutter with flutter way

@TheFlutterWay 4 года назад

yeah👍

@france_unsc145 3 года назад

You are a great person

@mikekong1874 4 года назад

nice work, u inspired me to learn flutter. already subscribed your channel

@TheFlutterWay 4 года назад

That's great!

@Armageddon227 4 года назад

nice background music also great work overall :D

@TheFlutterWay 4 года назад

Thanks!

@pustakahijrah3921 4 года назад

@@TheFlutterWay what is title backsound?

@lex6709 4 года назад

Item Title: Cinematic Adventure Epic Item URL: elements.envato.com/cinematic-adventure-epic-ZMUC2DX

@sanzharbekamatov1581 4 года назад

Awesome, good job, keep create 'speed code'.

@TheFlutterWay 4 года назад

Thanks, will do!

@enesozmen7216 3 года назад

Thank youuu for your videos. 👍👍👍😊😁

@TheFlutterWay 3 года назад

Glade you like it.

@user-fp4pm9fq5y 3 года назад

Hi man, Thank you. I learn Flutter by your video

@Abhishvek 3 года назад

Hey! You should definately check this ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hRStAmkTcJY.html

@joeltvaldez 4 года назад

Thanks for sharing, you are amazing !

@TheFlutterWay 4 года назад

You are so welcome!

@BenjaminCarlson 4 года назад

Great video! This video inspired me to do similar speed code videos on my channel!

@TheFlutterWay 4 года назад

That's awesome!

@dedisupardi2815 2 года назад

Excellent👍, thanks for sharing it to is to learn more

@TheFlutterWay 2 года назад

Thanks for watching!

@santhosh8495 4 года назад

Wow amazing content. I'm a beginner to flutter .I hope it will help me lot in exploring the flutter .

@TheFlutterWay 4 года назад

Glade to hear that, best of luck 👍

@user-dg5nv3db9s 3 года назад

Amazing!!! Thanks!

@TheFlutterWay 3 года назад

My pleasure, keep supporting my channel.

@aadhirantech4178 4 года назад

Great bro

@TheFlutterWay 4 года назад

Glad you like it 😊

@mithawalaprem42 3 года назад

Great UI learner a lot

@thehumbleservant21 4 года назад

Fantastic ! Will you do some more in depth videos where you break down what you are doing too ?

@TheFlutterWay 4 года назад

I will add voice to my videos, but don't know when I'm gonna do that.

@cengizgorencom4251 3 года назад

THIS IS AWESOME THANKS FOR THIS VIDEO AND SOURCE ON GIT .. i FORKED IT DIRECTLY ; )

@TheFlutterWay 3 года назад

Glad it helped!

@cengizgorencom4251 3 года назад

@@TheFlutterWay I forked 3 Projects from you .. bro ..youre amazing ! .. and your github sourcecodes are off the hoooook bro...

@Bucharestvibes 4 года назад

Amazing i love it 😍

@TheFlutterWay 4 года назад

Glad you like it!

@matthewkenn4223 4 года назад

That's really cool TBH

@TheFlutterWay 4 года назад

Thank you so much ❤️

@antoni2nguyen 4 года назад

It's very impressive. I've learned a lot. Thank you very much!

@TheFlutterWay 4 года назад

Glad it was helpful!

@milanvilov2281 4 года назад

Wonderful background music.

@TheFlutterWay 4 года назад

Thank you so much

@adamcierniak3902 4 года назад

@@TheFlutterWay What is the tittle?

@e.clediano 4 года назад

Hey, great project!!!! I solved the text problem inside the stack widget. I added fit and overflow property with StackFit.loose and Overflow.visible, respectively. Then i removed the Contaider widget. Thanks for this video!!!

@TheFlutterWay 4 года назад

Thanks for the tip!

@Mohammad-qg3pj 4 года назад

It was really useful, beautiful, and great, thanks a lot ❤️😍🙏

@TheFlutterWay 4 года назад

❤️❤️❤️❤️❤️

@proflutter1192 4 года назад

Good job!

@TheFlutterWay 4 года назад

Thank you so much ❤️

@foreverrafs 3 года назад

This guy is too good

@TheFlutterWay 3 года назад

Thanks 🙏

@abhishekabraham4107 4 года назад

Wonderful... No long speechy stuff.... People just wanna see how developers code, Watched it on mute though. I will be coming back for more... Subscribed!!!

@TheFlutterWay 4 года назад

Glad you like it 😊, keep supporting us 👍

@xWELEWMKMXDXxs 4 года назад

that guy does not coding only writing the his developed project

@BabarAli-yb1eg 4 года назад

Really beautiful

@TheFlutterWay 4 года назад

Thanks for liking

@maiconjonatha 4 года назад

beautiful

@TheFlutterWay 4 года назад

😊😊😊😊

@abdull1437 4 года назад

wow so cool and quick

@TheFlutterWay 4 года назад

Glad you like it!

@muhammadkashif7209 4 года назад

cool a lot of things i learn from this awesome tutorial

@TheFlutterWay 4 года назад

Awesome, thank you!

@mpicuser 4 года назад

Hi...thanks for this great video. Very inspiring for a beginner like me.

@TheFlutterWay 4 года назад

Thank you so much, those type of comments also inspire me a lot, best of luck 👍

@zankares 3 года назад

Flawless.

@cryssiover8419 4 года назад

wow that "Extract Widget" method will surely help me a lot :)

@TheFlutterWay 4 года назад

👍

@arannak3826 3 года назад

All this time didn't know you were from Bangladesh too. Have been following you for a long time brother ^^.

@TheFlutterWay 3 года назад

Wow, means a lot brother. Keep supporting my channel 💖

@brando7466 4 года назад

Awesome app man! I'm gonna try to make it with api calls!

@TheFlutterWay 4 года назад

Go for it!

@adrian88cash 3 года назад

Thanks you!!!

@TheFlutterWay 3 года назад

You're welcome!

@user-rh1pb2gk5k 2 года назад

5:00 Instead of Positioned, you will need to use Container and padding as needed. Expanded( child: Stack( children: [ SvgPicture.asset( 'assets/icons/Drcorona.svg', width: 230, fit: BoxFit.fitWidth, alignment: Alignment.topCenter, ), Container( padding: const EdgeInsets.only( top: 20, left: 150, ), child: Text()