The Boring Flutter Development Show [Pilot Episode]

[Music] hey everybody I'm Andrew from the flutter developer relations team with me is Phillip and today we're gonna do some live coding and Phillip yeah we'd like to just like life code a whole app maybe in parts we're basically going to probably you know do a lot of bugs be stumped on things and I think that that should be part of the experience that of the video so that you can see how we hopefully get out of these you know videos yeah much like the people out there we are very busy and under

prepared exactly yeah yeah alright so Android studio we got that open yeah well do you want to talk about like what at what the app should look like and how it should be architecture yeah that's a good idea we got a white board if you're not familiar with hacker news it's it's basically it's a news app people submit links and these things are presented as a as a list and that list is stack ranked according to some algorithm and so what we're doing today is very simple we have a list of these art

icles somewhere and we just want to make a pretty nice looking thing an app for you know in footer that has the listings the list thing can be expanded if you click on it and it will show you the link which will open a browser window or and it will show you some stats maybe about the things so pretty easy hopefully no big surprises and a bunch of people make apps like this right it's kind of like it's certain similar to do MVC exactly this is the new to do MVC basically we're here so yeah so let

's get coding or I'm sure I'm gonna start a new photo project and it's going to be an application and it's going to be called pitch I would say so flower is going and getting the initial packages okay so this is Android studio you have the flutter plug-in installed already right all right yes and that's just from the regular old Android studio preferences yes you go in and look for flutter in there it is correct okay so what we're going to work with is probably iOS simulator just because I know

and so what we have when we create a new app in Android studio a new flutter app we get this application that most of you probably seen hundreds of times so let's let's run it this will do all the magic that Xcode - normally when launching an application but then we'll be able to you know hot reload and everything so you're loading you just you're building an iOS app in Android studio that's right okay just checking you should be used to this by the way but okay um there goes so this is the old

and you know good old counter app so what I'll do first is that I'll just get rid of everything that we don't need right we don't need this we don't need this we don't need that counter we this this this as you can see it's very well documented we're done yeah not bad for him yeah out of the box abstain hello and we don't need to float in action button so no I hope you're not posting anything right so let's do reload what do we get okay hello so what just happened when you did that we should pro

bably talk about that we should yeah cuz you didn't you didn't like fully recode that app or I would took like like a second to do what you just did right that's right yes I did a full restart it's not a hot reload because I knew that I'd like deleted things state things but otherwise yeah you were basically when it's launched in your simulator you get to do a bunch of stuff with your app and the dart VM that's running in the simulator now we'll just get the new things and we'll update the app a

nd on the fly so that's really nice because both you I think we'll see that as we go along alright so we cheated a little bit because we prepared a list of articles as if we already say took it from the JSON API that hacker news provides just so like we will probably use some of the future videos to maybe show like how you would do this but let's assume that we already did the work and we have the list of articles and it's loaded so I have it over here so we'll create okay so we have like a data

class a data object and we got some mocked out data that we can use and say yes to get the UI going perfect so dart file will call this articles article and so as you can see this is a very simple class that just has some method methods fields and it has a cost constructor because we're not less this is an immutable object and then we have what I just like basically you know copy paste it with some regex magic from actual hacker news so this is very current at this point of time everybody's gon

na know when we film this they I reckon we'll search for these socially someone's and we have that so we can import it and try to show it so okay import yes let's let's try this the easiest way is just we have a list of article and it's this is ugly but that's okay that's a mom so yeah the other file is exporting that articles list okay as articles which is like I just a global yeah a variable hanging out in the globalization okay we could well well let's let's wait until together we can make th

ings more real and a little bit harder on ourselves but let's start with this I think it's a good good way to so this is a column with children we could intentionally break the app I think now if we just did this not yeah so I'm just gonna instead of doing a column of widgets I'm going to do articles and map and each article will become its own widget so article becomes new what text when a yeah just do a text with the article titles on my ankle they call it text right mm-hmm oh and it's the lis

t there we go hey so if we start now okay so it actually works I hope that right it should be so maybe we had more opticals I don't know you definitely can't scroll with this what yeah do you want to take a second let's talk about the structure of what we got here yeah okay so we have we have a build method right what class are we in right now so it's this is the okay so this is the app okay so this is main we start with main we just call this flutter function that just called like just runs you

r main widget as an app so can your app like everything infrared switch if your app is a widget so you have to say this is the main widget right so run app my app doesn't really have much except for building and then we have homepage we wouldn't like in theory we don't even have to have to which is here maybe we just have the homepage but in later episodes we'll have more than just the homepage we'll have detailed pages and stuff like this so it's it's a good way to start and and then we have th

e state of the home page and that has a built method and that build method can yes state like according to the current state and draw the widget ok so let me see if I follow this we have a main method they calls run app on this app class that you made and there is something called a material app in there right what is that doing yes that's again another widget we can actually this is nice because that everything is in Dart so you can go like very much so we have we have source for this yes cool

sir ok so this we so as you can see metal app is a widget that brings a lot of things together it's basically like you know convenience widget because if you went through this and and and looked at the built method well you would see that it's just basically a lot of widgets inside each other one thing about being a framework full of widgets is what I think some people call extreme composition over inheritance so so it's like if you want to add behavior to anything you just wrap it in a widget y

ou don't like add it like you don't inherit anything from anything else so you get the all these like pretty deep Lin estate trees of widgets they together they create an app so yeah so this is my gel lab the metro app has some cool things like it's very easy to do home it's easy to add things like initial route Wow yeah that's a lot of stuff yes but we're not going to use and then you go with a home page and hope it is it doesn't you know it's not a material thing it's just it's just a page and

in that page there's a scaffold which is a material thing scaffold is basically what you see here and against schedule has a lot of nice things like you can have at bar which in our case is just text so that's where the title comes from at the top that's right okay then we have the body obviously but you can also have floating action buttons you can have food or buttons drawers left and right and or I should say from no start and extraordinary on which language yes okay and and many other thing

s so so yeah so these are all widgets and what we're working on now is is basically just this so we have this body and in this body we have a center which we don't need actually let's let's get rid of it and there its yeah still looks the same okay yeah no because we are centering a column that goes all the way from left to right so it doesn't do anything really we would have to do this like we would have to Center the this visit for this to be maybe nope see I don't this response oh maybe this

one this is why oh yeah okay so the good news is that because this thing reloads so quickly we can just mess around and figure out what works and just keep saving our changes and causing it to reload and see what happens yes okay so I think what we want to do now is to start working on these items right so right now we're just creating a text widget for them which is not very exciting so basically all this episode will just spend on this few lines on this one line yeah right now let me create a

like built item create a method and so bill tied them will create a widget wow it just so it knew the signature for the method based on what you were using this map there that is pretty slick yes I like that so we can we can just do this how we don't need this now and and now Roger which oh is this because I should be green right yeah okay so this is cool this is cool I actually wanted to do this because see we're in like an error State and I recovered from this and I'll just you know run safe a

nd it'll hot reload and if we were in any kind of state as in like we had something in our cart or we were in a like sub you know screen somewhere it will it would just recover there which i think is pretty cool because you you you can screw up it will throw all these errors at you mm-hmm but it will still keep the state and if if you hopeful hope you get back to it so like for example if e-text starts with let's see data return no okay so you just intentionally yeah I'm trying to intentionally

break just one of these and it doesn't let me yeah it knows that I cannot do now here how do I break it so that it's would you need separate build methods like up here since you're doing one bill it can only break once then it breaks the whole way or so you sang that under some circumstances you'll have like one widget broken and the rest of the I'll look at yeah yeah that's definitely something that happens but I don't know how to do it and what shooters will have plenty of chances I assume jus

t screw this up in all sorts of wonderful ways alright so back to Victor business I'm just the article so how do we make this barrier this is nice maybe not so nice the data is technically on the screen yeah I kind of hoped at the start I hope that just having column here is a bad idea and it is a bad idea because you can't scroll you can kind of do anything actually maybe maybe I can make it break a little bit I'm sorry I'm just about ready so let's do style and font size gonna be something bac

k right ah thank you so yeah what is that alright so we made the text so baked that we are actually getting over the allocated space of body mm-hmm and that's because we have a column and column doesn't support like being scrollable or anything like that so flora helpfully this is teapot belt so hopefully Farah says a you're trying to render something that's smaller on a big on a surface that is smaller so I'm going to give you these things that basically tell you hey you're over reaching in thi

s direction you probably want something else than column and then did something pop up and uh yeah oh yeah yeah sorry for the small text but basically this is you know explaining what happened and it's a long error message yeah nice HL off so let's fix this by maybe using you know a widget that just does scroll okay something with it for everything including is growing yes okay how about we use a widget that is a ListView okay because we have a place and we have a we want to view it and there we

go we have a ListView almost quirk what are the things to be yeah as you can see like you can do all sound you know this can be the axis can be horizontal so we can actually you know scroll to the left or right and the physics can be custom and stuff like this but let's not do this well it's actually again work with the items themselves so what do you add you what do you not like about this list well I have no idea where one thing starts and that's their hands that would be one thing so we migh

t want to do padding maybe yeah or yeah just a little I mean that would certainly set them apart right oh look heading oh that's cool how'd you get that to come up oh alt enter okay so we have some pet ink you could do more let me so padding is a widget - that's right interesting this is better I don't know yeah yeah another like distinct uh-huh Thanks we also probably want to show more than just actual you know name right so for that we have another widget and that is called list tiles I think

that's the name and it has title right so this wasn't a big of a difference but the thing is that this style has other cool things like this like subtitle which would be maybe the number of comments that's when you start with I'm sure yeah so article comments count comments oh and this is subtitle wants a text the cool thing is that that so at first it's infuriating you're like I just want to add text to the subtitle right but then you realize wait so if subtitle wants widget which it does want

to which it then I can actually add anything to the subtitle so your subtitle can be a meme or your subtitle can be a small app with small scaffold and you know you could just give it a widget whatever yes yes so let's start with something like that and okay that works that's it yeah that's pretty cool what about if I tap on one of these like say I want I actually pull one of these up right like it's cool to look at the titles that's right and stuff like that but what if I wanted to actually exi

t how would we do that so we have tap here on tap on tap is just that's just a property of the list ah yes it's so anything can be clickable if you again wrap it in a widget that is I don't know how it's called but I know the material way is to use what they call inkwell so inkwell is another widget and inkwell is cool because it not only gives you on tap but it also automatically creates the cool material all those parts you can add a splash of things okay I'm sure that's the technical term for

it oh yes pleasure squash you so we're we're not going to do well I mean like list style kind of takes care of all that so even if I don't do anything here now we can tap things when it'll do the right thing but we can actually do things so we want to launch a URL right now and so this is because we're building an app that will work on both iOS and Android mm-hmm we we want to use something that will work on both and for that reason at least I know about a library or within flower world we call

plugins that will like kind of you know work for you in that respect so so basically we are we're going to import a plug-in from our package repository which we'll show you and then we'll come back to this and just use that plug-in to open things and whatever browser you have installed on whatever platform that you are running this on right so that package is called URL launcher so what did you just open yeah that's a new file right yes pop speaker do you want to talk about this no I'm happy to

be the person asking questions yeah no okay so this is Bob speck yeah Moe this is the file where you basically configure a lot of things your app this is the same file that dart uses flower uses it so there are things there are in every puff spec and the probably the most important is the dependencies which is basically you just say if you know what you're doing mm-hmm let's say we don't know what we're doing and let's reasonable assumption yes so if you don't know what you're doing you go to f

lower packages and you one here and you like okay I want to watch URLs and first of all you put a lot of other people's and it turns out but let's let's just open it so this is basically all you need to know about that particular package as you know changelog example it has installing and basically what installing of every package on pop tells you is just go to depend go to a pub spec yeah more file go to the Bentham tees name this one so that's what are you gonna do so just put this this would

be like updating your Gradle file in an android app or dropping out yeah cocoa pod something like that yeah okay you can just do if I could just get that's gonna install it hopefully mmm you lied to us flutter packages you know what so it's it might be that 3.0 defense on the latest version of flutter which I don't have installed because I'm gonna be dad because I don't want everything to you know come up in flames so you're on a stable beta version yes not the bleeding edge okay that makes sens

e um so we now have you all from a launcher let's look at the example here you'll want your okay so it has two methods basically I have two not methods but functions one can his can launch which basically checks like if you're ready for this if on the platform that you're using you can launch this you're kind of URL remember URL can be more things than just HTTP or HTTPS so let's let's do that so we go back to main and we are we're gonna probably import it right hmm okay and we do we do oh wait

we don't have the URL in this mark we have mark data and we only have the domain so we'll have to go around this but anyway you want to just add a dummy URL to each one real quick yeah we can do war main so we did we can do HTTP and the domain right let's that's just yeah sure and this is the article domain right not very helpful so now can launch if you go to you know info I about this wait no no don't can launch anyway so can launch will give you back a future of all right and if cannot like i

f it's a synchronous statement right you can't deal with a future in there so the reason why I can watch it gives you a future is because it it could take some time before it knows that you can or cannot launch this URL so we need to do this a synchronously let's see if this works okay async await is something that dart can do and you can basically like whenever you have a future and you want to wait for it you do a wait right so now we're like if like this is basically translates to first to ca

n launch then wait for the bool that comes from there and after that happens do this logic right so and I can do all that in my on tap method that's right I hope so so we are awaiting if we can launch and if we can launch and we launched and okay let's do it let's extract this too fake URL and this this is also something that that brings back future hmm this time this is because we might want to you know just wait until it opens or whatever my family Oh music player app or something like that yo

u might want to know that you just left yes something like that maybe but we have that now and so we can see if that works oh so I guess when you did the update to the pub spec file you had to bring down the whole app that's right okay there's suspense alright so now it looks just like before looks just right before we can still scroll mhm and then we can click and it launches and it lines it goes okay and this should work in enjoy it as well should we try yeah yeah we haven't pulled up an andro

id emulator yeah right now it looks like it once oh that's gonna take a while yeah starting from scratch scan together that's uh let's don't wait it sounds a very quick boot how do i you I have it on so that it's like always on top and now I can move it for some reason so I cannot okay as do this we're very high tech here so this will go and initialize the cradle things so you know before we did Xcode knows we're running on the iOS simulator and now we're trying this in Android but the hot reloa

d stuff all that works the same once it's up and running yeah okay and we can have - we have an emulator now and a simulator going at the same time mm-hmm okay oh poor Mac look I don't know if you're picking up the fan sound but the yeah yeah machine is doing its best it's also recording this week yeah that's true there we go oh cool so um we should have all the cool things like scrolling and maybe we should call out how this is different like on iOS it does do that pulls down on and on Android

you get the shadow yeah and that's out of the box she didn't do that yeah okay and it opens the browser all right and so here you get the default browser which is chrome on the emulator and you get Safari on the iOS correct all right cool so I think we can kill this one Thank You Android emulator thank you please take no offences we force quit you all right maybe it's time for us to yeah we're still here show you some of the cool things about the flower inspector so with further plugin into Inte

lliJ you get four inspector which is something that lets you do a it gives you the ability to change platform so here we're running on iOS right but because father is drawing everything like it owns all the pixels basically it can like pretend that it's on Android now so what we can do is just do this unless this doesn't look like much but now you see that if there's the Android shadow yes if we go back you can see that you know an Android you should have your title on the left on iOS by default

you type it on the in the center of the app and so and so forth so so that's nice there's also things like performance measurement right so you will see like do you skip frames there are other things timeline me let's let's not go up into this but also we have these helpful things that will tell you like oh there's padding here this one is scrolling and so on and so on and then you can go and and do you can select please let me select things no normally you'd be able to select things and of cou

rse you can look at all that crazy so those are all the widgets yes you get whoa and then you can go to render taste to see like in the innards of flutter how this is all rendered but again like I think we'll go into this in another episode maybe sometime in the future clearly a lot there yeah all right so I'm not happy because like I don't know if you know this but but whenever I clicked anywhere it just launched so what I what I think we need to do now is whenever you click on one of these thi

ngs one of these item we want to expand that item and then show you a way to open the comments our white border down here yeah oh yeah so thank you good one so you click on this one and oh it doesn't thank you I'm very helpful go forth so it's not more like that but if you click it it's good it gets longer and it has some text and maybe there's a button or two for you to click and then if you click it again it will like unexpanded again yeah we're I think there's a widget that lets you do exactl

y that also we didn't talk about like list builder and things like that I wonder because you're just dumping a bunch of children in this list right that's right yeah so so in in a real world and again maybe that's just another episode but you know you you'd want to have infinite scrolling list right which will just load new things as you go along this is obviously possible it's basically you use the same thing here but it's called list view builder and and then you will provide some other things

things but but like now just to keep it simple we just have list view that has a finite amount of children a list of children right so but what I want you to do is the expandable file right you think let's see expandable expansion tile hmm and so it gives us different things so we are going to do children it's just to you know what you want to just throw some text widgets in there and just see what pops up where yeah and we might want to meet this later it's this yeah okay oh it gives us a litt

le bit like this so you got a little icon oh okay okay so title is the part that's on the top and I children is the expansion part right okay and we can obviously make this can you expand more than one at a time yeah can okay so is it changing the text color with you yes it is it is so I wonder do any of this do we want this I think it's pretty cool so let's like yeah let's stay with this now so this doesn't look good so now to uh let's do a row right we need a row we need a thing that tells us

the number of commands and then maybe gives us a button that will launch the launch the browser so I wonder if that is already doing the row because we're giving it children of child so let me just try right you just give it to text see where they mo oh it says uh oh okay that makes sense because there's a column right it's a column so the it doesn't nothing prevents us again everything is a widget so nothing prevents us to do wrap with row right I can remember that all entered thing that you're

doing that's pretty slick yeah yeah that's pretty good and then so we can have a new button can we have a bit button five letters I think there are kinds of button oh my child button oh wow now I do a lot of buttons drop down button select button icon choices choices mother-lovin okay let's not do anything yet so how do we put text in the button ciao so so most visits do have a child or children so yet again you're just gonna jam a text widget and yes okay open huh all right and that's uh can w

e give the color oh sure like background color yeah okay this is like a theme object up at the top right that's right so we can give it what color do we want oh right sure oh [Music] yeah every article gets a big angry button I don't know how about green green is a good colors they're green there we go yeah all right okay so clean up not designers so next episode all right so this works and also I don't love that it's kind of squeezed here yeah we don't have as much padding yeah well we can add

padding but we can also I think we can main axis alignment let's see what's yes base around maybe hmm well is it better so what is space between so does main access alignment that seems important here yeah so so that's basically that gives you in this case the row gets the full width from this part to this part so it expands to fill whatever contains it right so by by default you have main axis alignment start which just in that space you just start on the left and or on the top or whatever this

is why it's like because main axis alignment for a row nay's for a column it's vertical so whichever way you're expanding as you add items that's your main access yes okay and then you have cross axis which is let's cross yes okay so this is useful because like I could change this into a column and it would still I mean it would be look different right but but it would still take the same thing right and it would still like Cannell was another jammed up at the top except and up at the left okay

I don't know so and I think would be one is either space between or space around space my head up space I think this looks good just look what about just having an icon is so the word open can we do that sure she has there an icon for get out of here or something I could imagine yeah which takes probably has an icon property that's not getting said yeah so icon is let's say launch there you go mmm-hmm how I knew i sorry I always forget icons launch again icon can be anything and so we don't nee

d this this looks yeah cool this looks pretty good I don't think we need green he were not design so so anyway so we have that I think that's pretty cool oh it doesn't do anything oh that's right we got yeah you like on pressed oh yeah that's crazy right okay so that works i oh the last thing that we wanted to do today I think was to enable you to reload so B obviously if you read Accra News you are reloading like five minutes per minute so we want to make it easy and the usual way to do this on

a mobile device is to how do you swipe down the poverty Russia and now we'll need your help because I don't remember playing us all okay we can we can just fortunately we have this research machine over here that's right and it is connected to the internet this one is as well so let me try I found it here so if flutter has this flutter gallery app which tries to do a lot of the things and you know shows you how to do them so this is available in iOS I think and Android as well as a downloadable

app that just there but it's also the whole app is open source and so you can look at how they do things and how they do thing is they use for example for the over scroll is is here well it appears to be a class yeah so a widget that supports the material swiped to refresh idiom mmm sounds like what we need so we probably want to put it here around the ListView exams so rep refresh indicator in there and it needs wet so child what is it it's screaming about on refresh is required okay so we do

this thing handles all the graphics all that scrolling it you just tell it what to do when somebody pulls it to refresh right that's pretty slick so let's reassign the list to our mock day you know what so so let can you do like a toast like ah yes something like that okay there's no snack bars now that's right toasters snack bar is the new hotness comb Thanks are you gonna give it a text widget cuz that's just what we do with everything everything gets a text widget refreshed okay hmm maybe we

need to somehow tell it to not do this also it's a sink I mean so a function that's called when the user has dragged the Refresh indicator far enough to demonstrate that they want the app to refresh the returned future must complete when the Refresh operation is finished returned future you say ok so return what does it need to finish step I'm just gonna look up an example Oh No ok name of thing word example let's see what comes up oh we got uh so I think it wants you to return a future and sinc

e we're using mock data we can't just steal one from the return value of some HTTP call right yeah you just you want like all the you know google.com real quick and tell a if you if you want a like so in like we could just do return new future do you light and have a duration of like maybe maybe a second and what its gonna do is basically exactly what you want to in there what okay so you made just a dummy future that completes after a second yes okay and it it needs it doesn't want any value th

ere so it's a future of null that you know this one yeah just need to know when you're done yeah so what we can do is we can I sing and and then we can do like await that future first just to be like look like we're doing something and then we can remove you just pull the first one that way you could see it yes you at the top hey it's not like an remove at yeah I'm a fan and since state this is the first time that we use it today right so we're no longer returning a future though is that okay be

cause we're an async we are actually by default but well yeah we're when you're an async and you know wait at any time mmm actually by default it you'll just return a future whatever so in this case we don't even need this here I think so because you know you have a return at that so let's do this oh yeah all right nice madly delete things all the way down yeah this will break when we get but let's not do that maybe yeah all right so uh I mean so let's let's cover what we just did so we made a b

rand new app in Android studio you ripped out most of the code that stars in the default app we added a data class for the articles we had just some mock data in a list then you dumped it into a ListView that was displaying the titles at first and then we added the comments as a subheading and then we ditched that after or no then we then we made it so if you tap on the titles you would leave then we switched to expansion tile which gave us that nice little pop when you click on one uh-huh and a

t the button and move the comment text and added the pull-to-refresh I think the only thing we haven't covered is the set state call you just added right so what is that doing yeah so that just makes sure that flutter knows that something changed if we don't have that mmm then it's not gonna break anything but it's gonna be weird because what I will not know that the list of the articles has changed since then so it will just not refresh right so you can change the state but you yeah what I woul

dn't know you did it because it's just sitting in memory who is watching it right so you like nothing changes even though that first article is not no longer there it's still getting displayed yeah but the cool thing is again stateful hot reload so we put this back and now when I do this it will will we will see how it removes all these like all three things because I just did the thing but it just didn't show right right so it just went through Tamara yeah Wow anyway so don't forget your sad st

ate and as you can see like you can go pretty far without even using one but once you have stayed that you're changing you might want to have that state there we can cover a game like how to how to deal with more you know harder thinks sure we have more sophisticated use cases for this yes my next episode that's right so yeah I think I mean so we have sets third we have talked about all this I think we're down cool yeah so thank you for watching again yeah alright so next time what do you what d

o you think we're gonna do we got also we got it we got a pull live data at some point right yeah what else can we do we can tighten up the UI I wonder if we could drag a designer into this and have someone to help us with that yeah yeah well yeah I think the next episode should yeah should start with actual data um from Jason but then then we should like really have a hard look at this one the you know the the UI and make sure that we actually want this expansion thing because maybe second up a

lot of space yeah I imagine that there wouldn't be this thing so I think we can just something else and also what gets displayed here I we have more data that we can show here and then I don't think we could what if we have enough time in show you know another screen and that means navigation yeah yeah oh yeah show the comments exactly otherwise I think like for Hyper news it's okay to just open this in a browser right like I I don't think we need to like parse the article or anything like that

no sound traffic back to good old YC yeah all right well cool huh thanks for watching everybody yeah we'll be back with future episodes thank you [Music]