Тёмный

Build a Design System in Flutter | How to build a UI package 

FilledStacks
Подписаться 67 тыс.
Просмотров 31 тыс.
50% 1

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

 

5 окт 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 160   
@faisalmushtaq2287
@faisalmushtaq2287 3 года назад
from this channel i learned how to code professionally, thanks brother!
@FilledStacks
@FilledStacks 3 года назад
I'm very happy to hear that! Thanks for commenting and letting me know.
@faisalmushtaq2287
@faisalmushtaq2287 3 года назад
@@FilledStacks we had a request that if you could make tutorials on riverpod(brief project)
@FilledStacks
@FilledStacks 3 года назад
@@faisalmushtaq2287 I would use it EXACTLY the same as I'm using it with provider, which is why I'm not switching. I actually don't even need provider. I just need the ui to update when notify is called. That's literally all I need it for :) So swapping to riverpod would be a waste. I won't use any of the new functionality in it.
@tylerthornton9611
@tylerthornton9611 3 года назад
Such perfect timing for me, as the next Todo on my list after I finish the current feature was to clean up all the theme stuff scattered through my app. I think you did a good job of balancing showing us a couple of examples for each part, but not tediously typing out everything during the vid. As always, loving your content and grateful for all your efforts! 😁
@FilledStacks
@FilledStacks 3 года назад
Thanks Tyler! And I appreciate you always giving me great feedback. I tried to make sure I'm going through repeat work over and over so I'm happy to hear I found the right balance. It's a good way to organize everything in your code base.
@providencekambaleluseko4114
@providencekambaleluseko4114 3 года назад
Thank you for this gold tutorial. you've changed my coding method. Go a head brother
@FilledStacks
@FilledStacks 3 года назад
Much appreciated Providence! I will try my best to keep sharing good content
@MrJugi2
@MrJugi2 3 года назад
Awesome video ....Next video... patiently waiting.... Keep up the good work. Cant wait to see the final product
@FilledStacks
@FilledStacks 3 года назад
Thank you .. appreciate the kind comment. I'm releasing the next one tomorrow.
@MrJugi2
@MrJugi2 3 года назад
@@FilledStacks If you ever feel like diverting for a bit.....do error handling videos......but don't divert
@FilledStacks
@FilledStacks 3 года назад
Noted 😁 I will be covering error handling in the series as well
@isaacadariku
@isaacadariku 3 года назад
So insightful 💙 Thanks FilledStacks
@FilledStacks
@FilledStacks 3 года назад
It's my pleasure. You should check out the Sports OS code base we have going. It's using this pattern and is working very well.
@isaacadariku
@isaacadariku 3 года назад
🏃🏽‍♂️🏃🏽‍♂️💙
@harguee
@harguee 3 года назад
@@FilledStacks do you mind sharing the link for the sport os code that you are having
@malice112
@malice112 Год назад
What a great video, I really learned alot about how a professional structures and seperates/encapsultes the UI from the functionality. I am going to try to mimic your structure in my next Flutter project.
@FilledStacks
@FilledStacks Год назад
That's awesome to hear, thanks for watching and leaving a comment. I'm happy that the content is still valuable.
@isyedaliraza
@isyedaliraza 3 года назад
Amazing as always ❤️. Thank you bro for the knowledge that you are sharing, it really helps a lot. Keep it up 👍👍.
@FilledStacks
@FilledStacks 3 года назад
I'm very happy to hear that. thanks a lot for leaving a comment. I'll try my best to keep sharing good content
@yujinkang4427
@yujinkang4427 3 года назад
What a Merciful man, Dane❤️❤️
@FilledStacks
@FilledStacks 3 года назад
Such an awesome comment. Thank you. I appreciate the kind words :D
@yujinkang4427
@yujinkang4427 3 года назад
I mean actually, you r ‘The Giving Tree’ :)
@FilledStacks
@FilledStacks 3 года назад
You're very kind Yujin. Thank you for commenting such a wonderful message.
@yazilimcikedisi
@yazilimcikedisi 3 года назад
yes, he is :)
@bigwig2258
@bigwig2258 3 года назад
Really amazing in a very clear way. Love from India bro🔥🔥🔥🔥❤️❤️
@FilledStacks
@FilledStacks 3 года назад
Thank you very much. I'm happy that you found value in it. Thanks for watching and leaving a comment.
@bigwig2258
@bigwig2258 3 года назад
@@FilledStacks please do flutter Mac os desktop app development video
@FilledStacks
@FilledStacks 3 года назад
I can show how I run it on there but i don't do anything special at the moment. We write normal flutter code for our desktop apps.
@bigwig2258
@bigwig2258 3 года назад
@@FilledStacks thanks do you have any latest flutters (2.+++) courses for beginners
@FilledStacks
@FilledStacks 3 года назад
I do not at the moment. I might do a null safety guide soon.
@harguee
@harguee 3 года назад
Once again top class you dont let me down. WOW NO further comment
@FilledStacks
@FilledStacks 3 года назад
😆 I'm happy to hear that you're enjoying it.
@CleanupStack
@CleanupStack 3 года назад
Thank you for this. Planning to build the DSM and this video helped a lot
@FilledStacks
@FilledStacks 3 года назад
You're very welcome! Thanks for watching and leaving a comment. I appreciate it.
@albrechetti
@albrechetti 2 года назад
Wow! Amazing! Thanks for sharing with us!
@FilledStacks
@FilledStacks 2 года назад
You're very welcome. Thanks for watching and leaving a comment.
@priyadarshinichettiar6750
@priyadarshinichettiar6750 3 года назад
This is amazing!
@FilledStacks
@FilledStacks 3 года назад
Thank you :D Much appreciated. I'm happy you enjoyed it.
@sumarto9822
@sumarto9822 3 года назад
Thanks for sharing !!!, this is insightful !
@FilledStacks
@FilledStacks 3 года назад
You're very welcome :) I'm happy that you found it useful.
@ferferrara
@ferferrara 3 года назад
Excellent as always 👏👏👏 This is sugar for my brain 🧠 😜
@FilledStacks
@FilledStacks 3 года назад
hahaha :D Thank you Fernando!! You should see how good it's working in our other projects we got going :D It's a fun way to develop.
@chind0na
@chind0na 2 года назад
New sub here. This saves so much code from the actual app logic.
@FilledStacks
@FilledStacks 2 года назад
It does 🤩 we use it in all our projects.
@chind0na
@chind0na 5 дней назад
@@FilledStacksHave you updated this package?
@aymennurhussen3689
@aymennurhussen3689 3 года назад
Amazing 🔥🔥🔥
@FilledStacks
@FilledStacks 3 года назад
Thanks Aymen!
@MohammadAlbazel
@MohammadAlbazel 3 года назад
Elegant and high class coding style.. CAPE going ;)
@FilledStacks
@FilledStacks 3 года назад
Thank you :) I appreciate it. We try our best to keep the code clean and well structured.
@ivanianovskii4867
@ivanianovskii4867 3 года назад
I wish all designs will have that many details :)
@FilledStacks
@FilledStacks 3 года назад
:D yeah. I built the design system myself using the details from the designs.
@NamNguyen-jk1yn
@NamNguyen-jk1yn 3 года назад
Amazing content, as always!
@FilledStacks
@FilledStacks 3 года назад
Thank you! I appreciate it. Took me a while to get done so I'm happy it was helpful.
@yazilimcikedisi
@yazilimcikedisi 3 года назад
Thanks for the video :)
@FilledStacks
@FilledStacks 3 года назад
You're very welcome 😁
@zxenon_
@zxenon_ 3 года назад
Incredible
@FilledStacks
@FilledStacks 3 года назад
Thank you very much. Happy to share the knowledge.
@InfoTrickyOfficial
@InfoTrickyOfficial 3 года назад
Brillient❤️
@FilledStacks
@FilledStacks 3 года назад
thank you :) I'm happy you enjoyed it.
@lpm76
@lpm76 3 года назад
This is really great content!
@FilledStacks
@FilledStacks 3 года назад
Thank you, I appreciate it. And thanks for leaving a comment.
@ursochurrasqueira
@ursochurrasqueira 2 года назад
awesome video
@FilledStacks
@FilledStacks 2 года назад
Thank you!
@jhonbaptist6159
@jhonbaptist6159 3 года назад
Wow man, you have great content.
@FilledStacks
@FilledStacks 3 года назад
Thank you. I appreciate the comment.
@MOhan-ur4ei
@MOhan-ur4ei 3 года назад
Dope as always.
@FilledStacks
@FilledStacks 3 года назад
Thank you Mohan! Much appreciated.
@bigwig2258
@bigwig2258 3 года назад
Please do Mac os desktop app development video in flutter 2.2.
@FilledStacks
@FilledStacks 3 года назад
There's nothing special for me to do, i just run it on Desktop. But I'll run this on desktop in one of the videos down the line
@aakashr79
@aakashr79 3 года назад
Hey. It would be great if you did a video comparing the advantages and drawbacks of using GetX vs. the (Provider + Get_it) combination on your channel, for state management and dependency injection. I recently explored GetX and found it to be close to a combination of the singleton pattern with features from Bloc and Provider. I would go as far as to say it somewhat resembled the finesse of Redux, minus the boiler plate. Would be great to have your point of view on it.
@FilledStacks
@FilledStacks 3 года назад
Hey, I don't think that video would really provide much value. If I had to use it, it would still be wrapped the same way as I wrap provider. The only thing I don't like about it is that it makes your entire code base dependent on it. So either way it's used, whichever one is used I wouldn't be dependent on it directly. I'd wrap it up in a View ViewModel implementation. To end it off, I think getX is great. If you like it you should definitely use that. Especially if you understand it better than my approach.
@aakashr79
@aakashr79 3 года назад
@@FilledStacks Appreciate your honest response. Although I do prefer to de couple my service locator with my state management (similar to the approach you follow on the channel) which gives me more control, my organisation has recently chosen to migrate to GetX. Was wondering what the cons would be of relying solely on such a framework. I'm thinking if implementing a new feature at some point goes south, we might have to use GetX with a combination of another solution anyway. I guess time will tell.
@FilledStacks
@FilledStacks 3 года назад
@@aakashr79 I see I see. If you abstract it away it should be fine. I'm always concerned about unit testing as well which some packages don't allow because it's not pure dart. So make sure you can write real unit tests then you should be in a good spot with whatever you choose. as long as your business logic tests can run without starting flutter you're in a good spot.
@ramodsasanga6169
@ramodsasanga6169 11 месяцев назад
You can customize the default light and dark theme
@FilledStacks
@FilledStacks 11 месяцев назад
I know, you just check the theme in each of the widgets and show a color depending on that. OR get it directly from the theme.
@PsychoDude
@PsychoDude 3 года назад
Hello man! You clearly love flutter. Specifically for a social media app u think flutter is the best?
@FilledStacks
@FilledStacks 3 года назад
Hey hey, the type of app you build doesn't make a difference. all apps are kind of the same. You get data from an api, you show that on screen. You should use the language that you're the most comfortable with. Any app is fine for any modern framework.
@sornt
@sornt 3 года назад
great!!! Thank you.
@FilledStacks
@FilledStacks 3 года назад
You're very welcome. Thank you for leaving a comment.
@mruduladdipalli5417
@mruduladdipalli5417 3 года назад
Super!!!!
@FilledStacks
@FilledStacks 3 года назад
Thank you!
@carlomigueldy
@carlomigueldy 3 года назад
Duuuude did you create all of these designs?? 🔥🔥🔥
@FilledStacks
@FilledStacks 3 года назад
I extracted the design system from UI in a file that I bought at the beginning. I just compiled to total design system from it but didn't design the all the UI
@carlomigueldy
@carlomigueldy 3 года назад
@@FilledStacks doooope as always!! 💪💪
@ПажилойМаслач-э8м
@ПажилойМаслач-э8м 3 года назад
the beast
@FilledStacks
@FilledStacks 3 года назад
yeeaaahhhh!!! :D
@roliesdonald
@roliesdonald 3 года назад
your design system very ... very help full, but how can i add and use flutter_screenutil package in this design system?
@FilledStacks
@FilledStacks 3 года назад
You add the package into the pubspec.yaml file, open the readme and then get the instructions that you'd like to use and add that into your code.
@sadabwasim9850
@sadabwasim9850 3 года назад
Great content 👍
@FilledStacks
@FilledStacks 3 года назад
Thank you! I appreciate it.
@sergiofranklin8809
@sergiofranklin8809 3 года назад
But this type of fontSize in textStyle is not adaptive, and won't suit tablets. What to do for that cases?
@FilledStacks
@FilledStacks 3 года назад
I would use screen utils and use the .ssp property to get a responsive size. We'll tackle that when we need to build the tablet UI.
@chorauoc139
@chorauoc139 3 года назад
Just too good..
@FilledStacks
@FilledStacks 3 года назад
Awesome man! I'm happy you think that.
@chorauoc139
@chorauoc139 3 года назад
@@FilledStacks Do you know how to render html without any liberties or plugins in flutter
@FilledStacks
@FilledStacks 3 года назад
@@chorauoc139 You can render it in a webview.
@chorauoc139
@chorauoc139 3 года назад
@@FilledStacks No, basically I want to covert html elements to flutter widgets, there is a lib called flutter_html, but I want without using it to achieve this
@FilledStacks
@FilledStacks 3 года назад
@@chorauoc139 well you have to do exactly what that package does. Open their code up, read what they're doing and rewrite that. If it's not for practicing it would be a very bad idea to spend 3 weeks on something that's already been built.
@tammaibigin
@tammaibigin 3 года назад
How can I make overridable values, such as primary color? Then I can set them differently as theme for different apps.
@FilledStacks
@FilledStacks 3 года назад
You create a property for it with a default value then you can pass that in when you want to change it
@priasavant
@priasavant Год назад
Hi, I'm new in flutter. Since this video published 2 years ago, can I use the way you explain in video? Or maybe there's new way to create design system? Thank you.
@FilledStacks
@FilledStacks Год назад
Hi, there's no new way. This is a general approach that you will probably use forever, it's how we do it. But with new language features you will always be able to write some things using a different syntax.
@priasavant
@priasavant Год назад
@@FilledStacks thank you, your job is amazing.
@nickledesmac.786
@nickledesmac.786 3 года назад
beatiful
@FilledStacks
@FilledStacks 3 года назад
Thank you :)
@jeremaine
@jeremaine 3 года назад
hi. how do you handle different screen size? currently I am using flutter_screenutil so my UI is responsive on different phones. I wonder how you do it in your app?
@FilledStacks
@FilledStacks 3 года назад
Hey, we use resonsive builder for the different screen layouts and then screen util package for things like font sizing.
@axomclutchgod1414
@axomclutchgod1414 3 года назад
Make a video tutorial on Google Blogger App Using Blogger Api. Thanks.
@FilledStacks
@FilledStacks 3 года назад
Hey, I don't known what a blogger app is and I don't know the blogger API so there's probably nothing I can teach that's not in the docs.
@nicholai9266
@nicholai9266 3 года назад
Does Flutter require separate design for iOS and Android ver. of an app, since both platform have a bit different styles? Thank you 🙌
@FilledStacks
@FilledStacks 3 года назад
No it does not. If you want a spearate design you can check the platform value and style differently but all clients I've worked with want their design to match on iOS and Android.
@nicholai9266
@nicholai9266 3 года назад
@@FilledStacks I have read that Flutter automatically render the cupertino and material style for iOS and Android is it true?
@FilledStacks
@FilledStacks 3 года назад
@@nicholai9266 For some things yes. If you use the built in flutter widgets then it'll do that. If you style it yourself that style will reflect the same way across all pplatforms including web, desktop and watch.
@nicholai9266
@nicholai9266 3 года назад
@@FilledStacksNow it's crystal clear to me. I keep wondering on how will the ios look like without having an actual device to design a native-like in a iphone rather than using a android feels app in a body of an iphone. Thank you so much. 😊👑
@learningisgrowinglig
@learningisgrowinglig 3 года назад
will there be phone authentication in the app? I think it will be good to have instead of just username/password or google. logging in by mobile number would be very handy for the user
@FilledStacks
@FilledStacks 3 года назад
Yup, we'll add that down the line. I want to start building functionality for the app so these will be the only authentications we have for now until we have some decent functionality built.
@learningisgrowinglig
@learningisgrowinglig 3 года назад
@@FilledStacks do you have this phone auth service built already in stacked or it is built but yet to be added to stacked ?
@FilledStacks
@FilledStacks 3 года назад
@@learningisgrowinglig It's not in stacked yet. It's in one of our client projects.
@wykeless
@wykeless 2 года назад
Hey how do you show the tree-like structure in the file?
@FilledStacks
@FilledStacks 2 года назад
That's from dart extension in VS code. Go to your settings, search Flutter UI, then turn on both of the check boxes that come up.
@wykeless
@wykeless 2 года назад
@@FilledStacks Thank you!
@devsbuddy
@devsbuddy 3 года назад
If we are creating package then what to do when building apps for production I mean do we need to publish the package first or we can build the production app with in dev mode package?
@FilledStacks
@FilledStacks 3 года назад
No, we reference the package locally using path.
@devsbuddy
@devsbuddy 3 года назад
@@FilledStacks No means we don't have to publish the package right?
@FilledStacks
@FilledStacks 3 года назад
@@devsbuddy No you don't you can reference it locally when developing and when publishing. The code will just get compiled into the app the package doesn't need to be live.
@devsbuddy
@devsbuddy 3 года назад
@@FilledStacks ok I got it, it is just like helper, actually I also created package to help me build responsive UI and I take it as a helper.
@FilledStacks
@FilledStacks 3 года назад
@@devsbuddy Awesome. It's nice splitting things up.
@samo92mx
@samo92mx 3 года назад
Great :)
@FilledStacks
@FilledStacks 3 года назад
Thank you :)
@learningisgrowinglig
@learningisgrowinglig 3 года назад
can you also share the figma design link so that others can copy it without affecting your file
@FilledStacks
@FilledStacks 3 года назад
I can not, I bought the file. It wouldn't be fair to the creator of it if I share it instead of directing people to his file. On the written tutorial there's a full image of the design system that I extracted.
@learningisgrowinglig
@learningisgrowinglig 3 года назад
@@FilledStacks absolutely, you are right. You can share the link if possible, I may find others designs as well by the creator
@FilledStacks
@FilledStacks 3 года назад
@@learningisgrowinglig Sure. It's not a free design template but you can see the original here ui8.net/ui8/products/foodly-ios-ui-kit
@abdula5842
@abdula5842 3 года назад
does your stacked architecutre support navigator 2.0?
@FilledStacks
@FilledStacks 3 года назад
No it does not. It's pretty complicated for not a lot of pay off at the moment. We're building a web application so we'll probably re-write the navigation to use navigator 2.0 and then we'll migrate over making sure our api stays the same.
@abdula5842
@abdula5842 3 года назад
@@FilledStacks thanks for the info
@abdula5842
@abdula5842 3 года назад
@@FilledStacks also i see your stacked architecture supports getx now for navigation! I’ve not used it for a while so I thought we had auto route ! So my question is does the current architecture support url driven navigation like in web? Doing RND for web project and I really don’t want to move away from your architecture!
@FilledStacks
@FilledStacks 3 года назад
@@abdula5842 We've used get navigation from day 1. Never used some else. The only thing that changed is that we don't use the new autoroute. I forked the package at v0.6.9 and built it into stacked because v1 wasn't going to be compatible with our way of developing. About the url nav i don't know. Haven't been doing a lot of flutter web. But if autoroute supported it before v1 then we do as well.
@abdula5842
@abdula5842 3 года назад
@@FilledStacksi looked at get and saw it supported it ! Do you think the latest stacked architecture supports it as well by default since we use get under the hood?
@adilsakout7130
@adilsakout7130 2 года назад
Thnaks for this tuto, can you share with us Figma file ?
@FilledStacks
@FilledStacks 2 года назад
Hey, I can not. I bought it from someone, but you can pay for it here ui8.net/ui8/products/foodly-ios-ui-kit
@adilsakout7130
@adilsakout7130 2 года назад
@@FilledStacks thanks
@stevenr12
@stevenr12 3 года назад
Could you share your Figma design file as well?
@FilledStacks
@FilledStacks 3 года назад
Hey, i bought the design. I don't think it'll be fair to share it. When I shared the original link somewhere in the comments where you can go and buy it too.
@martinharris4416
@martinharris4416 3 года назад
What is the shortcut you are using to create new file?
@prashantjoshi5763
@prashantjoshi5763 3 года назад
advanced file, its a vscode extension
@FilledStacks
@FilledStacks 3 года назад
As mentioned below it's advanced file. A VS code extension. I mapped it to CMD+n or Ctrl+n on windows.
@kamalCode
@kamalCode 3 года назад
Sir, how to become Flutter GDE DEVELOPER FROM INDIA
@FilledStacks
@FilledStacks 3 года назад
Hey hey, if you want to become a GDE your location doesn't matter. You need to be a champion of the framework. Teach, share knowledge, use it, help others, contribute if you can, grow our community and make it a good thing to be apart of.
@parasavvy
@parasavvy 3 года назад
Hey, Why should we have the package for design files? I do it like having one dedicated folder containing design files and in the file I create static const variables in a class like this 👇🏻 Why should we have the package instead of this approach, in this approach we can have performance benefits of using const. class AppColors { /// Primary Color /// #F64B67 static const pink = Color(0xFFF64B67); ... } // If it's styles file class AppStyles { static const title1 = TextStyle( fontSize: 48, fontWeight: FontWeight.w700, color: AppColors.typeDark, letterSpacing: -1, ); ... } // Access like this Container(color: AppColors.pink); Text("Hello", style: AppStyles.title1);
@FilledStacks
@FilledStacks 3 года назад
We also do that in our apps without wrapping it in classws. As I mentioned in this video, this UI has to be used in 3 different apps. And we don't want to repeat any of the UI code. So the best option is in a package where we can maintain it in a single place for all 3 apps.
@parasavvy
@parasavvy 3 года назад
@@FilledStacks Wooh, Now I got it, Thanks
Далее
Complex Animations in Flutter using Rive | Flare
15:44
Просмотров 225 тыс.
How to Build a Software Company From Scratch Solo
13:41
Level up your UI design skills in 12 minutes! | EP2
12:05
Best 30 Flutter Widgets, Packages & Tips
5:11
Просмотров 121 тыс.
No Code App Development is a Trap
9:31
Просмотров 262 тыс.
How to build a package in Dart
14:23
Просмотров 18 тыс.