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

This video goes over the process of building a UI package that contains your design system.
Git repo: github.com/FilledStacks/boxtout
Written tutorial: www.filledstacks.com/post/bui...
Slack invite: join.slack.com/t/filledstacks...
Time Stamps:
00:00 - Intro
02:54 - Design System Overview
04:48 - Text Styles
10:56 - Button Styling

[@faisalmushtaq2287]

from this channel i learned how to code professionally, thanks brother!

[@FilledStacks]

I'm very happy to hear that! Thanks for commenting and letting me know.

[@faisalmushtaq2287]

@@FilledStacks we had a request that if you could make tutorials on riverpod(brief project)

[@FilledStacks]

@@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]

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]

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.

[@isyedaliraza]

Amazing as always ❤️. Thank you bro for the knowledge that you are sharing, it really helps a lot. Keep it up 👍👍.

[@FilledStacks]

I'm very happy to hear that. thanks a lot for leaving a comment. I'll try my best to keep sharing good content

[@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]

That's awesome to hear, thanks for watching and leaving a comment. I'm happy that the content is still valuable.

[@MrJugi2]

Awesome video ....Next video... patiently waiting.... Keep up the good work. Cant wait to see the final product

[@FilledStacks]

Thank you .. appreciate the kind comment. I'm releasing the next one tomorrow.

[@MrJugi2]

@@FilledStacks If you ever feel like diverting for a bit.....do error handling videos......but don't divert

[@FilledStacks]

Noted 😁 I will be covering error handling in the series as well

[@CleanupStack]

Thank you for this. Planning to build the DSM and this video helped a lot

[@FilledStacks]

You're very welcome! Thanks for watching and leaving a comment. I appreciate it.

[@providencekambaleluseko4114]

Thank you for this gold tutorial. you've changed my coding method. Go a head brother

[@FilledStacks]

Much appreciated Providence! I will try my best to keep sharing good content

[@albrechetti]

Wow! Amazing! Thanks for sharing with us!

[@FilledStacks]

You're very welcome. Thanks for watching and leaving a comment.

[@isaacadariku]

So insightful 💙 Thanks FilledStacks

[@FilledStacks]

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]

🏃🏽‍♂️🏃🏽‍♂️💙

[@harguee]

@@FilledStacks do you mind sharing the link for the sport os code that you are having

[@sumarto9822]

Thanks for sharing !!!, this is insightful !

[@FilledStacks]

You're very welcome :) I'm happy that you found it useful.

[@ferferrara]

Excellent as always 👏👏👏 This is sugar for my brain 🧠 😜

[@FilledStacks]

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.

[@lpm76]

This is really great content!

[@FilledStacks]

Thank you, I appreciate it. And thanks for leaving a comment.

[@priyadarshinichettiar6750]

This is amazing!

[@FilledStacks]

Thank you :D Much appreciated. I'm happy you enjoyed it.

[@jhonbaptist6159]

Wow man, you have great content.

[@FilledStacks]

Thank you. I appreciate the comment.

[@MOhan-ur4ei]

Dope as always.

[@FilledStacks]

Thank you Mohan! Much appreciated.

[@chind0na]

New sub here. This saves so much code from the actual app logic.

[@FilledStacks]

It does 🤩 we use it in all our projects.

[@yujinkang4427]

What a Merciful man, Dane❤️❤️

[@FilledStacks]

Such an awesome comment. Thank you. I appreciate the kind words :D

[@yujinkang4427]

I mean actually, you r ‘The Giving Tree’ :)

[@FilledStacks]

You're very kind Yujin. Thank you for commenting such a wonderful message.

[@yazilimcikedisi]

yes, he is :)

[@NamNguyen-jk1yn]

Amazing content, as always!

[@FilledStacks]

Thank you! I appreciate it. Took me a while to get done so I'm happy it was helpful.

[@aymennurhussen3689]

Amazing 🔥🔥🔥

[@FilledStacks]

Thanks Aymen!

[@yazilimcikedisi]

Thanks for the video :)

[@FilledStacks]

You're very welcome 😁

[@harguee]

Once again top class you dont let me down. WOW NO further comment

[@FilledStacks]

😆 I'm happy to hear that you're enjoying it.

[@sadabwasim9850]

Great content 👍

[@FilledStacks]

Thank you! I appreciate it.

[@bigwig2258]

Really amazing in a very clear way. Love from India bro🔥🔥🔥🔥❤️❤️

[@FilledStacks]

Thank you very much. I'm happy that you found value in it. Thanks for watching and leaving a comment.

[@bigwig2258]

@@FilledStacks please do flutter Mac os desktop app development video

[@FilledStacks]

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]

@@FilledStacks thanks do you have any latest flutters (2.+++) courses for beginners

[@FilledStacks]

I do not at the moment. I might do a null safety guide soon.

[@ursochurrasqueira]

awesome video

[@FilledStacks]

Thank you!

[@InfoTrickyOfficial]

Brillient❤️

[@FilledStacks]

thank you :) I'm happy you enjoyed it.

[@zxenon_]

Incredible

[@FilledStacks]

Thank you very much. Happy to share the knowledge.

[@sornt]

great!!! Thank you.

[@FilledStacks]

You're very welcome. Thank you for leaving a comment.

[@ivanianovskii4867]

I wish all designs will have that many details :)

[@FilledStacks]

:D yeah. I built the design system myself using the details from the designs.

[@MohammadAlbazel]

Elegant and high class coding style.. CAPE going ;)

[@FilledStacks]

Thank you :) I appreciate it. We try our best to keep the code clean and well structured.

[@mruduladdipalli5417]

Super!!!!

[@FilledStacks]

Thank you!

[@nickledesmac.786]

beatiful

[@FilledStacks]

Thank you :)

[@samo92mx]

Great :)

[@FilledStacks]

Thank you :)

[@user-bl5qv3jy1l]

the beast

[@FilledStacks]

yeeaaahhhh!!! :D

[@aakashr79]

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]

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]

@@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]

@@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.

[@PsychoDude]

Hello man! You clearly love flutter. Specifically for a social media app u think flutter is the best?

[@FilledStacks]

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.

[@chorauoc139]

Just too good..

[@FilledStacks]

Awesome man! I'm happy you think that.

[@chorauoc139]

@@FilledStacks Do you know how to render html without any liberties or plugins in flutter

[@FilledStacks]

@@chorauoc139 You can render it in a webview.

[@chorauoc139]

@@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]

@@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.

[@jeremaine]

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]

Hey, we use resonsive builder for the different screen layouts and then screen util package for things like font sizing.

[@bigwig2258]

Please do Mac os desktop app development video in flutter 2.2.

[@FilledStacks]

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

[@tammaibigin]

How can I make overridable values, such as primary color? Then I can set them differently as theme for different apps.

[@FilledStacks]

You create a property for it with a default value then you can pass that in when you want to change it

[@ramodsasanga6169]

You can customize the default light and dark theme

[@FilledStacks]

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.

[@roliesdonald]

your design system very ... very help full, but how can i add and use flutter_screenutil package in this design system?

[@FilledStacks]

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.

[@carlomigueldy]

Duuuude did you create all of these designs?? 🔥🔥🔥

[@FilledStacks]

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]

@@FilledStacks doooope as always!! 💪💪

[@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]

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]

@@FilledStacks thank you, your job is amazing.

[@sergiofranklin8809]

But this type of fontSize in textStyle is not adaptive, and won't suit tablets. What to do for that cases?

[@FilledStacks]

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.

[@nicholai9266]

Does Flutter require separate design for iOS and Android ver. of an app, since both platform have a bit different styles? Thank you 🙌

[@FilledStacks]

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]

@@FilledStacks I have read that Flutter automatically render the cupertino and material style for iOS and Android is it true?

[@FilledStacks]

@@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]

@@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. 😊👑

[@martinharris4416]

What is the shortcut you are using to create new file?

[@prashantjoshi5763]

advanced file, its a vscode extension

[@FilledStacks]

As mentioned below it's advanced file. A VS code extension. I mapped it to CMD+n or Ctrl+n on windows.

[@devsbuddy]

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]

No, we reference the package locally using path.

[@devsbuddy]

@@FilledStacks No means we don't have to publish the package right?

[@FilledStacks]

@@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]

@@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]

@@devsbuddy Awesome. It's nice splitting things up.

[@chetanchoudhary08]

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]

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.

[@chetanchoudhary08]

@@FilledStacks do you have this phone auth service built already in stacked or it is built but yet to be added to stacked ?

[@FilledStacks]

@@chetanchoudhary08 It's not in stacked yet. It's in one of our client projects.

[@wykeless]

Hey how do you show the tree-like structure in the file?

[@FilledStacks]

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]

@@FilledStacks Thank you!

[@stevenr12]

Could you share your Figma design file as well?

[@FilledStacks]

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.

[@abdula5842]

does your stacked architecutre support navigator 2.0?

[@FilledStacks]

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]

@@FilledStacks thanks for the info

[@abdula5842]

@@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]

@@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]

@@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]

Thnaks for this tuto, can you share with us Figma file ?

[@FilledStacks]

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]

@@FilledStacks thanks

[@chetanchoudhary08]

can you also share the figma design link so that others can copy it without affecting your file

[@FilledStacks]

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.

[@chetanchoudhary08]

@@FilledStacks absolutely, you are right. You can share the link if possible, I may find others designs as well by the creator

[@FilledStacks]

@@chetanchoudhary08 Sure. It's not a free design template but you can see the original here ui8.net/ui8/products/foodly-ios-ui-kit

[@axomclutchgod1414]

Make a video tutorial on Google Blogger App Using Blogger Api. Thanks.

[@FilledStacks]

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.

[@kamalCode]

Sir, how to become Flutter GDE DEVELOPER FROM INDIA

[@FilledStacks]

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]

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]

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]

@@FilledStacks Wooh, Now I got it, Thanks