Flutter Theming, Pair Programming with Author of Flex_Color_Scheme! 32+ color schemes in one app!

colors themes well light mode dark mode i need darker this is not dark i need lighter as a flutter developer we usually deal with theming in our applications well maybe you have a design system and you want to implement your theming your brand theming and maybe the color palette for the branding of your company whatever you have flex color scheme can help you i sat with the author of flex color scheme mike rydenstrom and we talked about floated me and how i can leverage his package into my application and properly implement a flutter theming and different colors especially those pre-built ones which he has made in that package in my application [Applause] i'm so glad to have you in one of these episodes i'm talking about theming actually teaming is an important topic when it comes to flutter applications and i'm so glad that i could invite you for this show to talk about theming and your package which is an awesome one when it comes to teaming do you want to do you want to introduce yourself and and talk about your package a bit yes thanks maheed and it's real pleasure to be here and and yeah i'm probably reasonably no on on twitter among flutter flutter enthusiasts at least i've been active for around two years on twitter and tweeting about flutter and doing a lot of desktop development and one of the early things that sort of challenged me when i was working with flutter was teaming and i started doing sort of a lot of experimentation with it and i noticed i'm always repeating myself and doing things in it and so i put quite a bit of time and effort into learning the details of how you team your application the proper way and as i've been doing that i've also been noticing that a lot of people don't really team their flatware applications properly because if you do it's quite astonishing what you can do and all the teams everything usually just falls into place and the teams animate everything works really smoothly so in order to help myself not repeat it myself and then i thought okay let's make this into a package that will help people to do some of the more advanced team theming topics and i've also been using this as a way to show a lot of different color options and teaming for an application in this flex color scheme package that i made there is 32 different color schemes uh that is the light and dark color schemes that you can just pick and choose from i'm not saying that these are perfect for everybody but they provide a starting point inspiration and you can copy and mix colors from them as you like and go ahead but what i have found that is really nice is that you can also in development mode use them as a developer just pick and choose see what you like if you have your freedom of choice sometimes with customers you can offer them as options and say hey you haven't settled on your color team and scheme here is a little bit of choices that you can see what you like and we can go from there so that is something i've been doing with it also this list that i have up here is is just a a bunch of things that the color scheming does it's not a very complicated package as such you can easily do it yourself these kind of themes as well but it's a it's a little bit tedious so what is one one of the key things that that i already mentioned to show a lot of different teams but when you move into web and desktop another important aspect is something of often called uh price sort of color branding surface branding of a color you have your primary and secondary colors but then you put a hint of that into your background colors at different strength levels this is this capability is built into faultlex color scheme and you can sort of choose the strength of this color branding from your from your primary color also and that is quite quite quite a nice feature i will show it briefly soon as well and then everybody always talk about the up bar should it be you know like ios style just white just black or should it be colored like in material theming etc this allows you to quickly just pick and choose different theme options for your app bar without having to sort of team it everywhere otherwise and a new one that i did was a quick swap of primary and secondary colors in in in in your team so that you can sort of swap them around and have them the other way this is not all the teams don't work so well with that but sometimes if you have a light scheme and then you go to the dark scheme it might work to sort of swap the the primary and secondary color it might give sort of a nice twist on the dark team uh other things that is here also is um a lot of convenience things uh instead of completely defining all the colors in a color scheme you can just pick one color and say okay make sort of toned options for the other colors your variant your secondary and secondary variant those get computed for you from the selected color and you can even take it one step further and say okay i want a dark team that matches this that would be sort of a more desaturated color set of of that primary color so this you can do sort of real real really easy and quickly another thing is standard dark mode in in in flutter and material design is not really dark if you want to go even darker and black there is also a true black mode that you can select for dark mode that makes it even darker and then there is a bunch of helpers for for the system navigation bar in in android so that you can make it follow the color scheme you can have it so that it uses the surface branding that you put or it can just be plain dark and light of course but the important part is that you make it follow the color scheme i see a lot of the flutter applications when you run them on an old android version the system navigation bar at the bottom doesn't change color video light and dark or doesn't follow your color scheme you can easily do that but you need to sort of usually apply an annotated region in flutter to do that and not a lot of android flutter developers are aware of that there's also sort of there's also a few grievances in in the new thing of course that google is going with with the flutters flutter teaming is to to start teaming make your team data from team data from use that sort of factory constructor instead of the standard one and you create it from a color scheme so so that and that gives you the all the correct colors from your for your sort of for your widgets and and all that but there are a few gaps in there that they have never addressed addressed and fixed properly so flex color scheme takes care of that as well interesting uh so mike your package so the uh flex color scheme is it working on all platforms or is it just all platforms for sure it's all platforms favorite desktop fantastic anything oh that's cool that's cool so as long as you're using like as long as we are using material app so and then we are good to material right yes fit yeah we're good to go and i've been and the test i also sort of for the package this is pretty well tested it's at 99.75 testing level and i have automated a build chain so when i release a new version the demo apps gets published automatically as well and this this thing so it contains some examples for that if somebody is interested in in github sort of ci cd you can look at that as well sure i will definitely put the link below or in the show notes or or the comments everywhere so don't worry about the links uh to the git so mike and this is absolutely fantastic i mean this comes with a lot of pre-compiled let's say or pre-built color scheme so if i want to create my own custom one so is that also possible to do that absolutely absolutely and and and examples show how to do that as well and also these examples includes a few few sort of extra extra added ones as well you can see this one here called flex full default and custom colors and image base these are sort of extra that were custom made for this application whereas everything that comes after this in in this example it includes also the flutter default the material guideline default team plus the the flutter material high contrast but then you have so it's only 30 new ones okay but then it starts with all the all the new ones that you see here that are sort of predefined and they have their own dark version of it that is hand tuned but it's i want to show you some something that you can do because you know mike in many companies at least there are like probably design system or some kind of like coloring you know a palette or stuff like that which is like organizational you know uh branding and stuff so this is absolutely possible with your package right so yes yes and i'm doing that as well in the example showing you know how to sort of use the built-in schemes how to sort of add make your own scheme of it that you're using and how to mix that and make a new list with you know your custom schemes plus you know how many you want to use and present of the built-in ones and if somebody wants to contribute and say hey i have this really nice beautiful color screen scheme just send me a pr and and let's add it to this sort of list this is actually my question this is my question right now if somebody wants to uh contribute how can they go and contribute can you show us like where to start or or where is the repo or how which file they should look into first and stuff like that can you just guide us a bit so yes flex color scheme is on github if anybody wants to to to sort of contribute just let's go open the repo did it take it first thing first it's null safe compatible right so it's now self-compatible yes it's been uh pretty much since null safety was launched and i'm also constantly tracking the master master channel in flutter to see it sort of and prepare for the upcoming changes i'm not putting them sort of into the live released version until they are on stable channel but i might release a sort of development preview because there's a lot of new interesting features that are coming up to teams and i do anticipate that material you will result in some changes to color scheme classes in flutter maybe or something like that because it seems when you look at material you design and the way they extract the colors in that that there are more sort of shades involved that you have in a color scheme class in flutter at the moment or in design so there might be that they are introducing a little bit more shades in in there i found some sort of indications for that also in in some in some other repos but okay anyway read my read mic is my my github handle and of course you can find the from pub.dev you find the repo so it's easy to find that way uh all right mike so this was fantastic so far so now i actually have an app and i thought that why not adding like different theme to my app sure for sure yeah for sure your package is one of the best out there so i'm gonna actually ask you to join me for pair programming to my vs code and help me to implement this package or your package to my application this is a very simple app when i click it just doesn't do much it just goes to one screen and i can come back to a logout and login page i have a coffee i have a coffee espresso team i think you will need that one oh fine let's let's actually implement that let's actually implement so as far as i understood the first thing i need to do is i need to first of all i need to add the package to my puppets by gamma file right yes do that first uh i'm gonna go ahead and do that and and that was flex color scheme flex color scheme a version i think the latest let's let's keep it three right 3.01 is the latest one here we go it's the latest one all right so like it's getting everything there and then let's close this so first thing first for i assume that i need to import this uh package let's say to my you won't if you have this uh get team function there where you are where you are actually returning the team data we don't actually need to import it here in this main main file at all if you just need to sort of import it there in your in your in your function where you are making your team data it can return it from there as well perfect so so then here is the theming part in my application but then i'm going to go to my function where i'm actually doing theming over there right yeah and and then and we might want to when i add then also sort of a dark team to this because now you are you you are teaming teaming with just the sort of the the light team mode there so so you might want to add that dark team but let's finish the light team first and add the dark team later it's simple enough actually let's let's actually remove this uh function that i have and then do everything here for just make it yeah all right it's simple so then i will import it first here is the import and then i'm gonna go ahead and have the flex color scheme right so here on this i can call different color yeah this this has a number this has a number of methods but now when you're making the light team just uh put sort of that you want to use the light factory i mean it has it comes with sort of its default construction constructor but it has uh uh uh two factories called light and dark different factors so to help you make really yeah pre-configured factories you you can use flex color scheme in its raw mode with its default constructor but that is for a lot of sort of customization you don't maybe want to do sort of because then then it has its uh sort of convenience constructor as well and uh okay what you want to do with the light light one is just as a simple first first step would probably be just to say say that you want this to to me to sort of get the one one of the color schemes you one of the built-in ones there is 32 built-in color schemes and you probably want to sort of just test it out with one of them to begin with and then you would just in the light schemes constructor use the property scheme and then we use an enum value to select one of them okay and if you everything is every everything everything there is by the way 100 up api documentation properties in the package so it's it's fully documented all the properties and all the classes and everything that you can ever want to drill into really into all right very good so then actually uh mike so so you have two factory you said you have a light factory and you have a dark factory right yeah and of course the light one you would use with your team and and the the the dark the team dark team you would use the dark one for for it okay so here then i can say dark theme and flex color scheme dot dark yeah and then there's one thing you need to select of course the scheme you want to use because you have 32 ones to choose from so that will be the first choice to do to sort of look into what scheme we want to do okay like here i have a property like scheme so i can now choose the flex scheme right yeah here we go i have all of those here yes and there is one called espresso i thought that one would fit your coffee up yeah yeah yeah sure and you can and you can do this you can do the same scheme for for your dark one you don't have to use the same scheme for the dark for your dark scheme but usually you would they are not exactly the same colors when you do that you you get sort of uh sort of less saturated color scheme for your dark mode oh that's that's a good one and and then what you need to do do still here you can see you still have an error here that's because this this is just a flex color scheme is just a class to sort of select the team then it has sort of a method called two team then it will return your team okay so you just go to team to team yes oh yeah i see i see and and that will that will sort of use a lot of pr built in built-in scheming oh you have a spelling error there and uh yeah a few ones also in flex color scheme sorry here we go okay that's right this is sort of the minimum thing you would do to sort of to get started that that's it now you have have these teams and if you if you rebuild this you will you will get another sort of little bit team on your on on your app here and of course now you don't have your phones and stuff like that but you you will see some new differences on this one yeah sure that's exactly correct but now um let's actually um you just want to actually check the dark mode of it yeah then you then of course you you can just change up you have the dark mode t-mode system if you just go dark mode dark there instead for your no no keep that keep that keep that uh you are doing this sort of mistake here with the t-mode system just go put that into dark then you switch your app to the dark to use the dark mode one of the things that i see very few people actually using correctly when we talk about teaming is that you really need to provide a separate team team for a team that is the light mode and the dark team that is the dark team that was not the way flutter started because it didn't have a dedicated mode for providing your dark team so people did it through the brightness adjustment in the team you use just team and then you change brightness but that's not the correct way of doing it anymore you really need to use because because when you are when you are using this way now when you change the team mode you have your team mode system above so you can of course you can switch with with the with the switch in your in your operating system in android but you can just go dark there instead now if you want to force it to go use the dark theme so that one always when when the team mode says system that means that it will choose team if your system mode is light and dark team if your system mode is dark so so now you get now you get this and and i can see you haven't used teams when you have made your button there and and this is one this is one of the things that i'm always sort of a big proponent of that tell people use teams whenever you design your custom widgets base your custom widget on your color scheme if you do that if you use your team of context color scheme to to even if you're making custom components and and you base everything off that then when you are doing proper teaming then you also get get that scheme by the way now i see you're using uh this is like an svg is is this an android image or where did the svg this is this is an svg yeah but is it is it from andro you know this public library called andro or is it a custom one i think so yeah it's android yeah because i have a way also of uh uh i showed that a little bit you can team them in code this android image as well so i have sort of made a setup so that when you change your team to undraw background color changes also with the theme ah that's fantastic let's actually okay first of all let's fix this let's fix this button uh because i i definitely didn't use the theme here so i have a custom color here yeah yeah here we go and and that is you have something called dark dark brown there and and that for the for the side etc and this is the border side you should probably and there is your filling of the dark you have the text button i probably i can remove uh we can go to the button styling if if you wanna if you wanna do but but this whole button style is something you should do as a part of your team when you are building the team data exactly and that's a very good point so but actually good for everyone who is watching right now so you know if you do these type of things that i did right now you're going to get to this problem i did it deliberately so i wanted to show you how it works yeah actually now you see when you removed it you just have the stadium border it's it has sort of uh some some kind of dark i don't know what what button style you used for this one but it's the material state text is it just a standard button if you i think it's the standard yeah if you if you change this to one that has some background to the to the to the race what is it called now again the race button you can just change the button just to try it try it uh fl flat button uh was it called button the tail raised button let me see i always forget since they changed them also is it raised but uh no that's the difference that's the we can check we can check in here in the code so [Music] focused elevation raised elevator elevated button yes that's the one now so just change it to elevated button and it should get also uh some kind of team applied to it then because that has and and then then you have another error error here that's of course the textile where you're using some text color for it as well yeah exactly you don't actually need that if you have it now since you're using a team on it you don't need it it will get it anyway exactly and now you got sort of this coffee cream little bit some something and it's using using also the right style for the text that has the right contrast yeah sure let's actually now turn to uh to the uh light version and see how it looks um now i'm gonna change it to light okay it's a very good point so first of all if you are going to do the theming so from you so stick to the theming do not add any custom styling right yeah you always always do it in the team you can you can use the colors of course but always use the colors from team of context dot color scheme and there you have your primary primary variant secondary and secondary variant this is a this is an area where i think that we will see maybe some more colors in there so that you will have a perhaps a primary light and a primary dark i've seen some indication that that might be coming up as a change in in flutter but i'm not sure if they're going to do it or how how they will do the material you you yeah sure all right mike mike now i have a button here and my button is black so if i if i want to hook uh like if i want to change this color in in this disperso like like color can i do that here can i customize it yes you can you can make a total sort of customized flex color but then then i would then you would make that via via the colors property and not use the the the built-in schemes and then you can get get them to for that but this is if uh if you want to have a if you want to do sort of a a lot of sort of teams colors that are one-off but if you want to have this as a black button then you need to have something with a this is a primary colored button now you could uh also make it a primary variant or or secondary or or or that if if you if you want to sort of if you take a look at the color scheme what what this one what this one actually contains if you click on on on on the espresso let's go in and look at the code a little bit let's yeah let's let's do that let's yeah here we go this is spare so here yeah it's it's it's just one of the colors there and that's gonna gonna pick up pick up one of one of one of the one of the colors if we go is it the color here so the flex color class yeah that that contains uh a lot of the color definitions if you go down just scroll down to you get to the to those colors just scroll down a lot there's a lot of colors in here like you might like you might imagine just or search for this espresso in in here you will find more special like as a class yeah and just just espresso as a name here now you can see where we find it it's not so many of it you will find it around there there you have it oh here you go here you go here you have so so there you find it has a name and it has a flex scheme scheme color etc and and you can totally build build your own sort of color color data you you can do it directly from just making a flex scheme color like like like you see here with the primary primary variant secondary and up bar and there are error colors you can you can use when you are using the factories when you make your own custom color you you only have to specify actually the primary and all the other ones will get computed for you if you don't want to specify these many colors but this is a if you when you make your own custom ones you can of course just start by this copy copy the the the constants that are that are used by this one and then you you you modify it in instead okay and i just now for example let's let's have an example can i just copy this flex scheme yeah for example yeah and maybe here maybe here i define uh i oh sorry maybe here i define another team let's say custom team let's say a custom theme and then in custom teams i just paste all of this and then i can customize it right yeah so like name i can put anything for example all right i see so this is the way that now we are creating custom themes then i at the end i can pass this custom theme to my uh theming right yes absolutely so i i have a question here then right now this is coming with dark and light so i let's say i created this team right now custom key so if i come here should i pass this custom theme to both of this dark and light yeah you can you you can you actually pass past the one called let me show you some example of it uh grab that as or or do you think that i should create like a custom class and hold light and dark and then you know maybe define my flex scheme uh data or flex let's say not it's not data actually flex the scheme color for for both of them like like a factory as you created for flex scheme which which which way do you think is better for creating this customer for for for doing for doing doing something like this you could do something like like this for instance uh-huh okay so you don't need that name and things like that that is just something that is used in descriptions for for pop-up what you can do is just define the flex scheme color data like this and i see and then if we go into let's say you don't wanna wanna use this one flag schemes color lights then here instead of this one you would just go colors and use this flex scheme white i think it was there instead now you would be using using this this one instead let's see you did it actually oh here we have all your stuff here let me just comment that away so you you actually use no you haven't used that yet oh you used it yeah i used that that is that is because now now now there is there is two there is two ways if you're just using a single single one like this like a color then you can just pass in the the scheme colors like this and now you see you got the different different different scheme and not using any of the pre-built build ones that are in the sort of scheme is a is a convenience factory you could also there is also a list of this uh this scheme did all these schemes where you could use the e-name as the index for it for it etc and and a map and just and just get it that way that's what i'm doing when i'm when i'm using the option that lets you pick you know 32 different ones then i just do a list with an index and i sort of put these custom ones in in my list plus the ones that are i i i spread collect you know use the spread operator to spread the ones that are already built as a constant list already exist in the package and then you insert as many as you want of them there as well and and but this way you can see now now we've now we made a scheme and if you want to do this because now we're using the the light we can do something like this as well let's not define this primary and a secondary variant but then a quick question here um so technically the scheme that you created are actually built with this flex scheme color so if i define my colors then i'm good to go so i don't need to do like i don't need to create like a scheme data no you don't need to create that scheme data these colors are good good to go for that so if you want if you want to be lazy you can do stuff like this we don't need that no we don't need that we don't need this and we don't need this yeah and and now i'm just defining one color but if if you start looking into it you will see that it still has color definitions for the secondary and secondary variant etc it's just computing them all from the single color you made as different shades from it but for that you have to use this factory hair again when you again when you are when you are using just just the raw constructor for the flex scheme color then then you need to provide all all the properties this is like a little bit there is a in in flutter also dissimilar this kind of factory constructors that make it more convenient for you if i if i go here let's take this variant videos because at least then we get a secondary color that's defined and and then i'm going to do something here also here we are using this one and i'm gonna do something here also sort of be really lazy here now and then we're gonna say on the dark one you can go and this can go too dark should be able to do that so and we're not gonna have this even dark one here at all just to show show now and then we'll go dark here and do the switch again so now now now what i'm doing i'm i'm just defining two colors and still getting a dark team computed from the light team and without having to sort of define these desaturated colors that's very cool that's freak now actually i i started thinking about your package seriously so it actually helps like to create these themings like very easily yeah and also very fast so it's very very nice mike for the last tip of this session if you want to give us one cool feature of your package these are like all are great but one thing that you really like like one thing that you did and you really like yeah which one is that it's really for me since i'm i'm dealing a lot with the larger services like web apps and desktop apps so for me it's really the the feature we didn't look here in the light coding we could simply add it also but it's the the surface branding that that we do about about it as well and this is this this was really just the basic one if if we switch this it's a little bit hard to see in your app but if we go to light mode light here and then we go in here and we're gonna add one more property here now this is going to to add a hint of this primary colors into surface colors in your application you won't be able to see it so much but if is is there any dialogue or anything like that in this application where you might might you have might actually see it see it a little bit or or or any any place where there is surface color used that that you haven't overridden with something like surface or background color color no actually i don't yeah but i understand what you said that's that's very cool this what is what it does is it adds a hint of of these primary colors into the surface colors that you might see on side menus or or like in if you have a drawer that would be using this color also and get get yeah get a hint of this purple color that we are using now which is probably still not not such a such a good fit for this espresso app but we can we can switch it back to the espresso color scheme as well so but that that is that is really and and for somebody that wants to get started with with this uh it is teaming and and and learning more about it the package comes with a very extensive tutorial it walks you through a demo app all the five different demo applications and it shows you how to do do the teaming without any state management in a very simple way just doing it with with callbacks etc from from from a main app and and those five demos are available on web as live examples and you can see that their code there and try it out it's really worthwhile going through them if you want to learn more about teaming in general and what you can do you can add visual density there also we have a i have a sort of there is a flex uh there is a flex visual density as well if if you want to look at the visual it's a built-in helper for visual density what does this what does this do visual density that's actually a feature that exists already in in in in flutter itself has visual density in team data what it does is when you're running your application in in in web or desktop mode it decreases the the spacing on on the material widgets so they take they come more compact oh i see there is a built-in sort of platform sort of visual density that is adaptive called the visual density adaptive or something like that in flutter i made a new one that is called comfortable simply because i noticed that when you are running on on a on a on a desktop with touch interface or an honor or on a computer with a browser with a touch interface that the default one becomes quite sort of compact so this one instead keeps the the standard for android ios and f for fuxia but when you go to linux and web and it returns something called comfortable which is a little bit less dense than the standard flutter adaptive one so it's it's still denser but not as dense making it more easy to use touch when you are on a on a web interface or on a desktop that has a touch screen this is fantastic this is mind-blowing fantastic job great job mike thank you for providing this great uh package for the community i really enjoyed this actually i never used any package for theming and this is the first time i'm thinking that maybe i should reconsider that like i should probably use this package for theming it makes it so easier for implementing theming i really appreciate uh you mike being in the shift show talking about your package inside out i'm sure there is there are lots of things that we couldn't cover in this job yeah this is scratching the surface but you know you get started and absolutely and there is other cool thing that you ask the one cool thing but if you're an android developer the cool thing that this package shows you also how to team the system navigation bar and with the new feature that just landed in master you will be able to make them transparent as well it was possible before but you needed to do some android hacks to do it before but now it should be possible to do it without and i will i will add that as in an upcoming update as well so you can do it do it when then it's actually hitting stable but i i will release that perfect i know that you actually built that and you have a tweet about this transparent uh yeah you know things i will definitely add it to the video so everyone can see and and can come to you to your tweet and maybe everyone can follow you on twitter my channel i will be great link below yeah welcome so i'm active pretty much every day on twitter or at least something but sometimes it's something useful like like a new release of the package or i've also been quite active on reporting flutter bugs and stuff on on on github so sort of dave they i mean famous there are probably already so cool uh mike thank you very much really appreciate joining us and uh you have to promise you have to come back to this show once more and going deeper going deeper to this package yeah let's do it let's do a deep dive and some advanced advanced sort of study of it at some point and i know people are asking for another package that i still haven't had time to work on you know this is a little bit of a side gate to do packages like it is for most of us it it's sort of but it's fun sure i i really enjoy it and it's it's really fun it's it's fun and and i do hope that people want to have some great ideas for some new color schemes that they want to sort of contribute with and just send me sort of a on under under on the public dev you'll find the repo and just open an issue with a hey i have this cool color scheme could we add it to this to this and sure go right ahead if you don't if you're not willing to contribute it as a direct code just call sort of give me the color values you would like to see and we can add i can add them as well if they are cool and look nice perfect then with that said thank you very much mike and see you next time then see you next time thanks mate that was it the pair programming with the author of package felix color scheme so if you have any package in your head and you want me to talk to the author of those packages on plugins and get them to the show and talk with them originally let me know in the comment below or contact me directly via social media twitter linkedin or everywhere that you can find me

Channel: Majid Hajian

Views: 11,594

Keywords: Flutter, flutter theme, flutter theme tutorial, Flutter theming

Id: 6OQmQiiflNM

Length: 41min 35sec (2495 seconds)

Published: Wed Aug 04 2021