import SocialEmbed from "../../../../components/SocialEmbed.astro";


# Flutter Plugin - Live Coding - Native Color Picker

<SocialEmbed platform="youtube" id="zY3mWKifRd8" />

## Description

In this video I walk through my debugging and plugin creation process!

Source: https://github.com/rodydavis/native_color_picker

## Transcript

**0:00** · hey guys my name is ready today we're gonna be building a native color picker for the web maybe later on we're gonna add iOS and Android but at least right now we're gonna focus on the web so first of all what you're gonna go ahead and do is create a folder and then open up that folder in vs code let's go ahead and create the default package so flutter create - package and then we're

### Create the Default Package

**0:28** · just use dot I so as we know we're already in the folder let's also create the example perfect now to get this

**0:50** · registered let's go ahead and reload the window once this finishes and let's go ahead and remove all the comments if you're curious about some of the extensions I'll be using I have removed all comments right here and we also have

**1:15** · I'll be using remove blank lines right here as well as the flutter plug-in so here we have this this is deprecated so we can remove this let's go ahead and add our URL

**1:42** · and our SDK level is good you can go ahead and update the description

**2:07** · perfect and let's go in and remove this of test for now so what we're gonna do first is we're going to be creating a federated plugin that only works on the web at the moment so let's create a source folder and a native color picker

### Creating a Federated Plugin

**2:43** · let's go ahead and export that this is useful for the way dart deals with files and we can also give it a version that people care about it okay

**3:12** · now we want to have a couple different files in here we're gonna have a web dart a impl dot dart and you will add a

**3:33** · a mobile tart and a desktop pop tart since all these could be done in different ways and it should be it so now this file is going to use conditional importing and we actually need to add a unsupported

### Conditional Importing

**4:05** · this will be our fallback on the puffiness we don't support so to start off since we're only supporting and actually we can remove this I can put this here this will make sense in a

**4:22** · minute so we can go and delete that all right so we have these files right here we're gonna start off with the impl because this will allow us to implementation as well short for it but it allows us to define our interface at the other classes are going to override so we're going to do abstract class let's call it color thicker feel perfect

**4:50** · and then we're gonna have a let's just give it a generic class of a function I mean sorry color this method will be let's do pick color and we can update

**5:11** · this as we go to so one of the nice things about this is that it's flexible okay perfect actually we want to declare this without a function body since we want it to be overridden okay so let's go over to web this will be the one we start on recall color let's do native color picker native color picker extends color pickle on

**5:45** · implementation let's go ahead and import that and we see we need to override it so in this case we're also going to be importing HTML we can do this because we don't have to worry about dart i/o or anything else in the native side since we're conditionally importing it right here so let's look at this API so this

**6:16** · is the API that I found what's cool about it is it offers a native functionality so like if you click a color on Chrome for example it'll pop up the Mac OS color picker which is super cool giving you also the option for an eyedropper and then on Safari and mobile

**6:35** · it'll even have a special array type and then you can click show colors and also show this too I just thought this was super neat and it even shows a special keyboard on mobile so something the browser supports so we need to look up this API so we have a lot of the ways I find the documentation for some of this stuff for dart and the web is from angular dart and dart just being used all the web so we can try searching for

**7:09** · actually we need elements so let's go ahead and and look at this and see what it provides

**7:30** · okay you got this is some of the default ones I've used the file upload one before let's see if it's already defined so let's go back to our web and we can go ahead and close these out so let's see what we got color and put element let's see we have

**8:15** · a couple different types but we need specifically the input one so

**8:35** · it's actually open back up the API documentation so it's type of color you can give it a

**8:53** · name let's also give it a value so this will be you can also pass in that default value so let's go ahead and add this this we need to put it into a hexadecimal form and I'll show you guys how to do that so let's go back to here I'm going to do color color default or

**9:19** · let's do value this way if the colors user selects a color the next time they go to select it though so it'll pre fill it with that correct color so let's go ahead and add nothing here you can do right here if it's not equal to null you're doing I'll go duplicate it all right let's see we can do let's see how

**9:57** · we can convert to hexadecimal together pulled up three here

**10:24** · I have this function let's go ahead and drop it in we need color package so let's go ahead and then pour top

**10:49** · so we're curious let's go ahead and import this here it's around packages get awesome so now this will take our color value and return a hexadecimal CSS string which is what we need so here C

**11:15** · does that we're gonna put the pound sign for us see what provides yes it does provide it perfect so we can do color implementation cutter string and can put our color right there awesome sweet so

**11:42** · that should be good to go now we just need to return the color once they select it so let's first of all just test to see if this works let's open up error example do the same thing as earlier remove all comments you can format it lets depend on our current package so you select it is just saying

**12:08** · to look up one root look up one directory so we can import it we're gonna have about there so we're just testing this out let's do let's just make the increment counter call this function so you called native color picker

**12:38** · make sure it's imported current packages kit oh we need a sorry we need to add one more thing let's go down to unsupported we always have to have this just do class here extends just like before whoops Collin in here we're gonna do something

**13:11** · a little bit different but it's still fine import it and override perfect if you just hover i'm unimplemented error you can say not supported and let's go back here subscribe this perfect that's what we wanted and you change this to a a

**13:50** · singleton so it looks a little bit better you can say here this is just for example but see right now it's just grabbing it let's go ahead and run it on the web we can also create a launch file

**14:16** · just for simplicity okay perfect let's go ahead and move this to the left it's a cool application by the way it's called Divi allows you to kind of put things side by side this is a really awesome API suite so we can also do some autocomplete as well it's pretty good listing

**14:51** · we'll also need this is where we're going to do next is we're going to have the the callbacks for the color awesome okay let's see what happens if everything goes well let's just show the native color picker

**15:28** · and did not do we either provide a color to begin with let's see let's try giving it a face one so stop let's do red

**15:57** · interesting let's check the console let's go ahead and print out just to make sure that we're not crazy

**16:22** · ah there we go oh this is a hot rail oh dear and we need to reload from the beginning for missing anything okay let's try that

**17:00** · again it is saying picking color so there's something else going on okay I'm gonna look up my image picker that I made just real quick

**18:01** · let's see file access

**18:23** · but this the class let's see what we need to do

**18:57** · hmm interesting file upload input element we did this with the color but this is different let's see if we're doing the wrong type hidden' input let's try that one hope

**19:34** · let's go to the definition

**20:03** · let's go back to that go ahead and stop the application to oh because she's in input element of type oh here we go let's try that

**20:58** · that's what we want let's try that it's going around again

**21:23** · does not support Internet Explorer useful hmm see if we're doing anything wrong

**22:07** · yeah I think it might be quick instead of so large

**22:31** · okay let's see what happens awesome hey there we go so that's perfect so now you need to take the callbacks so let's look at this again so we got a couple

### Callbacks

**23:02** · different listeners we got input listener oh this is a different one sorry it's our load let's give it a fallback color - it looks like people are early looks like that's a thing so

**23:48** · awesome are we gonna fall back to white and let's do our callback

**24:07** · mm-hm Justin uptick first is

**24:28** · mm-hmm so we called for every value and then this one is called for glass value interesting so we probably would like to

**24:46** · do this in a strange kind of based but we still want to have the option to pick the first one let's build it with this first so let's go ahead and create this into a future st. for the implementation

**25:12** · and same for the web person for the yeah you know I mean okay let's do take first

**25:34** · so when you add an event listener input see if there's a different way let's call back nope okay plus to our value

### Event Listener

**26:09** · which is Hopi a string

**26:28** · selected color is not equal to null we're going to kind of wait for this we're gonna also break it out when they cancel so you can set that here see it does do select right here which is weird but it's fine

**27:00** · use capture also let's go ahead and do that

**27:42** · it's definitely the target value how we may need to cast it

**28:10** · okay perfect let's do this one right here and now we want to return the color and we have a function for that too because now we want to convert it back to a flutter color so color from string

**28:38** · there we go let's use our same implementation turn color from string awesome now this may go into an infinite loop on the first time but let's go ahead and just make sure we print out these two different listeners

**29:24** · okay let's go insert application

**29:46** · and you do air handling next to so we have our debug window select it interesting okay it closed still receiving them see if we can print this out

**30:37** · okay let's try that again so we immediately returned a big thing how's it equal to null that's what we need

**31:07** · oh look at that there is our color that is perfect now what we could do well say we need to do in a functional way I just have a call back it might be better in this approach let's do this

**31:49** · we're going to do function color \[Music\] and value there we go let's go ahead and add that to our unsupported and let's

**32:14** · add to the web because in actuality I mean they can pick multiple colors not just at one time and the user could just stop listening once they get the first one but I mean in theory they could just have this thing up to their side doing whatever just go ahead and choose huh now we can remove our while loop and put this here

**32:56** · okay perfect perfect and now we need up this ooh yeah change that does not look good too \[Music\]

**33:33** · see I was fine I can actually make this there we go since it could be optional so you get optional here let's go back to our example gonna have a color so this is

**34:08** · gonna be our value each time that we want to kind of pass it in and you do if on to set state color is equal to color and we can also print it out just so we can see what it is

**34:33** · and for to be fun let's go ahead and set this as the background color run the example

**35:02** · Paul goes well we should be able to change the background-color each time there you go oh look at that that is sweet that is really cool and what's crazy is we can actually do an eyedropper to itself that is wicked cool

**35:39** · interesting it stops listening for that let's try to you oh that's awesome cool wow that is so cool alright let's go ahead and quit that now let's go ahead and handle edge cases

**36:08** · okay this looks really good so you gotta remove that old code probably want to this could be null so we can actually wrap this as a callback so date color

**36:55** · okay and then we can do try-catch right here for the edge case that it's over null and then right here we can try to see if it's not null okay let's go ahead and print this here

**37:27** · perfect cool we have a way to do this on desktop too but I'm just trying to debate if we want to or not they can do desktop and mobile

**37:54** · at the moment but web would be the one that we get Smith the one point out with yeah that'll be good so let's after you query package you need to update the change log so here to added color for a web change the version here so let's update the example so let's

**38:33** · create an icon button here whoops what I do there done this one Oh

**38:57** · too many yeah that's weird no I love let's try that again oh here we go perfect do the pallet okay select that I

**39:21** · like to add it here usually you can do the three back ticks with dart to have the syntax highlighting I'm going to copy this add this here and then I like to usually copy the function so we can kind of get a call back directly

**40:25** · since that's by default we go cool you

**40:55** · and I spelled that all right um yeah that looks good now we just need to publish first this

**41:19** · is another thing that I like to do this allows you to do demos so let's go ahead and CD into the example its to flutter build web so we can give a release build and while we're doing that we need to update let's go ahead and add it to God

**41:53** · let's do add existing packages go right at the top perfect create a positive it is perfect

**42:22** · so either both the thing here let's go ahead and open this up and finder actually I created a git repository inside of the example so you go ahead and delete that awesome I think base project make it public for all you guys let's go and publish that I

**43:06** · build is done so we're going to go in and copy to build web folder copy all the contents and paste it inside Docs to adding demo I do the same process on all

**43:30** · my packages so if anyone's curious just go ahead and add github pages and the docs folder copy that URL

**43:52** · going at it here it's always nice to have topics and let's go back to a

**44:07** · project and right here I want to do online demo suite and since I have other packages to I like to add the banner for what I have on most of my stuff so here we can go to plugins

**44:39** · let's do flutter MIDI yeah now let's do something else oh I need to add one there student

**44:56** · master crunch well we need to add these anyway so go ahead and add these at the top oh it is there okay so now we can swap this out perfect and less time to

**45:22** · publish you gonna do flutter back let's go ahead and clear this flutter let's go back up one directory widget flutter package is published we might get an error that's okay yep there's a there's a weird issue on the master branch right now flutter but that's okay we can do public trees publish that'll force it

**46:00** · interesting what are we missing your author

**46:31** · perfect that's what we want click yes and we are good to go so now if we update this and then view this one your hope

**47:02** · and this should work make sure that's correct give color picker you've got a bigger little calibrator I just probably cuz that's new

**47:30** · very fresh weekend all right let's try the demo perfect we need to fix that so also show you how to send update

**48:05** · you sure we called it correctly yeah I come increment looks good to me let's try it again let's just make sure our example works \[Music\]

**48:51** · okay so it is still working we need to also disable that for here flutter or debug check one painter falls oh of course we need to also add a dark theme for the demo all right let's go ahead and build it again and we'll just copy those files up

### Dark Theme

**49:55** · let's go ahead and copy those it's good I thought just go ahead and see if it's building occupied just first before we publish

**50:33** · interesting is only working on Chrome

**50:50** · okay so probably have an edge case for that but that'll be another video all right thanks for watching if you want to see more like this be sure to subscribe just thought it would be cool for anybody that's curious about package and plug-in development for flutter reach out to me I can follow me on github and Twitter and everywhere else yeah thanks again