[MUSIC PLAYING] ANDREW FITZ GIBBON: Welcome everyone to our first Ask Flutter segment of the day We’ve got the chat open for live questions, and some of the folks from the team are there to help you out While you’re in there, please keep in mind our community guidelines Everyone is coming into this day with a different background and a different experience So something you see as new and expected might be new and exciting for someone else Take that opportunity to build up the excitement and support each other With that, let’s get to some Ask Flutter questions Our first guest of the day is John Ryan, an engineer from the Flutter team John, welcome JOHN RYAN: Hey, Fitz It’s good to be here ANDREW FITZ GIBBON: Great Excellent So we saw some really cool things there from Alex and Mariano with CodePen And that almost feels related to our first question here And we have a question from Tamashi from Twitter who is asking if there’s any online platform which will ensure the development of apps using Flutter without installing anything IDEs eat up RAM and slow things down So do we have any options for online development of Flutter? JOHN RYAN: Yeah that was actually the impetus for adding Flutter support to DartPad We’ve all ran code labs or helped people get set up with Flutter, and we know it’d be just that much easier if we didn’t have to go through those steps like that, installing the SDK and things So that’s what DartPad is It supports the material package and the cupertino package And CodePen also uses the same infrastructure, as we saw So there’s also little experiments that we are looking at on using VS code online, potentially, but there’s nothing really to say on that yet So there’s a lot of issues with having a full Flutter setup on the web There’s debugging There’s getting it building on iOS and Android, potentially, or submitting to the App Store There’s a lot that you need a physical machine to do But yeah, that would be awesome if we could make that even better ANDREW FITZ GIBBON: Yeah, absolutely And I definitely hear that there’s, at some point, a need for an IDE in some ways once you get into the bigger apps and the full fledged development But getting started things, like DartPad, and CodePen, and maybe online Visual Studio if we can get there Like, those are great ways to get started for sure And so you personally, are there interesting things that you’ve seen come out of DartPad or CodePen that you find really inspiring from a beautiful UI perspective or, like, wow, I had no idea we could do that on DartPad, even though we built the thing? JOHN RYAN: Certainly the things Mariano just showed really showcases what you can do with just using the material package and a few other things Image blurring is great I work a little bit with the web team, and so the infrastructure that runs CodePen is all built using Flutter for Web And so any improvement to that goes directly into CodePen and DartPad So there’s tons of wonderful things that the team is doing just to make everything that the Flutter SDK supports run on the web, and it’s amazing Yeah ANDREW FITZ GIBBON: Yeah, it really is It’s really kind of amazing to see what people can build and what’s out there And so I think our next question, multiple people asked it across the internet And I feel like it’s going to come up again, but I want to talk about it first What do we recommend for state management these days? What are your thoughts on it, and have they evolved over time? JOHN RYAN: Yeah This is a question we might also see Phillip give his perspective on But by my perspective on this is that we have a state management best practices article on the Flutter website, and we do recommend provider to provide and access objects or other data throughout your Flutter app So the way I think about it is there’s kind of two aspects There is the dependency, getting and providing that provider does, and there’s also what type of objects am I using I prefer to use just plain old dart objects Just classes with data in them But a lot of people prefer immutable data structures and things like that to make sure that they’re not editing memory that some other widget would be using unexpectedly ANDREW FITZ GIBBON: Yeah And I think something for me that goes along with that is use what works for you And so at different stages of your app development, or even for different apps, there’s going to be different ways that are going to work for state management Some ways are going to be extraordinarily simple Just have a stateful widget and keep your state
as local as possible And then you can build up from there as you need it But once you do get to a certain level of complexity, some of these other solutions are excellent, like Provider So yeah, we will definitely get Philip’s take on it later I think it’ll be really interesting to see what everyone’s take on it is throughout the day I know it’s always evolving It’s always changing And so speaking of changes, I do want to bring this back And we’ve talked about state and we’ve talked about online things Bringing us back to the UI and building really cool UIs, things change We have different platforms We can support different platforms And there are different sizes of devices And anyone who’s familiar with web design is familiar with this concept of responsive layouts, where we can change the size of the window and our widgets move around, even if they’re just elements rather than widgets, or whatever you call them for whatever you’re doing And so we saw a number of questions about this In particular, and I’m definitely going to butcher this, but ArcD14 asks, how are we supposed to scale a Flutter website for phone and desktop And so to me, that really rings about the responsive layout, about how do we build one code base for both of them, but still have a nice layout that matches both of them What are your takes on that idea? JOHN RYAN: Yeah, it’s really easy in Flutter, but there’s a few different ways to do it So using a media query and getting the size of the full app is one way to do that So if you know the full size of the screen that you’re showing and you want to know that to change the layout, media query is one way to go I’ve also seen Layout Builder used a lot for this And what Layout Builder does is it provides you a callback with the incoming constraints So in Flutter, the constraints are passed down and the widget’s job is to ride the size back up to the parent And so Layout Builder gives you a hook into that process to say, oh, if the constraints are such that I need to be 500 pixels wide, maybe I should make myself only 300 pixels wide so that the user can read the text So Layout Builder is super useful for that And I would also add that, well, yeah Let’s just call it there I think that’s a good answer ANDREW FITZ GIBBON: Fair enough Yeah, and I think– I saw one of our teams from around Google who are building things with Flutter that a nice development strategy there is to, every day, test and do your development on a different device So whether you’re doing it on a Chrome window, or a very tiny Android phone, or a very large iOS phone or device It’s a nice way to kind of just see those different screens in play in reality, rather than, I’m building on my one emulator all the time, and then at some point in the future, I’m going to try it on a different sized emulator, and at some point after that, I’ll try it on a tablet or whatever else And so I thought that was a really interesting development strategy of saying just, today, I’m going to develop on the large device Tomorrow, I’ll develop on the small device and see how those differ It’s kind of an interesting way to think about it when you’re actually going to build it JOHN RYAN: Yeah I use IntelliJ, and so I have multiple configurations set up in certain cases And I actually sometimes have different devices running at the same time Kind of what Chris showed at Flutter Live, the Flutter Octopus I have usually iOS, maybe web running And a lot of people are starting to use desktop because you don’t need to have an emulator ANDREW FITZ GIBBON: Right Yeah And I kind of demonstrated the multidevice thing this morning too in the intro looking at that code lab, where I started off in the iOS emulator and then opened it up in Chrome afterwards And that worked really well, as you saw I just ran Flutter Run -d Chrome, and it opened up the same app there And there was no trickery there I just ran the command and it worked So it was a really neat way to test out those multiple devices JOHN RYAN: Yeah, it’s really cool ANDREW FITZ GIBBON: So looking at some of our live questions And so we have a question here from– and throughout the day, I apologize if I get any names wrong, but I’m going to do my best as well as I can with the live questions
But we have Sam Ovisol who asks, what are the things that I need to know to consider myself as a senior Flutter developer JOHN RYAN: That is a very hard question ANDREW FITZ GIBBON: Yeah JOHN RYAN: I don’t even think I know the answer to that But I would just add that if you’re building an app, if you shipped in up to the App Store, that’s a big accomplishment That– if you’ve written a real app that you and your users love, that’s what you want to be doing and that’s considered senior in my book But I don’t know What do you think? ANDREW FITZ GIBBON: Yeah, I think that makes sense I don’t know that there’s any one topic or one feature or a bit of technology that I would say once you’ve mastered this thing, now you are a senior developer I don’t know if that really exists Because you can do a reasonable app without going too complex and too detailed into various Flutter widgets and things And so, yeah, I think I’d pretty much agree that if you’ve launched something in production, that’s a pretty good signal And naturally, anyone can launch things on most of the app stores But I think, then, a turning point is how successful is it, quote unquote And do you have users? As you said, do you have users who love the thing as well? That’s a good signal That’s great JOHN RYAN: Yeah It’s all about what your goals are ANDREW FITZ GIBBON: Yes Exactly So I’m just kind of skimming some of the other live questions that we’ve gotten so far In the meantime, one of our questions from #AskFlutter over the last couple of weeks was from Anuj in India who says, how do we cope with frequent changes in the syntax and behavior of different widgets JOHN RYAN: Yeah So we do have a page with breaking changes now, which is great If you– I think if you just Google breaking changes Flutter, we have a page on Flutter.dev that we maintain We do try to deprecate things So we do try to mark things as deprecated, meaning maybe don’t use this because, you might upgrade next time a new release comes out and it might be gone That recently happened with a lot of the text and layout– or sorry, the themes in a Flutter app So we changed, like, the text theme names from things like Headline 4 to Body 1 and things like that And the process there was to mark them as deprecated, and then after a period of time, remove the old ones ANDREW FITZ GIBBON: Yeah Absolutely And I love that mention of the new breaking changes page just as a way to kind of see what is breaking, rather than having to, I run Flutter Upgrade, and now my IDU is complaining about all of the different changes that are broken So it’s a nice way to know definitively what’s been changed And OK, so with CodePen and DartPad, we’ve mentioned Flutter Web a number of times There’s been a lot of people asking about it, both in the live stream chat, and on Twitter, and elsewhere, just generally, about Web And we’ll set aside for the moment the question of whether we’re moving it out of beta into stable or anything like that For the moment, I just want to look at learning about Flutter Web, Flutter for Web Because today is all about learning and building new things And so Katura Ovio from– oh, I don’t have a location Asks that we need more CodeLabs and tutorials for Flutter for Web Can you point us to the right resource? JOHN RYAN: We actually have a new CodeLab for you guys today, and that CodeLab walks you through a simple app that has a few routing things and displays the number of GitHub stars for a repository, which is kind of fun So it demonstrates a few things But if you’re someone wondering will HTTP work, or how do I deploy a web app to Firebase, that CodeLab is certainly something to check out It uses Firebase hosting to host the web app ANDREW FITZ GIBBON: Right Yeah So that’s nice It gets you out of that just purely local development where, yes, you can run Flutter, run -d Chrome, and that’s fine But how do I actually get a real website up and running? Firebase hosting is a great way to look at that, absolutely JOHN RYAN: Yeah Yeah ANDREW FITZ GIBBON: And so from looking at all of our Ask Flutter questions, which, by the way, everyone watching,
thank you so much for all of your Ask Flutter questions That’s super valuable and gives us things to talk about So I really appreciate all of your questions And we had a lot of questions from people who were asking about first class support for SVG And so I noticed you had looked up a little bit of information about that So what does that look like? What does first class support for SVG look like? JOHN RYAN: Yeah This is an issue that has been around a while There is a GitHub issue to track this if you want to follow that, follow the discussion there The way we approach things like this is, there is a third party package for this And you can file issues against that, contribute in that way It’s very much a community-run effort But it does exist and it does work The SVG API is very large and there’s a lot of edge cases that, to call something a stable SVG library is difficult And I think there’s some smaller difficulties getting that to work in Flutter But yeah, the way we approach that is, investing in something like that is a big investment for our team, and so we want to make sure that it’s something that gives a lot of impact and has a lot of impact on a lot of users before we fully support and maintain something like that ANDREW FITZ GIBBON: Yeah, absolutely And one of the challenges I’ve seen with SVG too is that it’s one of those things that’s kind of standard, but everyone does it a little bit differently And so we need to balance, like, which of those edge cases to actually look into And there’s, as you said, there’s a lot of them for SVG JOHN RYAN: And there’s tools coming out now, like [? Rive ?] others from Adobe that can do a similar thing and convert to Flutter ANDREW FITZ GIBBON: Right JOHN RYAN: [INAUDIBLE] that ANDREW FITZ GIBBON: So looking at our questions coming in live, we have one from Megan, who is asking, I’m using Flutter to create an app that works with a robot Do you have any examples or resources for this? So creating an app that works with a robot I could see a couple different angles on that What is your take on it first? And then I’ll give mine JOHN RYAN: That sounds very cool You should tell us more about your robot ANDREW FITZ GIBBON: Absolutely Number one It’s really, really interesting JOHN RYAN: Yeah I don’t know exactly what the details are, so it’s a little bit hard to answer that But we did– there was a talk last year from Emily and Matt on this lady wig that Emily built So using a Flutter app to control IoT devices So you might want to check that out if you’re curious ANDREW FITZ GIBBON: Yeah And I know for that– so it really depends on what the control interface for your robot is and what kind of communication mechanism you’re implementing there But for that wig in particular, I believe they used Bluetooth to communicate between the IoT device and the Flutter app And if you check out that talk, it was from OSCON, the Open Source Conference, from a couple of years ago And they walked through the whole thing, and it’s great It’s really interesting And I don’t know if we have any other definitive resources on that idea in particular JOHN RYAN: Yeah, I don’t think we have any official docs on that ANDREW FITZ GIBBON: Yeah All right So continuing on through our live questions We have Free to Mind is asking, says, hey, Flutter team Why is there no documentation on Firebase website for how to use Flutter? There is an example for even Unity, but not Flutter Why is that? So I will say that, for starters, yes, you’re right Thank you for pointing that out And we are working with the Firebase team to get more docs on there and more resources In particular, the CodeLab that I was showing off this morning is a good example of that, using Firebase, Firestore for providing the backing data for a Flutter app which works great across multiple platforms And so that’s a good start, but I recognize it’s not quite enough
So we’re working with the Firebase team to get more out there In the meantime, the Flutter Fire package and the repo for it are also a great resource to get started with So that’s my two cents John, do you have anything to add on about Firebase support with Flutter? JOHN RYAN: Yeah So the only thing I would add is that it does work on the web now So you can set up Firebase in a Flutter project in a way that runs on web, iOS, and Android So we recently did this in the Flutter samples repo There’s an experimental sample there that we worked on ANDREW FITZ GIBBON: Cool Yeah I know it’s a question that we often get a lot on just how do you get Firebase working with Flutter So it’s great that we’re– well, we’re building out resources to help with that question and to get more about it So I want to go back to some of our Twitter questions that we got beforehand And there was a couple of questions, and I’ve seen this come up a couple of times in previous things as well, where people are asking what a BuildContext is I see it come up everywhere It’s in all of my widgets’ build methods But I have no idea what it is Sometimes I pass it to a media query Sometimes I pass it to a navigator It’s just, like, it’s what the docs tell me to do I don’t know what it is So what is it? JOHN RYAN: Yeah So the docs do kind explain it, but I can try to explain it how I think about it Which is that it is a point in the widget tree So if you have a stateful widget, it’s actually a handle to the parent widget in your build tree So if I’m building a widget, a lot of things, like getting the theme for a particular widget, that uses the BuildContext Because you could imagine potentially one part of your app using one theme and one part of your app using a different theme So how would you do that? Well, that’s why you have this way of getting the theme, which is theme.of And what theme.of does is it takes your BuildContext, which is the point in the widget tree that you are at, and it goes up the tree and it figures out where the closest theme object is in that tree to give you the right theme for where you are ANDREW FITZ GIBBON: Right So it goes as far up as it needs to go to find the thing that you need JOHN RYAN: Yeah, exactly ANDREW FITZ GIBBON: Another way that I heard this described, and I think it was Phillip who was describing this to me the other day, who was saying that when you start to look more deeply into Flutter, you notice that a widget is immutable It cannot be changed It’s just a configuration for a thing And then– so if it’s immutable, that means it itself cannot hold any information about where in the tree it is So it doesn’t know its parents It doesn’t know its children And so the way it knows that is there’s other trees There’s an element tree And that’s the kind of thing that manages where the widgets are, and their relationships, and what the RenderObject is So that’s a whole other tree that we won’t talk about for the moment But those elements, that element, if that is maintaining the current information about the relationships between widgets, it’s in some ways the context, because it’s the one that has the notion of, where do I go to go up and define that thing So it’s an interesting way to think about it as saying this is just this other part of the tree JOHN RYAN: Mm-hmm Yeah, exactly It’s a separate data structure ANDREW FITZ GIBBON: That can change depending on where you are JOHN RYAN: Mm-hmm Yeah, we won’t talk about keys just yet, but ANDREW FITZ GIBBON: No, not today I mean, unless it comes up I only read, like, one or two questions ahead of time So maybe it’ll come up in the future We’ll see We only have a couple minutes But– so as I mentioned a moment ago, everyone starts to ask about Firebase So we have another live question about Firebase specifically So UXNinjaaa, with three As, is asking if it’s possible to interact with Firebase ML Kit in a Flutter app JOHN RYAN: I don’t see why not I don’t know if there is a plugin for that, actually But if someone has a link, please share in the chat I would love to check that out
That sounds awesome ANDREW FITZ GIBBON: Yeah and I know it’s been done to a certain degree before I know Matt produced a video with face detection a while back in Flutter, and I was able to rerun it after– it was an old enough sample app that it needed some upgrading and some fiddling around, but it did work, and it did have ML Kit with face detection in the app Yeah, it seemed to work just fine So I believe that’s also part of the Flutter Fire repo So UXNinjaaa, if you want to check out that repo, it should be in there And if not, file an issue Let us know in chat Let us know on Twitter, and we can hopefully follow up with that JOHN RYAN: Very cool ANDREW FITZ GIBBON: Let’s go fly a kite and look at past questions that we got from the internet And so there is– it kind of gets into our next session later in the day about performance But this question comes from Demian, who is asking a specific question about what is the best way to optimize images with Flutter But not shrink, but also maybe some compression, and specifically, like, is there any WebP support or anything like that What about images? I know when we’re talking about beautiful UIs and great UIs, there’s a lot of images, usually What do you think? JOHN RYAN: Yeah This is honestly not my area of expertise, but I did see that WebP is supported as far as I can tell And as far as optimizing images goes, yeah, you want to make sure that you’re testing on all screens You want to make sure that you’re not getting a blurry image in your app on one screen and a sharper image on another screen or another size So we provide all the capabilities to do that And there are some recommendations around this So I think on iOS, you usually add an image at 2x and things like that in your assets So there is some best practices around that I’m not an expert on this topic, but yeah, I think– yeah, we provide all that If there’s a specific issue, then feel free to file one ANDREW FITZ GIBBON: Yeah, absolutely And I’ve seen other techniques too around when you have your image server serving the images, you can have it get different sizes as well And so then it’s on your image server to be able to provide that compression, rather than having that compression being done on the front end Because front end, whether you’re on mobile, or web, or whatever, typically has less resources than the back end So it’s a nice way to kind of offload that effort to something else JOHN RYAN: Yeah That’s a good point too Not everything is an asset Some things are loaded dynamically ANDREW FITZ GIBBON: Yep Especially when you’re looking at maybe an e-commerce store, or an image viewing app, or something where you really don’t know ahead of time what those images are You are going to have some of that dynamic loading JOHN RYAN: Mm-hmm Yeah, and as a– yeah, go ahead ANDREW FITZ GIBBON: No, go ahead with your thought, and then we’ll– JOHN RYAN: As a mobile framework, it is important to make sure that you’re aware of what your users are experiencing So if you’re on a 3G network, make sure you’re not loading gigantic images, of course ANDREW FITZ GIBBON: Yeah And so it sounds like we’re getting close to the end of our time And so there’s one really short question, and then one really short question after that So Honorood is asking if we can show a better error message of widgets than just a red screen with text So better error messages displayed on the app JOHN RYAN: Yes This is customizable, right? ANDREW FITZ GIBBON: I think so, yeah JOHN RYAN: Yeah Yeah, I haven’t actually done this myself, but yeah I think at one point, it wasn’t But then a lot of people wanted this feature, so I think we added it some time last year I’m not quite sure ANDREW FITZ GIBBON: Yeah All right And then our last question of the day, it’s for you, John, specifically This is coming from me, not the internet But if a widget tree falls in the forest but nobody’s around to debug it, did it really fall?
JOHN RYAN: Yeah I think you’d have to open up the Flutter DevTools and inspect the forest to see what the layout of the forest is and figure out if there’s any fallen trees ANDREW FITZ GIBBON: Yep That makes sense to me All right Thank you so much for being with us, John It’s been a pleasure talking to you this morning And thank you all for listening in and for being with us this morning And that’s all we have for questions And we got a lot of great questions, and I wish we had time to answer them all But fear not There are two more Ask Flutter sessions today The next one is in about 10 hours or so And we’ll be focused on DevTools and performance And the last one of the day will be about Dart, null safety, and all about the language I can’t wait to see your questions, and we will see you there Thanks for being with us [MUSIC PLAYING]