Making Complex UI - Flutter Tutorial

[@deepmeyt]

This channel is a goldmine. I'm so glad I found it. Keep up the good work.

[@KL13923j]

Beautiful, please do more UI design from scratch.

[@willwalsh630]

Agree!

[@vinoth4167]

Yes he must do

[@gilmcglory3748]

Very nice design and development with Flutter. It shows us all what is possible with Flutter. Thanks and I will be looking forward to more.

[@chirantanthakkar51]

Beautiful UI Design. Nicely explained.. Thanks for the video.

[@sachinduhan3022]

I don't know why I completed this video! even though I have 0 knowledge about Dart!! method of explanation is very good! keep it up and thankx for the code! You earned my subscription!

[@TheCSGuy]

Thanks.

[@pr4veen_n]

Wow, so crisp and to the point explanation. Very well done tutorial.

[@robingeng9776]

The source code is perfect! thanks so much, I have followed your tutorial , waiting forward to your update! thanks again!

[@RIAJULISLAMI]

Thanks a lot... please keep doing more videos like this. Short & crisp - Loved it really. short and understandable. ❤

[@TheCSGuy]

Amazing comments like these means a lot to me. Glad the community and viewers are liking this video so much.

[@guruprakashgupta4075]

Keep posting more UI design,Its really amazing to see how u design it.totally loved it

[@TheCSGuy]

Sure, thanks for the feedback.

[@pravinprince3221]

Thank you for the wonderful video bro it is very helpful for me and my team, Thanks again bro

[@loknathbehera6557]

it was wonderful yaar, you made it look so easy, hats off

[@BrendansReasons]

I like your approach, how you deconstruct it

[@auliasabril1899]

awesome, please do more

[@chamsabressitoure521]

Thank you! We need more of these tutorials.

[@TheCSGuy]

Glad to hear that. There is gonna be a new video released tomorrow.

[@chamsabressitoure521]

@@TheCSGuy Great!

[@Ravikantpaudel]

Thanks for the video. i learn so much.

[@EduardoSantos-mb5mm]

Awesome explanations and inspiring vídeo. I am new to Flutter/Dart and got lots of ideas! Thank you very much, sir!

[@TheCSGuy]

Thanks for the awesome feedback.

[@mpicuser]

Just what I needed....thank you!

[@magmony]

nice! a true eye opener..cant wait for more

[@aradhyajain8682]

Good....very good

[@benq400]

Awesome, Thanks a lot 👍

[@BrendansReasons]

20:00 I might have used the vertical property on your edgeInsets for the padding widget, setting it to 85

[@johnschmidt874]

Great tutorial. Thanks mate!

[@seunghwanjeong5348]

This is Amazing !! CS Guy :) Thanks for your hard working ! I am looking forward to seeing your next video ! and this is my personal feedback ! your video is really amazing and I can feel how much effort you put in. When I saw your video first time, it seemed like there was a lot of information to know and it was 30minutes long. So I kind of felt pressured to watch it. Because of that, it would be much less pressured, if you divide your video into 3 or 4 parts, which less than 10minutes long :) which you can get more viewers with one contents ! This was what I thought. Please don't take it so seriously. It's just one of a personal opinion ! Thank you again, keep it up :)

[@TheCSGuy]

Thanks for such an amazing feedback. Yeah I am trying to shape these videos to make them better and accessible by everyone, so that everyone understands at their own pace . I decided to make a single video because personally I feel that giving it all in a single video is sometimes better. Anyways, I'll make my videos as my audience requires.

[@sach2274]

Bro love the content and got no errors at all while doing the code ... It is just that this video was a bit fast and several times i had to rewind it again and again just trying to understand what's all about... could you please decrease the speed. and no matter how long the video's gonna be, if we love your UI then we'll finish it.. so i think if this video was a bit longer then we could have more detailed information and the things not covered would be covered as well:) thanks..

[@TheCSGuy]

Good to hear that everything is working fine and thanks for the valuable feedback and suggestions, I have been constantly trying to improve the quality of my videos and trying to make them more beginner friendly.

[@sach2274]

@@TheCSGuy Okay bro :)

[@everydayPianoPractice]

Great job!! Was there going to be a second part to this? I'd be interested in seeing use of a local SQLite integration and remote mysql databases. One other thing that would be interesting is looking at different patterns to ensure that performance is optimized. I'm a bit concerned that the Flutter apps might be doing too much on the main thread when I add all the UI styling logic, animations, the data layer, and business logic. Covering these topics would be quite helpful. Keep going.

[@TheCSGuy]

Thanks. Yeah, it does seems, in some cases, that flutter apps might be doing a lot of work on the main thread but even after all these animations and everything. It seems to work fine, even on devices running Android 4.4. Although, taking accurate measures and following a correct pattern would only result in increased performance, which is what every developer thrives for. Thank you for the suggesting the awesome topics, maybe I'll create a video on them in the near future.

[@vinceramcesoliveros6739]

This guy is gonna win in Flutter Clock even if he didn't join the comppetition. XD

[@cripz4203]

I came here for the same reason. Lol

[@TheCSGuy]

#FlutterTeam, give me my iMac now 😂

[@ganeshbhat5761]

Awesome man

[@alondob]

Well done!

[@MohMoh-mw9ml]

but the original design looks way better, it has a white color with bluish tint, how to make such color mix ?

[@crypticcoding9680]

What software you use to make your videos, premiere pro?

[@TheCSGuy]

Hey, Yes I use Premiere Pro for video editing.

[@varunbhalla19]

Hiii ! Thanks for such a lovely Tutorial :) @29:56 , you initialized trackBarPaint and trackPaint outside the paint method... in my case , it showed error doing this way... when i initialized them inside paint method , everything worked fine..! Thankyou Man ♥

[@idanaya939]

Great tutorial!

[@lazydeveloper8266]

great tutorial....thanks man!

[@pashute12]

Thank you!!! Great and clear video. What software are you using to demonstrate while you are programming? For instance, how did you do the canvas rotating animation?

[@TheCSGuy]

Thanks for the feedback, I made the canvas rotating animation using after effects and then imported it on the video.

[@sanathnherath]

very good video and thank you very much

[@loot6]

Why didn't you finish it though? It doesn't have any of the light and shadow effects like in the image at the start....

[@skipmonday6467]

Thank you brother

[@haoduongvan7101]

Wow. Amazing bro. Can i has full source code this project? Thank!

[@leonkoka]

Great Tutorial! Short Question: Which Extension do you use to automatically generate the widget's definition as a comment after the closed bracket?

[@TheCSGuy]

Hey there, Just use the FLUTTER plugin inside of vscode.

[@tammichia1048]

Hello! Is there the backend to make this UI work?

[@chirantanthakkar51]

Hello, I have a query. We have a common "BottomNavigationBar" across all the tabs.. Can we have different "BottomNavigationBar" for each Tab?

[@TheCSGuy]

Why would you wanna do that? It would defeat the sole purpose of BottomNavigationBar

[@chirantanthakkar51]

@@TheCSGuy, In this example itself, you can relate the buttons in the BottomNavigationBar only to the "Alarms" tab. And if fact, they are much needed in the "Alarms" tab, but these buttons, (FlatButton, FloatingActionButton) have no relevance in the "Records" & "Profile" tab. Then, why to show the action-buttons in the screens where they have no relevance? Please correct me if I am misunderstanding.. Thank you.

[@TheCSGuy]

I am not able to quite imagine your UI. As per your description, I assume, you have a tab bar at the top just like the UI, then in the bottom as well, you have some sort of bottom navigation bar?

[@RobsonDonah]

Amazing

[@muhsinzyne695]

Please add a screen cloning of Google Pay Scratch cards and Scratching. I was on really on that I could not work it very well if you are putting a video about the tutorial it will be the best help for the peoples who are looking for integrate the same as just like me

[@andrechristianto7131]

This is awesome content.. Straight up subscribe

[@axela.1884]

Very interesting thank you 👍

[@prakashking6355]

Awesome ui. How to build such designs?

[@TheCSGuy]

Thanks, although the UI is not mine, and if you mean how to come up with these UI's. You can find inspiration on websites like Dribble and use Softwares and Tools like Figma, Sketch and XD to make them.

[@prakashking6355]

@@TheCSGuy did they design on those tools and hard code them to get the view in app.

[@v9-dvc6gb6]

Hi what emulator you used?? Seem very light.

[@TheCSGuy]

It's actually my physical device that I am using.

[@pratheekshetty.m5784]

Hey! Where is the next part video?

[@TheCSGuy]

I am sorry I didn't understand, what next part are you talking about?

[@pratheekshetty.m5784]

Making complex Ui clock video part 2..

[@pratheekshetty.m5784]

Pls respond faster

[@pratheekshetty.m5784]

Hlo ........

[@TheCSGuy]

@@pratheekshetty.m5784 There isn't a part two of this video. Anyways, what would you want to see in a part two of this video?

[@alex_kenbo]

Thanks!!!

[@iansong1676]

I think it would have been way easier to make the clock if you had used Flare.

[@TheCSGuy]

Probably, but I like this way better, also, At the time I wasn't really familiar with Flare

[@algoking]

Bhai what's your qualification, you r awsome .... Love u bro🤗

[@TheCSGuy]

Hey Shivam, I am college student, currently in 3rd year of my graduation.

[@algoking]

Bro you u doing a great great job, I will bring you subscribers as much as I can😊

[@aradhyajain8682]

Liked

[@notsifat]

good job bro

[@jckpn]

Hey, I need to apologise... I've been using the clock from this video in my app for some time and I've only been crediting Philip Okonkwo for it. For some reason I assumed he had coded the whole thing. I just watched your video and realised you actually did the majority of the design for the clock! Is it okay to keep in my app? I will credit you too, of course. I fully understand if you would like me to remove it however.

[@TheCSGuy]

No problem, keep it. Btw, is it a production app in which you have implemented this clock?

[@jckpn]

@@TheCSGuy Hey, thanks! It's currently in open beta on the play store ( play.google.com/store/apps/details?id=me.jckpn.cerilauncher ). I'm developing a major update at the moment so I'll be sure to credit you as well as Philip within the app and the play store description. Is there anything else you would like me to do?

[@TheCSGuy]

Cool. Maybe you should also credit the designer who made the awesome design. I have provided his details in the description.

[@TheCSGuy]

I checked your app. It's really cool, and it has a lot of possibilities.

[@jckpn]

@@TheCSGuy Good idea, I didn't notice that either 😅 I'll add his credits too.

[@satishkumar-qq8df]

Great

[@mr.arvind248]

interesting video bro..!

[@turkishwithola6263]

can this UI be used as an XML file for an Android App?

[@ihowaonaro4511]

Phillip HUUUUUUUUUUUUUU???????? Haha just kidding, amazing vid

[@TheCSGuy]

Haha, Thanks, Did I pronounce the name wrong?

[@ihowaonaro4511]

The CS Guy lol yh. But definitely not your fault.

[@jyothishkm5645]

i downloaded the source code but i am not able to set alarm

[@TheCSGuy]

It's just a UI. You would not be able to set an alarm or perform any interactions with it. You should research about it and try to implement it on your own. You can submit a pull request to me, so that I'll create a new branch for your code on my repository. Best of Luck.

[@traiinc]

Flutter Food Ordering app ui : kzbin.info/www/bejne/nJPcaYGpZ6eog7s

[@syed.simanta820]

Is it functional or how to make it functional?

[@TheCSGuy]

Hey Syed, Functional, as in what sense? If you are asking whether those buttons work or the graph shows dynamic data, then no, it does not. I simply wanted to demonstrate how to make UI's that are complex and bring all these different widgets together.

[@syed.simanta820]

@@TheCSGuy can we set alarm clicking adding updating data? I mean ready to use working app. Everyone making ui but didnt see any functional one

[@TheCSGuy]

Yeah, there are a lot of possibilities and directions that you can take the app in, from here. There are plugins available for controlling alarms, maybe you could store sleep and wake up time in sqlite db. Like I said in the video as well, that this was a design tutorial, and my goal was to just layout how to make complex UI's and not creating the entire app. Although in the future, there would be videos where I demonstrate the making of an entire app from scratch.

[@syed.simanta820]

@@TheCSGuy does flutter have hot reloading feature and ios ui detect like ios has itx own ui style. Flutter looks like android focus

[@TheCSGuy]

Yes flutter does has hot reloading feature and although flutter at the very first time might look like it is focused for android, or its layout and widgets follow android's material design theme. But flutter also ships with a whole package of Cupertino widgets that allow you to customise your UI and make it similar to what iOS users expect. There is gonna be a video on that soon.

[@michaelkalango5779]

Can you make a complex fintech app UI??

[@TheCSGuy]

Sure, I'll try to find one and make it as soon as possible.

[@michaelkalango5779]

@@TheCSGuy cool... Will be on the watch then!

[@sajalhalder1962]

anyone can tell which emulator it is

[@TheCSGuy]

It's a screen recording of my physical device.

[@jayanthsaikiran6624]

I've seen this in dribbble

[@TheCSGuy]

Yup. It's the sleep tracker app UI by Ali Sayed.

[@pi_mai]

@@TheCSGuy Did you ask permission to use his work for this video? Otherwise you are using copyrighted material. Everything on Dribbble has a copyright. It is not "fair use".

[@TheCSGuy]

I tried to reach out to him on Instagram. I waited several days for him to reply, but didn't receive any, anyways, I hope this video does gets the designer's attention somehow, and he doesn't has any objection.

[@pi_mai]

@@TheCSGuy You still cannot use something with 'trying'. That's not how copyright works. You don't give any acknowledgement in the video, nor in your description. Your thumbnail is his work. So theft is theft.

[@TheCSGuy]

Fair Point. From now on, I will have a link to everyone's work that I have been using. I am following this for the music that I use, but unfortunately didn't do so for the designs I recreate. That's mistake from my part. Btw, I just recieved a confirmatory mail from the designer and he does not has any problems with this video. So that's solved. Thanks for bringing this matter to my attention.

[@thatsenam9183]

damn

[@pashute12]

So with flutter there is no separation of style from layout and no separation of looks from logic. No MVC, no MVVM, no CSS, no html, no automatic responsive layouts. Nothing of all the advanced ideas developed in the last few years?!

[@TheCSGuy]

There are ways to seperate looks from logic using patterns like BLoc or Provider. Although, I am not so sure about separating styles from elements like css, maybe you could create a specific theme file to do so.

[@n00097]

What is your mail id

[@nairobian8]

69 comments

[@k3logics925]

Not good for beginners and intermediate students / learner ....

[@pavelkopytin]

Sorry bro, but dislike. Your design is pretty far from your first screens

[@TheCSGuy]

No problem, Although I understand your concern, the reason why that happened, is, if you go to the design's link that I provided in description, you'll notice that the designer has used number of gradients in the background to make the design perfect. But when you code the UI, it just isn't possible. At some places I took the exact colour which is seen in the UI using photoshop, but when you see that same colour on the device screen, it just doesn't looks the same. Anyways, thanks for the feedback.

[@JGJ2110]

"[...] But when you code the UI, it just isn't possible." The design may be making use of a complex background (it's so subtle that it's hard to tell), and in a real application one would have the designer produce that as an asset and use it directly in the application. But I'd argue one can get pretty close even without that. Firstly a solid color or slight gradient for the background of the application itself. Then a set of two drop shadows for each of the extruding UI elements: the clock, the chart and the add (+) button. One semi transparent white shadow (really a highlight) falling to the left, the other semi transparent black and to the right. Afterwards, make sure the new shadows are not covering up any of the other UI elements, like the data points to the left of the chart, by putting the offending UI elements below them (eg. at the bottom of a stack). Then finally some details for the two main extruding UI elements (the clock and the chart). For the clock this means a horizontal gradient going from fully transparent to a semi transparent black for the background of the outer circle, and optionally (because I can't tell if the design actually makes use of this) a drop shadow falling to the right of the inner circle of the clock. As for the chart, a vertical gradient going from gray to transparent for the bar "shadows", and a horizontal gradient again going from fully transparent to semi transparent black as the border. Of course this isn't perfect, but I'd argue it comes quite close and doing it this way it is easy to change the entire color scheme of the application if required.