Source: https://github.com/rodydavis/flutter_piano
Slides: https://docs.google.com/presentation/d/18FuD56CHamy9jIi66xjvzb-68QA4e3Kr0xIjHRvLKMs/edit?usp=sharing
0:00 · okay perfect awesome all right well yeah welcome everybody to road to flutter city today I’m gonna be talking about flutter piano I am my name is rody Davis and I have been using flutter since flutter beta-2 so we use it
0:19 · professionally on a company called cross-media where we build mortgage apps for CRN’s and we very aggressively used flutter and actually a couple apps that we have in addition I also make a lot of my apps on my own when flutter create came out I
0:38 · thought it was a really cool idea and the constraints so I decided to build a piano out so today I’m gonna kind of walk you through a little bit about flutter and my process as well as an example of the flutter piano alright so
0:58 · first of all what is flutter well flutter is a like we talked about earlier it’s um a mobile first SDK that can run on desktop as well as web now it has native performance because it compiles down to machine code unlike react native which runs in a virtual machine you get some really high quality animations as well as pixel perfect UI because flutter draws everything on the screen you’re not having to worry about building XML files or even Swift using
1:28 · the native components you can really build a brand exactly like you want for whatever client or company that you want to so here’s an example of the stateless a stateful widget so anything within
1:45 · this class called state and because of that it’s actually able to hold its own values now to rebuild the widget tree you have to manually call set state and in contrast this is a stateless widget which does not extend state and it just returns whatever is given to it so an
2:08 · example of a stateful widget would be if you want to have like I like the the demo application is a counter application every time that you want to increase the counter by one you need a call set state and that increases a variable now and stateless widget you would use that for if you’re composing your widget tree of smaller widgets you’d have the stateless widget that just passes through whatever it has all right so when you’re getting
2:38 · first started with flutter it can be really daunting because of all the widgets everything is a widget and flutter including the material app including down to the button as well as individual properties and the themes so once you get started it’s a lot easier but definitely like the first couple weeks and the flutter are gonna be overwhelming in that in that sense one
3:03 · of the things that flutter provides that a lot of other SDKs don’t is the flexibility of whatever state management tool you want to use now there’s a lot of different options out there currently block is one that’s used well this is
3:19 · used between the angular dart and flutter shared platform that they can you hear a lot of the business logic code there’s redux which was actually made by Facebook and it’s a it’s a one-way relationship of data so the data comes in to the model and then it outputs to the view there’s scoped model which is very popular it came from the future platform which is a a tool that allows platform
3:49 · they could have been working on and more recently and the flutter team has come up with provider which is the version of scope but it allows you to do dependency injection down into any part of your app there’s mob X which is a a
4:06 · similar to redux there’s rx start as well as you can just choose vanilla set state but we’ll see later how important that is to look at other tools because you’re gonna have to keep passing down and passing back up data you can also completely build your own custom state management if you wanted to so you really do have 100% freedom here’s an example of calling set state so here you have your value you have your your method for calling sex and
4:38 · then you can present that value itself every time you do something you have to call set state otherwise it won’t rebuild your widget tree and this is what you get out of the box now one really cool thing about flutter is the community flutter has been able to has
4:58 · been getting really popular and so many people have been putting packages into flutter there’s a really good chance that if you’re looking for something it is already done on footer and and it’s already released on dart and dart pub that’s what we call it and what’s cool about that is you don’t have to reinvent the wheel every time and you can every almost everything on dart pub is open source so you can just go right to the code so let’s just do an example real quick so I can go to dart pub
5:40 · there we go all right so let’s search for a calendar with it so we have a couple different options you can even go down and view the dependencies itself this will have what you need to set up on iOS and Android almost every one of
5:58 · these included an example as well you if you’re curious you can always tap on the repository you can go to the github and you can check the issues to see if it’ll work well this is also how you can manually override dependencies from github if you have if there’s an issue like a while back Android X was a really big deal so yeah so I would say before
6:23 · you try to make a custom widget I would try to look at dark pub first because there’s a good chance like I said that it’s already done so so yeah so we had a flutter create contest that just recently finished and one of the biggest things about that was you had to build an app with like less than I’ve kilobytes worth of code for reference that’s like less than 180 lines of code which is pretty difficult and you can’t
6:52 · can’t use the majority of your code can’t come from plugins the code has to be graded on different criteria so there was code quality beauty novelty overall execution and there was a grand prize overall there’s
7:11 · also a limited time line but what made that nice is that there were just simple rules so you could just like focus on building and not have to be worrying about like building a full app you’re just working worrying about this small little project so with 200 lines of code there’s definitely a lot of design constraints that you have it also has to be open source and to get into as much
7:37 · code as possible it really mattered about minifying it so that means that it didn’t look pretty but it was as condensed as possible so for mine I came up with the idea to do the piano because I was a musician growing up and that’s a huge part of my
7:56 · life and I wanted to bring in that to development I’m also the one that came up with the MIDI plugin for flutter so it allows you to with a very simple API be able to play MIDI on Android and iOS and also it’s something that you can
8:12 · generate a piano has a series of octaves and that they they only change minimal values so I figured I could build something out like that and just for a frame of reference I built this entire flutter piano app in less than eight hours and I released it within 24 hours of the contest opening so after that I
8:35 · got to work I got to work with the community and I decided to make the codelab I’ll have links to all this on my github afterwards but you can go through the entire my step tutorial that I had online as well as I made a I’ve been making some YouTube’s about YouTube videos about it as well also you can go down to the App Store on Android and iOS and you can see that so I also have this
9:05 · link too so you can actually download it right now on your phone and play with it if you want to I released it free for I think this month and it’s actually got over 16,000 downloads in just a couple of days so it’s a really cool way to
9:21 · give back to the community and and being able to see everybody use it so and I would also like to just point out that I’m also using code magic to deploy all my apps in the cloud and if you’re not familiar code magic is a tool that
9:40 · allows you that’s built for flutter that allows you to release your apps on iOS and Android right from your home screen so if you look in here you can see you can have your app you can deploy your builds and it like it has it made for flutter so you can go in and choose all of your specific flutter setting and you can build for ios and android as well as choose your actual actual Flender channel and there you go alright
10:19 · so now I’m going to just kind of show you around the flutter piano app and there we go alright so first of all this so let’s start with the pub spec taught you Hamill so in every flutter project
10:39 · you’re gonna have this it’s gonna have like your basic app settings this is where you manage your dependencies for what your app is also we can include information about who built the app where it’s located and what version with the later versions of flutter you can now include a version number that when
10:59 · you build your app it’ll actually build the iOS and the Android side so you can do auto incrementing if you want to it’s really helpful because before you had to manually go into each project and do that this is also where you specify your assets so for this example I have all my
11:15 · assets in a top-level folder I can include those here and then link to them here in the pub spec you you can use optionally new material design you don’t have to it’s on by default but you could actually run your own complete design theme if you wanted to in a lot of my apps I do on the iOS it looks like iOS and on Android it looks like material design and it usually includes this Cupertino icons package as well so
11:46 · here’s the flutter MIDI plugin I built and then I’m also relying on tonic which is a music plugin that just has all the basic stuff like scales and pitches and just the convergence so if you look this
12:03 · entire app is a hundred and forty three lines of code it came out to actually be fifty one thousand two hundred bytes or yeah five zero to four and here’s the app running so as you can see really fast and responsive it has the full keyboard and you can play as many notes as you want to you can also change the key width and
12:37 · you can also toggle the labels on and off perfect so as you can see let’s go through this building method so you’re gonna every app every flutter and dart application even the ones from the command line all have this main method this is where your app entry point is here we call our first widget which is my app this my app is a stateful widget and what it does is as soon as the
13:08 · widget starts I have to load the the asset bundle this is the the root the root asset bundle that flutter provides this is a good example if if you ever want to load something that’s not a image or text this is how you can load any file so this is just an arbitrary dot sf2 file all the sound fonts and I’m
13:29 · actually able to load any file type I want in the flutter so what I do is I take that I load that flight data and I pass it right down into flutter MIDI prepare so now that the the MIDI is up and running I have to define a couple variables so I’m gonna specify the key width because this is dynamic I want it to be based off of an 80 point width and it can change the percentage based on whatever the sliders are which is this width ratio as well as the boolean to
14:00 · show and hide the labels so here we start with our material app you can use either material app or cupertino app for your application in this example I went with material you can choose your your theme so I went with a dark theme and
14:19 · for the home I have a scaffold the scaffold is the thing that provides you with basic things like an ability to add an app bar and a floating action button or a bottom tab bar all these things you get out of scaffold for free and you can customize them any way you want you can even build your own
14:41 · if you wanted to you can extend it so here we have the the menu this is the thing right here that is going to have our variables so we have an instance called dwarves which does about the intake and this handle is what is nice about flutter is this handles all the the elevation so if you see it actually hides the background right here or it shows a scrim color and this is really
15:05 · handy for just out-of-the-box simple declarative UI I here I add a little bit padding here’s a slider so this is an example of calling set State on a change so slider itself is actually a stateless widget and it has to tell you every time that the value underneath it changes and then when I’m doing that I’m calling set state which recalls this build method and then that build method rebuilds a
15:35 · slider with a new value if you didn’t use that state you wouldn’t be able to move the slider back and forth here’s a divider just to make it a little bit more readable and here’s an example of a boolean now something you can do with the more recent versions of flutter is you can have this thing called adaptive so if you change that now when it reloads it’ll actually look like the iOS icon and if you take that away it’s going to look like the material so
16:08 · that’s a a new thing and flutter that makes it really easy to or to reduce the amount of code that you’re doing on iOS and Android not everything supports this but there’s more and more widgets that are coming out that do that this is also our app
16:27 · bar that includes our title our center and here’s where the real magic happens so we take in the ListView a ListView can have them multiple different modes there’s the you can just pass in a list of objects which is called a children or you can use this builder method which is because all you have to do is specify account and then it’ll call this item
16:49 · builder for every single item in that list you would use this if you either don’t know how many items are in the list or if you’re you’re going through just thousands and thousands of items you want to because this will handle like if you guys are familiar with recycle view or the table view controller on iOS this handle is reloading and only showing the widget center on the screen at any given point
17:13 · here I can specify a scroll controller so this is the thing that executing manage the ListView you can update this independently and I’m just saying initial scroll offset which will load it to middle C otherwise if you don’t have the scroll controller it will just start at the beginning so if I do this if I comment it out and hit restart and this
17:37 · is an example of hot restart and flutter which actually restarts from the very beginning you’ll see that it goes to the very on C one and if we take this back and restart again it’ll load right to
17:57 · middle C and if you want to just update the changes in your app you can use hot reload but anytime that your build method changes or your main method or anything that’s part of your state you need to use hot restart if we go down
18:13 · here this is specific just at OU and we’re also specifying your skull directions so by default list view scroll vertically but I’m using this list view to scroll horizontally and you just pass that with the simple access parameter I’m getting the index so in this case I want to find the octave and
18:36 · so I’m rebuilding this this section for every single octave in the piano so here’s just an example of one octave you’ll see that it has a stack a stack is a way for you to build two widgets on top of each other and position them accordingly so I have a row which takes
18:55 · up the entire width of the stack and the entire space and I have another position that takes up just you know 75% of that space giving out the top so here this bottom parameter it’s giving that padding so this Y area each one of these I’m
19:15 · actually passing in the middie value so this would be 24 plus whatever I is times 12 and then I’m saying if it’s accidental or not so the accidentals are up here the black keys at the top and also like we talked about earlier like the flexible widget on the video that we showed this will fill up the space as
19:39 · much as possible so in this case I’m using space between which will try to fit make all the keys the correct width on the outsides I’m dividing the widths by two and then I’m adding a key in the middle so that gives you like there’s an empty key right here as well as there’s half key right here and here what you don’t see so once we have that method we
20:06 · can really with flutter it makes it really easy to reuse code so I’m not actually creating eight different keys I’m just calling this one build key stop once and I’m doing the changes that I need to so here I’m using that package called tonic and I’m getting the pitch from the MIDI number I’m able to get the name of the key here we specify another stack semantics this is for if you have
20:33 · screen readers or if you have some customers that have a hard time reading this is a really easy way for them to be able to know what you’re trying to do so in this instance I’m passing the pitch name because the MIDI note is not going to make any sense for if they’re reading through the the app and not able to see
20:53 · so I can also specify it’s a button so that they know that they can click on it here we have our material widget which can add a border radius border radius as well as like an elevation so in this instance I’m checking to see if it’s an accidental I am making the color black or white accordingly here’s an inkwell this is the thing that manages the actual tapping itself so if you see that how it goes gray this is actually called an ink splash which is from an inkwell same for this bottom key
21:24 · when you tap on it it will it this does it for you out of the box you can change the color at any time with the ink splash property ink color and here what I’m doing is I’m playing the note as soon as tap down is fired and here we
21:43 · have another position widget that actually is just up from the bottom by 20 pixels and that’s going to if show lub show labels is true it will show the text of the label itself now once I have this entire piano key I I’m reducing that so I can check to see if it’s an accidental I want to give it an elevation of 6 because if you see there is a light shadow on the key itself but
22:12 · there’s not a shadow it’s here at the bottom and that’s because of this elevation property we can change this to whatever we want so if I did 24 you should see that it gets a lot darker but and if you get closer so let’s do 5 the shadows could should get more condensed just like that so the elevation is really useful a lot of properties take that so like even the app bar for example right here if I type
22:45 · elevation and I give it like 24 we’re going to throw up a shadow right there perfect and if we go down once we have this
23:01 · we’re returning the container we’re going to if there if it is an accidental we add the elevation otherwise we just returned the piano key and finally at the very bottom we can specify our border radius that’s so everything in the app matches I’m only doing a border radius on the bottom so here you can specify bottom left and bottom right so another thing
23:24 · that I did to get around this this code limit is I had to because my app works only in landscape I could not I didn’t have enough code to be able to do that manually on or inside this building so
23:43 · what you have to do if if you ever in that scenario and you don’t want to do it from code the nice part about flutter is you can still manage that from you can still manage all your settings because you get a native ios and android app so in this example let’s open up Xcode alright and in this scenario you
24:15 · can I specify that it’s landscape and landscape right so you’re getting a full iOS application as well as Android application you can you can add watch apps and you can do whatever you would normally do with a regular app so definitely don’t feel limited by what you can do and then just finally here’s
24:49 · some places where you can find me I am on twitter as roadie davis as well as github by apple educate you can also go to my website at rody davis calm and you can find me on instagram this is the e let me show you the URL real quick
25:09 · and I’ll have links for this and I’ll provide links for you guys but if you go to Apple educate flutter piano this will have all the necessary stuff that you need to get started specifically if you want to see what we went over today if you go to the 5k branch this is what I actually entered to the flutter contest itself now guys are also curious this
25:33 · master branch which I’ve actually been adding a ton of stuff so you can see a more complex application for me not limited by the size constraint but it’s still really small so thank you so much guys I hope that this conference goes really good sound yes it can make sound but
26:22 · there’s a limitation of the iOS simulator so I can’t produce it but if if you play it on a real device like an iPhone or Android it’ll actually it’ll play you just won five are you 200
26:42 · minimum about 80 fence sounds okay so are you asking how I can play the sounds from flutter okay so in this example I’m passing a a sound font and what does sound fun and sound font is is it’s basically like a MIDI engine so in flutter
27:14 · and also if you guys are curious these are all the plugins that I’ve made for footer so definitely go and check some of those out if you want to see Warren death different things that I’ve done so if we go to the flutter MIDI you’ll have a this is what I’m actually calling so if you see I call flutter flutter MIDI dot prepare and that is right here I’m
27:41 · passing the sound font and setting up the channel see it calls channel invoke method and what prepare MIDI does is it sets up the iOS and Android MIDI here we can I put do the play MIDI note and it calls invoke channel playing MIDI note so what that does is for every platform that you have a platform channel it will call the iOS and Android code so it’ll call Swift and it’ll also call Java on Android so here you have that same exact
28:14 · channel here’s it in Swift you have your Swift MIDI plug-in here’s the method call for what I’m calling here is the prepare MIDI that we just talked about and then when I do play MIDI note here
28:30 · it’s actually taking my audio synthesizer and actually playing it so um yeah with flutter you can use native code just like you would in dart code so you really can you can as much as you want alright thank you you’re welcome ok yes yeah this entire app runs offline
29:14 · okay that’s right okay I’m ready it has it’s a possible so I am coming
29:32 · MVP MVP ham of that person in the right team both applications yes you want sorry say your question more time here with you you need speed enough occasion it was not akiza so what happened was bit so let me show you an example of a application that I’m working on okay so
30:11 · there’s a lot of different methodologies you can use in flutter I’m becoming a huge fan of very close to MVP but what it allows you to do is you take pretty much have a model for every version of your screen so here let me show you the
30:29 · basic folder structure real quick so inside your lib I usually have three folders I call data UI and utilities here’s my main method and my constants that don’t change inside my utilities I can include all my shared functions that are going to be global across my app
30:50 · inside the data folder I usually contain like some top-level models and then I have my global models inside each one of these models contains just pure business logic so that means that there’s no UI all it is is just taking and modifying code so you take that model and you pass it down let’s go to sorry right here so you can have your
31:21 · models take you take your model and then you pass it down your widget tree so now if in any screen so right here in any screen I can look up that model and I pass it down so it’s a very much of a a Model View and then controller setup
31:45 · anytime that the view wants to update something it sends it to the model and then the model updates the screen the screen doesn’t contain any business logic so it’s literally just a front-end for your model so I was good as the one
32:10 · used this money plates Illidan sue Taniya how you do stuff provide us with those that states what’s no use makes you choose certain types of money okay so one of the reasons why let me give you an example of why you would want to use not use set state so in this example of the flutter piano I have my drawer
32:42 · and anytime I want to change is item in that drawer I have to call set state in my variables here but in this app I have I have a separate class called app drawer now this thing has things that change itself but if I were to call you set state I would have to have a non change property of the drawer and keep passing up all the changes so every time that you have a nested widget you’re
33:11 · going to have to keep providing that value straight up so in this instance I would have to call on value changed and then I don’t have to go back up the widget tree and then send back but in this method when you’re able to use provider this handles looking up
33:30 · regardless of where you put this widget it’ll handle all the rebuilding for you another big reason why you want to do that is this allows you to refactor your app really easily so I can take this and move it anywhere in my application I could rename this if I wanted to and I can also break it up
33:51 · into smaller widgets if you’re using set state by default you have to do a lot of a lot of extra boilerplate just to get up and running with passing the data through and then plus the widget tree itself you can have one section over
34:08 · here on your app that has like let’s say your login screen and then you have a home widget that handles like your authentication like it like your account info but let’s say you’re away over here and you have a list view well if this data changes and it updates your account you have to go all the way back up to the top of your app to rebuild just this one part so with a lot of other statement
34:32 · providers it allows you to in any part of your application and be able to rebuild your widget tree from the ground up and not only that it’ll actually only build that one little widget that needs to be rebuilt it doesn’t have to rebuild your entire app every time inputs as
35:00 · let’s see that’s constants for example and we have about 20 lines of code with different custom variables and they only need again and then I get into my activity right into my cloud app page and I only need one constant for that box philosopher and that means that Universal is to import the entire data doing that only need one value I chopped
35:32 · up a flying fox so am I was thinking average impulse several in snuffed out my into my page doesn’t happen anything to with performance does have any oh yes oh yeah so what what I usually do
35:53 · is I in every directory of my foot or application I include an index start the index up dart takes care of the exports so if you do in dart if you do export you can actually have multiple dart files associated with that index and it’s actually not it’s very performant
36:11 · because flutter uses something called tree shaking so that in debug you’re able to have access to everything but when you actually build your app for a release mode it’ll go through and delete all those unnecessary imports so that your app is as minimal as possible so you don’t as a developer don’t have to worry about importing something that you’re not using as well as so many imports so when you actually compile it for release it that’ll be taken care for you are you asking what languages you
37:12 · need to learn footer yeah I would say for footer are you asking what things you want to learn about dart like what things you need to yeah do I need one oh
37:44 · I see okay I actually came into flutter with zero years of experience I I was an iOS developer and Android developer before I got into flutter so I knew Java and as well as but I actually went even from the very
38:03 · first beta when there wasn’t a lot of documentation or there was documentation there wasn’t a lot of like community articles and stuff about it you can actually pick up Dart really easy and I had no dart experience but I was still able to build our our app at our company in two and a half months just from learning Dart you know as I needed it it’s a very nice language and it’s built for the developer it tries to make it as
38:30 · easy as possible to do things it’s also really similar to C sharp so I was pretty used to that as well as Java it’s very close to Java but yeah I would say yeah you can definitely learn Dart you need to I would say its easiest to find an app that you can use to kind of learn it but yeah the documentation and
38:51 · videos and there’s a lot of code labs that are really good about kind of walking through for me the biggest thing that actually helped me was if you go to the flutter gallery app that they provide it shows you a demo of how to use all the widgets that they give you out of the box so that was really helpful for me to be able to see exactly how to use a widget when to use a widget and how to make it look good okay thank you so much you’re so welcome thinking yes welcome thank you yeah all right
39:33 · okay so