Flutter- Google’s latest innovation for mobile, web, and desktop apps

Flutter- Google’s latest innovation for mobile, web, and desktop apps

Show Video

How's. Going I'm. Martin and I lead marketing for flutter it's an honor to be here thank you for welcoming us to this keynote. Stage, see. If the slides, go up there we go, all right so. Flutter. Is Google's. Portable UI toolkit for building apps on Android, iOS. And, the web among. Other places but. Before we get started I'm really curious who here is a mobile developer. Okay. About 50% what, about web developer. Very. Nice, who, here has already heard of flutter. Wow. About, half the room who's, actually used flutter build something with flutter already nice. Okay. So. It seems like we have a difference in, terms of exposure to flutter and knowledge, of flutter so this, is how we're gonna structure the talk we're, gonna start with just a very quick overview, of what flutter is and. Why it really matters at Google and beyond then. We're actually gonna pack on some flutter code live on stage so, hopefully, the demo gods are with us today and then. We're actually gonna have some partners talk to you and show us use some other really cool demos. So. I mentioned, what flutter is but. A lot of times when we talk about flutter we do it with, four pillars so. We say that flutter is beautiful. Flutter. Is fast. Flutter. Is productive, and flutter. Is open so. Let me dive into each one of these for a little bit the. Reason flutter is beautiful is because Fleur allows you to paint every pixel to the screen, everything. In flutter is a widget which is customizable, which means that you as a developer have full control over your, application we. Also have some, app widgets. That we give you such as the material design and cupertino widgets so you can make your app look to certain platforms so you can also customize them to make it a very brand driven app as you can see in the example behind. Me and I'll show you a few more examples. Secondly. Footers. Fast we. Use Askia. Graphics. Rendering engine, and flutter. Apps render, over 60 frames per second as you, can see in the sand built by two dimensions, and. That's actually overlaid. As you can see by texts and other custom things you can create these highly, powered animations, that are jank free because. We've all been in that situation where, you have an app and it's a little bit laggy but, obviously we expect our apps to have really, good performance, so as, soon as it lags you know all the investment, you put into the app can, can go go away, thirdly. Productive, so. Something. We love at flutter that we created because our developers love is called, stateful, hot reload which, allows you to make changes to your code and literally in real time see them up here on the application, as you can see what's happening right here so, we're, tapping we're changing the word click to tapped and hot reloading it we're also changing some of the business logic so we're actually making it count downwards, and set up upwards and you can see it reloads, that in you. Know half, a second or so so. Finally. Flutter is open and this is something that's really exciting to us which, is flutter, is entirely free and open source in fact, a ton of our community members are probably, here in person and watching online and they've, contributed a lot of code packages. And plugins to flare itself and because. It's open source we keep that nature with us as well so a lot of things you can go in and actually see all the code to it as, well as the demo will show you later will actually share all the code there as well so you can see how it was built, so. These, are our four pillars and, we've. Seen an incredible, amount of momentum this past year with flutter so I want to show you a quick video of some examples of apps that have been built this past year. All. Right. So. Those are cool apps but obviously, at the we are Developers Conference we want to show you the code behind it and actually do some of this live so, I want to bring up the stage now my colleague Matt Sullivan, who's going to hack on some flutter code for you Matt. Hello. This. Is the part, of the talk or.

Things Feel horribly wrong which is why Martin asked me to do it so we'll. See where we get to so. I've got my Visual Studio code I have my, iOS. Simulator which is what I decided use today and notice that my simulator. Is set for. German. Locale so. Let's start this up so. I was, trying to think what would I do for. 10 minutes on stage. To show and typically I kind of build simple things from scratch so, I had to look around at some api's and I found that there was an open API for the Berlin transportation. System and. I thought that's cool I'll hack on that and then two weeks passed by and I realized that I'd, gone a little overboard so, we're gonna do today is look at some of the handiwork I've done and tinker around with a few pieces so. Every. App needs, a splash screen. Splash. Screen and, what. We see here is as I work through it for, those of you who are not familiar with flutter just, keep one thing in mind that everything is a widget so. I have my splash, screen widget. Here which is my entire page and, then. I have my, build method and what this does is I take a scaffold, which is a widget and that, gives me some basics, around theming. The page which I have made this Berlin, bright yellow and then. Inside, my. Page I have a column because, widgets. Are not only UI components, that you see it, also controls, your layout. So. What I have in here on my column is I have a couple of widgets two, of them which are flexible and one, of them holds, a transportation, animation. And the other holes a flat button down the bottom so. Let's take a look at this page and see what I can do well let's say that I wanted to give my button more space I could change my flex to two okay. So that's given me sort of 50/50. I could, even go back and I could give my. Piece. Of the top more. Space and so, you can play around with it and this is heart reload in action, so. Moving things around it is all well and good well. We can also do is we can take a look at our transportation, animation animation, this. Is using the, flare plugin built by two dimensions, and. I see here that I have an animation of a bus and I have my box fit well this. Is nice but maybe I want to play. With this a little differently instead of containing it why don't I try to cover the whole area with my bus animation, there, we go I can blow it up a bit that looks kind of cool well, maybe I actually want to fill, the whole thing and not lose anything on the sides and that stretches it a bit and, so what you can see here is as I play, around with. Flutter I can. See. In the real time what's happening so, maybe I don't want a bus maybe I want to train, so. I got this cool train animation, that's nice what, else do I have I have. A metro. Animation. And. This Metro animation is kind of cool it doesn't quite fit in with the yellow so. Maybe, I could come up here and I could instead, make, this color stop black, and. See what that looks like and. That looks a little better and I get this cool tunnel, effect going on and so, again I can play around so it's completely hitting my button so let's undo. That let's go back to bus for the time being and. That's great so down the bottom I have this flat.

Button Which doesn't pop very much it's not very exciting No. How, can I make it better one. Thing to notice is that my text, widget. Is actually, using localization, because I've localized, this both, for English and for, German and, we can check that out in a little bit but, let's say this, is a boring button, let's make this button a little more exciting, so I'm gonna make this a raised, button and now. It looks ugly but at least you can see it so, that's nice what. We can also do is maybe we can make it the same, color, as. My. Page. Okay. Fits in a little better but it's kind of hard to see so let's. Elevate. That a bit let's give let's, give it ten, okay. It's a bit much but I can see a little better now, and. So that's nice but. It'd. Be nice I don't like squares particularly, much let's make our button a little, more shaped so let's put in a shape and I. Have a handy. I cannot, spell, which. Is fine I have, a handy. Rectangle. Border here and let's get rid of this because people can't see what I'm doing I have a rectangle, border, widget which, seems to give some sort of circular radius that's. Cool and I can play around with what this looks like let's. Keep it at 20 and finally. I kind. Of want this to pop a bit so, let's. Stick a little border let's, make that actually a little bigger and. Do that and. So there you go this is a typical, workflow for. Building UI in flutter I change, my code in heart, reloads and pushes the code over in real-time near. Real-time and it. Makes. It pop, and. Change, so. This is cool now let's move on and actually look at what the app does but. Before. I do that I. Want. To make an announcement and the. One thing that developers absolutely. Love or, hate is a. New feature, so. For the first time here. We're, going to announce a brand new feature and Martin. Come. On come on coop. Come. On we're. Gonna announce a brand new feature for. Flutter. Which. I have. Dubbed. And. I cannot spell Oh God. The. Martin widget. There. We go, our. Big release and our who wants to see that again you want to see that again I'll do I'll, do a love hunt restart here and hopefully we're gonna get this again there, we go are we gonna have it there we go we have the Martin widget which. Is now going, to be available for everyone to play with and you and our mortalized in flutter so you go Martin thanks. Matt. Okay. So. I'm, gonna pay for that later, let's. Move on here. We, go I have my app this is nice I can give it a start and and give it a final destination and it's gonna work out what routes I can take now, I've got this, preferences. Area and as I said before I have translated this so we've, got some nice ways of handling. Internationalization. In flutter and, one thing I'm using is I'm using the open. Transportation, API, for. The Berlin transportation, system and occasionally.

It Kind, of fires me 502 errors, which. It does irregularly, but I was like this is gonna happen on stage so I'm gonna put in an offline mode and I'm gonna activate this now while I build things but I'll switch it off at the end and we'll see just well. Just see how we do okay. So. Let's, go back. So. Here. I have my, search page and. This. Search page is actually entirely, built using. What we call a search delegate which is another feature in flutter, and you'll find that if you dig through the flutter API there are a lot of things, in there that can make your lives easier so, this search delegate, gives me a lot of things like it will build suggestions. Or I can give suggestions in real time I can build results, I can, build some actions at the top and so, what I've done is I've created this and I. Can search for something and I'm gonna use Bob because that's the standard, search term I use and. It's. Gonna say where my place is why does it does that because I haven't actually implemented. Building the places list yet because I wanted, to show you what it was like building something, a little more complicated like, a list in flutter, so. First, off how do you build a list in flutter well. It's, simply, a case of using a list view and. You. Know you asked well what about like you know recycling. Your views when they're off screen how does it handle thousands. Flutter. Takes care of that under the hood for you you can create a list view and you can let the, platform. Handle, all those complexities for you so list view takes some. Children, and what. Do I want to show here well I've got a list of stops. And. So that's not gonna work and, why is that that's, because everything is a widget so, we need to give it a widget so I can do some slightly, fancy. Functional. Piece here, and I'm gonna map my stops. To. A text widget and for the time being I'm just going to show the name and this, gives me an iterable, so I go back to, list and there. We go I have the world's ugliest most, boring list it's a list thing it moves doesn't, click it doesn't do anything so this is clearly unacceptable. So. Let us use some, more out of the box which is flutter we're gonna create a list tile and a. List tile we, can give it a title which I'm gonna keep as my text, and, I'm gonna balance my braces you, know what I'm gonna do that to make it readable and, there we go okay so it's, added some spacing, that's ok let's put, in a, leading. And you're like where's, he coming up with all these well what I can do is I can hover over and I, can see what's there, what's really cool is I can actually go to the source code for, a list tile and I can see how the whole thing is implemented, because all of the, UI code and flutter is written in dart all the sources available and compiles, into your app when you actually compile, it so you can actually dig in and you can learn and, customize, and do all sorts of things that you want with, the existing out-of-the-box, so.

I'll Go back to creating my leading. And. I'm gonna make this an icon just because, quickness. Icons. Not trained and. Okay. There we go it's looking a little better let's, I want. To know is, it going to be a bus this is gonna be a train is it going to be the, the underground so. In a subtitle. Here I know that we. Have. The. Stop, types of strings this, gives me a list of strings not very useful so, let's join them together and. That's. Also not very useful cuz everything. Is a widget and so, I can make this text. And. Then I can do that, and. Then notice, that it's actually styling, the text for me based on where it is in the list style so, this is great still doesn't do anything that's not very useful so. Finally, I can give it a gesture, and. Because. This. Takes our closure and because, I've used the, search, delegate, that gives me a handy, close. Function. Which. Takes, returns, my value which in this case is my, stop, so. Now theoretically, hopefully. If I haven't messed any of this up I can, go and I can click here okay. So it's fun it's it's passed it back here. I'm going to say well we want to go to where. We currently are and I think that's the stop. And. Then that goes and that pulls the data and then now this is all of our. Stops now this is cache data so the times are wrong. So. As, I. Wrap up let's. Just see if this behaves. Itself over. The Internet now just to show you I'm doing you know he's doing behind the scenes API, stuff it's probably very complicated, and whatnot how do I make an API call well. Let's take a list this is how I pull back my list of locations and all. I'm doing in here is you, know super. Boring I'm creating a URL string I'm. Calling, this fetch data. Function. And notice. That this returns the future and. Dart. Is asynchronous like JavaScript, by Nature which means you can do the whole, make. A call on i/o it's gonna be non-blocking so I don't have to worry about threads. Processes. New tasks, I can, just make it and the platform should continue, to behave itself in terms of its rendering time so. I'm gonna get the body and then I do some JSON decoding, magic where I'm at them into the appropriate data types and then to make the actual call itself is one line of code and, that's it that's how you make an HTTP, call and flutter. You, can either return the future I'm awaiting here, so I can handle that and I do a little bit of error handling which you hopefully won't see and let's. See now if this actually works let's go back here, I'm. Gonna switch this off. I'm. Gonna pull this down. Yes. I am and so, I am gonna search for. What. Did I test earlier Brandenberg. Yeah. There, we go ok we have Internet access and it's working so I can go to Brandenburg, and I can click on this and. It. Updates and there we go so that is at actually, working through, our Wi-Fi here over. To that and I know it's not you, know super, amazing, but this took me like you know a few days of hacking together and playing, around with it so hopefully, what you take away from this is the. Developer, experience with flutter flutter is great you can do all these cool UI. Things, but, I enjoy, when, it works standing. Up here showing, you all this because this is how I wrote this flutter app this is we played around with it I am also the world's worst person. For styling. And UI and everything else and you may think this is terrible but you should see what I typically build and with. Flutter I actually produce something that's vaguely useful. So, with that I will hand it back to Martin. Thanks. Matt. Never. Thought this job would come with my own widget that was pretty interesting so, I, want to show you this slide really quick just to show you the actual tech of what behind, what Matt was just using so everything. Matt was building is part, of the flutter framework, and flutter, is written completely, using, Dart the programming language so, that gives Matt, and flutter developers control over a lot of things within the frameworks like the widgets animations, and gestures now, all that sits on top of an. Engine made with C++ that, uses skia and this, allows us to have runners to go to, iOS Android, and we also have a JavaScript implementation for, the web which I'll touch up upon now.

I Mentioned dart and. The, dart team actually is at. Google as well so they sit right with us in the flutter team and we worked in the last few years very, hard to re-engineer, dart, to really work well with flutter so, you can actually go to dart dev to see the, new site and some of the new features but here are some of the pillars that that. Make dart a really great programming, language for flutter. So. I, want. To talk briefly about momentum, you, know just, a year ago if. I asked who knew about flutter here probably most people wouldn't raise their hands but. We've seen a lot of momentum, within. Google and outside of Google with flutter here, are just a few stats that. I found, you, know I don't have to read him but, also, it, Stack, Overflow which, I know he we just heard from the CEO said. That flutter was ranked number three most loved toolkit so you know and the reason I'm saying this is not to convince you to use flutter it's just to encourage you to just check it out do some of our code labs it's free, and open sources within an hour you can be doing some of that hot reloading that matt has done. So. I mentioned some apps I use flutter it, started within Google and, we use it a lot internally. Some. Examples are our Google ads app we, just announced assistant support for flutter at Google i/o, there are a few examples here as well, massive, for example a French insurance. Company which over five million users I believe they're here somewhere as well just. Build their app with flutter and we, have one up there that's uh you. Know be relevant to where we are today so instead. Of me telling you about them I wanted to bring up Joseph, from BMW to give you his perspective, on using flutter welcome. Thank. You for having me over. The. Last couple of years the complexity, of building and operating an app for a premium brand like BMW, kind of exploded. Multiple. Platforms. A lot. Of form factors, and the need to maintain multiple. Apps over different brands means that keeping the quality high isn't easy anymore. On. Top of that BMW. Is operating, in a highly regulated market, and is, convinced, that we always have to deliver the, best quality to our users, all. Of that together means that, the efforts of building, and maintaining, and, testing, and running an application, in the BMW group is actually quite significant. So. Our teams are. Constantly, on the lookout for technologies, that help us to, both improve, the quality and the fruit food of our work all. Of those technologies, fell short in one way or another until, we, looked at flutter so. What kind of interested, in flutter was. The, integration in visual studio code the, quality of the application that comes out and the performance of the application that we see at the end what. Kind of really excited, was. The support of the community out there and, of. Course the amazing team at, Google. And. On top of that coding. In dart and flutter was actually quite fun again compared, to everything we did before. So. After, a very for evaluation. Period our, teams, decided. To go up to management and. Highly. Recommend flutter for, future development, so. After playing with flutter for with himself mr., guy Duncan that you see on the slides here CTO, of the connector company with him the B&W group had to say the following by. Combining Darden flutter we have the first true cross-platform, mobile, toolkit. And we feel it's a game changer to ensure feature parity for digital touch points and IOT by. Moving forward with the world-class tooling, automation, and modern, functional, programming, patterns we can improve feature cycle, time security. And cost of delivery of features, for the business. So. For our team's flutter. Is sheer development, pleasure we. Can deliver features quicker, and with higher quality to the business. We. Really, enjoy the, theming capabilities, of flutter and we're, interested, to see what we can do with flutter for the web and desktop, in the future the. Open source nature of flutter was a big reason for us to commit to it and that means we also want to give back so, over the next couple of months we will open source a couple of libraries we built internally to, the community. In fact there's already a couple out there you might have seen them already. BMW. Is the ultimate driving machine, and we, believe that flutter, is the ultimate front and develop machine thank. You very much. Thank. You. So. One of the pillars I mentioned earlier was beautiful, and as. You can see behind me you know the pattern in apps today award-winning. Apps are really about. Beautiful, animations. And design right. That's why we have all these custom, components, to it and. That's. Something that we, as flutter from the beginning knew so, that's, why I mentioned we provide ways to make it look like iOS and Android applications but we also want you to be able to customize everything, and, so I thought what, I want to do today is actually.

Preview. A video, that, we made for this conference of a company based in Europe that. Created. Their app using, flutter because. Of the fact that allows them to really express themselves in this brand driven design so. Let me show you reflect, a story. Beautiful. Design was the critical success factor for reflect, late reflect, a is a journaling app that we created to counteract, the stress that comes with social media in technology, digital, well-being, is important, now more than ever so our goal for this app is to provide a safe space and break, from the stress that technology, can bring therefore. This app must be personalized, safe, and beautiful, so all users, can open up and feel they have a unique relationship with reflect the. Beginnings of perfection Shirley was very humble we were a very small team and only two engineers, however. We wanted to reach users, on both iOS and Android so, we built the first version of reflect, Lea using a traditional cross-platform. Framework. But, even that reflector, is all about beautiful design, and user experience we, felt restricted in our ability, to deliver a consistent personalized. Design for. Both platforms for. Example frequently. Shadows were cut off an animation, were always sluggish, and so. It became clear to us that we needed to find a new solution and. Luckily. We found flood it, just worked so out of the box we've got an extreme amount of value who can then use and we knew we had to use reflecting and. That was kind of a key deciding, moment and from the first line of the photo code was written who had done in only two and a half months that, included some large new features like our entire premium subscription, implementation, photo, paints every pixel on the screen directly so, now we don't have to worry anymore about difference, between iOS and Android render, our content it. Is still adapts to the unique characteristics, of each platform we, didn't keep a common code base and still, build iOS and Android specific, UI where, it's appropriate it, was a revelation for us they were actually able to move so fast while still not compromising, our visions so, Fleur is great because it gives you control of every, single pixel on the screen but, it allows you to actually, structure. Your code in a way that's maintainable. And. Refactoring. For example to create the elegant, and informative new view transitions, we use the hero widget, and because. We're able to nest. Basic widgets across, the federal framework our, initial build of the you, was quick and effective while, still maintaining and great performance, so we deployed the app to millions, of users all around the world and they loved it after, we launched reflects a 2.0 one thing that made us particularly, happy, was how well the design was received we. Thought it was beautiful but it was great to hear that from our users as well. Overall. We're very satisfied with her floors before you it, has enabled us to build the beautiful, UI that we envisioned, we've got a feature in Apple's new apps we love this, cutter, built in time in half and, we can release new features simultaneously. On Android and iOS and, now. With, flooding for the web we can deploy our existing. Code base for. Android, iOS and, the web what flower were able to deliver this beautiful, experience to millions, of users and month-over-month were seeing double ticket home. Cool. So, at. I/o a month, ago we announced. Flutter. Was already in 1.0 but we announced slaughter 1.5. And. Flutters, main focus was mobile but. Our vision statement is to expand beyond phones and we, actually announced the technical, preview of flutter, for the web and. As. You see in reflections example a lot of people, are already playing around with that so you today can go and actually build things, on the web using flutter which, compiles, dart code to JavaScript, we're. Also experimenting. With other, places. You can use flutter such as desktop and other, embedded form factors and. Here's. One example which. Is New York Times KenKen, puzzle, app now. They the. New York Times as you know famously, for the crosswords and other games needed, to build this so that it runs everywhere and they, actually built the whole thing using flutter which, runs, on mobile web and desktop and, using.

That Link behind me you can actually go to it and play with it right now it's also in our booth here, if you, want to check it out now. I. Want to bring that back on because, I thought it'd be fun to, take. His transportation app and actually, put it on the web so. Let's. Bring that back on and see if he's ready to do this Matt. There. He is. It. Was going to sleep. There. We go so. Doing. Live demos. Things. Can always go wrong and, then Martin said why don't you come up and demo a technical, preview and I'm like oh that sounds like really fun let's see what happens, so, flutter. For Webb is in technical, preview and I'm gonna undo my changes here. Because. What I have done is I have hacked on this code a little bit and I. Have ported, it to flutter. For Webb's I'm going to do some get. Stuff here. And. You. Can say well why, why do you have two different versions well we're. In technical preview. So. We have a lot of things implemented, for. The web and there's a couple of things not, quite there yet I've, taken out the animations, to start with and. I've also, disabled. The, internationalisation. For, the moment because we're still working and getting the. Material. Pieces of internalisation, for those widgets in. As well but the rest of it is pretty unchanged, so we don't need you running anymore. As. You can see over here like. The code is pretty much the same I've tweaked, a couple of things but, it's still pretty much the same codebase so. How, do you actually get this compiling and running on the web well ultimately you're. Going to use the flutter tool it's gonna do everything for you at. The moment technical preview we, have. Given. People a web. Server. Web. Dev and. That will go through the whole compilation, process and then start to serve if. I'm lucky my. Application, locally so at the moment it's just going through the, build process what else are we gonna need what we're gonna need a. Web. Browser what, I'm gonna do here is I, am going to switch on developer. Just. So we have. The. Console, and I also want to show this as. It would look like in a phone because I did no optimization, for landscape, it looks terrible but, it looks okay in portrait so we're gonna stick with that so, let's take a look here, it. Looks like it's still doing a little bit of building so, it's going on there maybe I should have cashed this beforehand. But, because I was doing it live I thought it empty all the caches and there we go so this, is now built essentially, what you saw is the same map with a couple, of differences, you'll. See now that I now have a web folder and the. Web folder has index dot HTML and, I, could do a bunch of things here but basically all I'm doing is I'm serving up the, app. From. JavaScript, and then I have a new main and all this is doing is saying let's, initialize the. Web component, tree and then serve the app as usual. So the only two things I've had to add to get this to. Work so I'm. Gonna truth let's go here and we're gonna go. And. Fingers. Crossed. Still. Crossed there, we go so here is the app remember the animations are switched off and I replace it with an icon but here is the app running in, in. In, the web so I can tap here and you, can see I have essentially. The same styling, you see we have the shading, I haven't changed anything here, I have. My pop-up which, is whether the second time around again, go preview and, you notice I've taken this out I'm gonna put us back into offline, mode just to quickly demonstrate that this works I'll, try it again at the end so.

I'll, Search, for, there, and I chose. This, at random and, we'll. Search for. And and. It. Just renders so, without any real change of my code I have a web app which, behaves. Thusly, now, you're like okay well that's all well and good you using cash data let's see what happens if you actually try to use the HTTP, libraries, and they synchronicity, and everything else well. I wouldn't try this if I didn't think it would work so let's. Switch off offline and let's go back here on this change err start to I came, from the airport, so. Let's put in airport, there. We go so that has pulled everything from the internet using. The same. Code. As we, did in the app which i think is kind of cool and then, for the last thing let's see if this works there. We go and we have our route and destinations, can anyone spot the bug. It's. Not that. Was two hours ago somebody. May kept this in UTC, we're. Plus two I'll. Fix that I, only. Noticed that last night and I'm like I'm not gonna, break everything now so yeah my app has bugs so, there we go very, little work I stripped out some of the more sophisticated. Literally. You can pull down master and there will be fixes, on a daily, there. Will be fixes in there on a daily basis of working hard on it so hopefully that's given you a flavor for flutter. Compiling. To JavaScript, and running, on the web. Thank. You. Cool. Thanks about I want. To close, with something, that you guys build with the community so, we recently finished a comput test called flutter creates which, challenge developers all over the world to build apps with, flutter in under 5 kilobytes of dart code now. Most, of you know what 5 kilobytes is it's less than half a second in an mp3 file, it's, absolutely, very very minimal code so we want launch this we were curious to see how. Creative, people can be so. I'm actually going to show you a video, we put together that, demonstrates, a lot of the submissions, we received, in over 60 different countries from. This competition. This. Was awesome. And here are some of the winning apps from the competition, the, piano on actually codelab their entire entry before it finished so you can see how they wrote everything I mean all these are actually open source so you can go to Florida EV slash create and check them all out but, besides just the winners this competition, was really not. Just for winning, but it was to allow, people to experiment with flutter and have fun with it so, we got some really cool stories out of it - someone told me that their submission, turned into a full-time job someone. Else said that their whole team asked for a week vacation just to work on it so, it was really cool to see the impact that this hat. So. I want to thank you for being here we have a booth in Hall a please come talk to us we'll be here all of today and tomorrow again. I mentioned the demos we did on stage there's the repo, the link to it so if you want to check it out on github, and our website is footer dev and, come. Find us thank you very much.

2019-07-12 22:09

Show Video


Interested in learning about this. What kind of coding language is this called?

25:26 What is the software/platform for UIs on the right?

Assistant support for flutter?

Three dislikes from react native developers

Why do they keep showing us the talker when he is pointing out code like at 16:20 ??

Let's Flutter the world!

I am so excited this is the future of mobile now!

What's the plugin for that vs code?

Can someone tell why he doesnt type cast on stops.map((s) => Text(s.name)).toList() , but he does on (json.decode(body) as List).map((p) => Place.fromJson(p)).toList() ?

Crossing the fingers for Flutter Web, that will be a game changer for web development, at least for a good portion of it.

Please, when he/she (or someone in general) talk(s) about the code, try to keep the view on it so we can follow.

Any reason, why should not go for your native app development with kotlin.

Why would you wanna have 2 different teams for different platforms!?

Flutter is already a thing here In Nigeria. Great job lads.

At the beginning I read... city of cuba xD

And still no iMessage on Android

There is no point of showing zoomed out view. It's not a philosophical talk, please show the screen when he is typing next time.

*I want to do an app but in my case i will do it with the flights in our airport something like departure time, arrival time, source, destination, type of the aircraft, and so on. I just need to search about an api which stores all of theses details and that will be an amazing thing to do for mobile and web.*


#Flutter is amazing... can't wait to ship my first app! Will share the source code soon.

I really hope flutter could work well on the web, unfortunately flutter is not productive on the web. However on the mobile is great.

I hope so too.

Why is Flutter not productive on the web?

It will get there. Flutter Web is still in developer preview, not even close to production ready yet.

Thanks for the shoutout! @ 35:30!

Nice Talk, would be better if they focused on Matt's screen instead of himself. Fire the camera controller guy.

Whats the plugin for vs code that shows tree in code in this video?

I also would love to know that!

It's not a new extension. It's a beta feature in dart. Go to settings and search "dart guides" and tick "Whether to enable the Flutter UI Guides Preview". Then restart Vs code and it should be on.

It's on the Flutter extension. Only set to true the setting dart.previewFlutterUiGuides.

You can check the release note here ;) https://dartcode.org/releases/v3-1/#preview-flutter-ui-guides

try Guides or Indenticator extensions for VS Code.

Seems to be a Dart extension option on VS Code “Dart: Preview Flutter UI Guides”

"dart.previewFlutterUiGuides" : true, "dart.previewFlutterUiGuidesCustomTracking": true,

Check this out: https://dartcode.org/releases/v3-1/#preview-flutter-ui-guides

Would love to know this too.

It is a new setting of the dart plugin, check it out

This is the page you need to make your vscode flutter hero ;) https://flutter.dev/docs/development/tools/vs-code

I think it's the official Flutter plugin, but you may need to tinker a bit with its options.

It's part of Dart Code 3.1+ under Preview Flutter Ui Guides. https://dartcode.org/releases/v3-1/

update your dart and vscode and you can find the tree dart on settings vscode. Find about tree and check.

It's not plugin, just in settings check the box that shows lines

it's available in the latest version

You can turn it on in the settings

Always so easy explanation :)

Nine now.

Please share the link for the puzzle firebaseapp site they showed for flutter web

Clark Miller dart

Flutter uses Dart as its programming language.

Now 8.

Cross-platform (android, ios, desktop and web with one codebase), speed of development etc. I love Kotlin as a language, I developed some native apps with it. But the problem is Android framework itself, it takes so much time to build some basic things like scrollable lists or TabView. Those things are really basic UI which almost any app has, and with Flutter you literally just slap a widget and you're done, you don't have to open 10 different files for it.


Never thought of doing mobile development. Thinks flutter is a must try. The demos just blew my mind.

Great talk. Awful recording/editing.

ok, now sit the flutter team around the GOlang team

martin :)

we need drag and drop

Just a guess but i think it is Zeplin.

i think people dislike because of zoom out perspective instead of code view..


Good!! What is about your App?

@ThrowBox oke thank

Before Flutter: Web Devs: We will deploy Web Apps on Phones. Now: Mobile Devs: We will deploy Mobile Apps on Web.

Just when I was getting used to using HTML for mobile layout. Now new and controlled layout guides/confines. Crooked smile.

Flutter is good, but there are still some feature missing.

crying using react-native T_T

In the browser does the app uses the JavaScript or it can run pure dart?

I think Hummingbird would really make Flutter better than React Native

The audience seems unimpressed.

Why using vscode instead of using Google's own ide Android Studio?

Watching while waiting an RN app to build release!

It would be great if Matt can do some tutorial on Flutter channel

26:12 - "View transition", not inaudible

What would happen then?

this is all what i call coolkid tech.. unfortunately at EE side all this hipster tech is painfully hard to integrate with legacy supersystems. I would rather build 3 different apps on all 3 platforms than commit to something that may get dropped in few years

markets are oversaturated with half-ass frameworks.. I wish this one doesn't turn out as half-ass as nodejs is

Yep, need more work

Developing iOS app on Android studio?

>:( how do you know

How about a drag&drop feature

ctrl + , => go to setting. turn on guide for dart

How do they get more icons in the left activity bar of vscode in addition to file, search, git and extensions.

Hey anyone know what the fate of AngularDart will be after Flutter for the web?

Who thought it was a good idea to show a talker instead of code he explains? WTH?

you can check the Flutter UI Guides "dartcode. org /releases/v3-2/" to enable this feature

Upgrade flutter extension, go to settings, Extensions, Dart & Flutter Disable Dart closing tabs. Enable Dart Preview Flutter Ui Guides. Enable Dart Preview Flutter Ui Guides Custom Tracking. or add this lines to settings.json "dart.previewFlutterUiGuides": true, "dart.previewFlutterUiGuidesCustomTracking": true, "dart.closingLabels": false finally, restart vs code https://dartcode.org/releases/v3-1/

Flutter will never be equal to iOS native, but i really think that it should become standard for Android development. Until then - it's kinda risky to invest in it. P.s. and yeah, editing sucks here...

1:30 stop brainwashing me i know what it is

this is a joke

oh wow, it's open-source and has hot reload, never thought that'd be possible. oh no, wait, my bad, React Native and tons of other libraries did that ages ago. And then the representer explains how you can create "beautiful UI's" using Flutter it, and hands over to the developer, then the developer proves how you can't make beautiful UI's easily because what he creates is super ugly.

Probably the whole thing is not about the code but about them promoting their product lol

Nice talk. Very informative!

The camera angles make 0 sense.

Also, Android studio is too heavy of an IDE. Flutter doesnt need all the tools that come with android studio

android ios web

Still not worth d trade off. Why cover more breadth instead of depth. I mean more access to powerful apis in native platform. Moving to d web is too ambitious. I'm sure flutter mobile still has some issues. Also there's swift UI in the horizon. And u get access to powerful apis e.g pencilkit.

Yea boi this what were made of XD

did someone tried it for making a website ??

To be honest the Flutter for web is nice, but I think it relays way too much on HTML canvas to do drawing. This makes debugging harder, reduces accessibility, ability to select and copy / paste text and tables, makes text scaling harder, and just doesn't feel 'Web' like. I really wish there was a way to optionally ignore pixel perfectness, and utilize native HTML widgets, SVG and CSS styling methods as much as possible, with zero canvas elements. The added benefit I think would be ability to prerender pages offline on server, and then continue after loading. React does offer such functionality, and it is pretty damn amazing.

The fuck, why are you showing us something else than the code when he is talking about the code ?

Which features you want??

As well as Ionic developers. Lol

If you want a true iOS experience maybe not. But if you want the best cross-platform solution for your business, then flutter ftw!

I'm now following a quick Flutter course and my only fear is that if I started and got stuck in the middle of the way it's going to be such pain to move over to React Native!

9:20 he is coding.. show us the code not his face....

I thought that the sock on the head are finally uncool by now? ;)

Why would you move to React Native? Flutter is superior in pretty much every way, unless you are just use to react.

I love how they chose to use an iOS emulator, even people at Google are frightened to run Android Studio

yes please!!

How did you setup VSCode like that?

talk is cheap. show me the code.

Hey Xcoded. Connect me for a flutter app build job. Email me fac074@gmail.com

This was so annoying

Hey Wilfred. Connect me for a flutter app build job. Email me fac074@gmail.com

I tried flutter.io tutorial and it was confusing... I got stuck on how to create a project it shows how, but that's not how it's done anymore...

Hey Alex, can you give a little more context? "flutter create" is still a valid way to create a project. How did you get stuck?

@Flutter on flutter.io you should put the Widget Index separate! not inside "Reference". Since Flutter stands out with widget capability... after accidentally seeing widget index page of yours I'm having a second thought about this language...

@Flutter I surmise it's comical that I got stuck right on the first step of the page https://flutter.dev/docs/get-started/test-drive I opened android studio and nowhere could find "Start a new Flutter project" anywhere. Although I installed flutter properly... Most programming environments are all about coding.. I wish someone advances a visual programming... I want to build a project but can't because I need to learn the language first which will take at least months per language... I'm not complaining though... whoever makes that is a multi billionaire...

I think its being used to show that they are truly cross platform

Sounds like you need to make sure the plugin is installed on Android Studio as well. You download/install Flutter (which it sounds like you did), and then you have to install the plugin. See "Install the Flutter and Dart plugins" here: https://flutter.dev/docs/get-started/editor

I'll stick with Desktop: Vuejs with electronjs Web: Vuejs (Same frontend of Desktop) Android and iOS: React Native

Hi there.. Would you like to see my videos? Check out this link https://www.youtube.com/channel/UCnc4iAECxTAhNvcy_BOZTvg/videos

I'm absolutely in love with Flutter


I want flutter to succeed but unfortunately it won't, it uses a foreign language and tons of new libraries, nobody will bother to learn it when there is already stuff that is usable... People will just react native it

"This button looks ugly now" *Proceeding to make it more ugly by using yellow color*

PLEASE stop saying POP. A cringe worthy "design" phrase.

Hi all and Flutter . Can you fix this bug ? Thank you so much. https://github.com/FirebaseExtended/flutterfire/issues/215

@erick_lhe "best cross-platform" These two words should never be used in the same sentence. Cross-platform is always a compromise.

@Anurag So you have happy app consumers instead of one happy team with two sub-par non native apps.


The camera guys are dumb.

Who in the world is editing this? We’re here to see code, not the presenter face while he types out the code. Good grief!.

R.I.P to my 4gb RAM laptop XD

Question - Can a flutter app be run, and used, shared between people without having to publish the app via Google Play? If so, how is it done? Because I haven't found anything on how to do this. TiA!

@TheNeweN24 The product is in the code...sigh. Thats why its called a framework

Flutter sucks. You'll run into serious extensibility issues. Xamarin all the way

Flutter sucks. Inexperienced approached to mobile development. No data binding, no common UI language, ..never recommend this. Xamarin all the way

@Christopher Watson , I totally disagree... React Native has a more support and libraries than Flutter

Is it that cold at 5.10?

16:17 is maddening.

6:50 do we need an extension to see those tree code pyramid?

i don't know any programing language.can i start this language as a beginner

Github Hacked by China Hack Windows. Use Atlassian. Never Use code wrong way.

5Kb of dart code but how big was the app size ?

people who used GWT and later point of time removed them frm their application please comment here ...

ram + ssd


you sure can, the most important thing is the start regardless of the programming language. Just make sure you understand the core concepts of programming and then do tryouts.

Thank you Flutter New revolution begins....

Should you want guaranteed income from home then this program is for you *EZpay100 .c o m*

"Gives you control over every pixel on the screen"......including the OS U.I?....no?.....false statement.....insert a lot of uncertainty via false statements here.

Because... Everything is a Widget

the Yellow background destroyed my eyeball

Smh he presents demo of the web in a Pixel viewport. To make a web app mobile responsive is easier said than done, smh..

everything perfect, but when Google kill the Flutter ?

He's showing off the code and the app, why the heck did you pan away from the code and the app? I don't need a wide angle of the speaker, nothing he's saying makes sense without the context of the demo he's talking about.

There is any way to send messages to WhatsApp from a flutter app with font styles.?? Hopefully..

@Nadeem Shaikh cross-pollinate

Is there any way to send messages from a flutter app to WhatsApp with font styles.?? Hopefully..

Tell that to the marketing guy who is actually a woman who says they should show the socially anxious person because the camera man's feelings would hurt if they showed just the screen.

is this java or python code?

I was just about to comment on this, too. That's the worst editing I've seed for a tech talk.

Be good if BMW drivers had automated indicators as their pissy drivers are appalling road drivers in England ....

Very BASIC apps is all I saw! Nothing really exciting here!

it could be easier if you just invoked the whatsApp API from your Flutter App

take a few weeks to learn and understand object oriented programming fundamentals then progress into Flutter and Dart. The foundation of OOP is definitely key to pick up any language.


Most of the Google chrome dev team by Google maps says the same thing more about it tomorrow morning if that works better for you guys to come over the place with a civil engineer job is greatly appreciated by Google India for your help with this matter and I thought it which is why I was asking you for money and regards of the Google doc with the new job is going well for you and Google maps says the same thing more about your self and I thought it which is why I was asking me urgently as I have got the world to me urgently as I have got the world to me urgently need anything else please let me know if you need anything let me through this matter is greatly appreciated by the end of this matter is greatly appreciated and I want to be able to make it thanks for the Google maps and everyone is greatly appreciated and I want to be able to make it cheer's my Google account of all overnight in future I will be able to make it Thanks so much for guiding new application Google chrome dev 2019 @#

Flutter is future for mobile web and desktop apps. React native and others were anyway waiting to die.. their death is imminent. But Google is trying to impose it's on javascript (for Google it's dart) in web all around the world. Right now what they are doing is preparing for fuchsia OS inaugration with flutter apps which obviously would be super successful but along with that they will popularize flutter for web that would mean use of Dart and thus introduction of DartVM in the browser this starting the death of JavaScript. This is what is gonna happen in near future.

It's has darttojs compiler..

Firemonkey has a designer.

Its a google product. Lets not depend your livelihood on them.

Anurag how about webAssembly?

I tried flutter for android app, it's so slow and animation not smooth

Musically Viral Videos flutter is really immature.


flutter 2 coming in 2021 and its not backward compatible

count has reached to 94 now

The videographers are probably not coders

I like the content but I don't know why the photographers focus on the speaker when he is showing stuff on the board?? It's stupid!! And annoying. I'm so glad I can see how you make a flutter http call in one line. Oh wait! I can't... Because the camera is on the guys face...

lol. because flutter beginner in programming and have many bugs


It's okay! flutter 3, 4, 5 and 6 will be good.

I have some constructive feedback. Flutter looks great for really simple apps. But I am building a 3d game with webgl. I don't see anything to suggest I should use flutter for my app. I don't understand the usefulness of this tech other than some niche cases. If anyone has any info to the contrary please do let me know. But I think I will stick with Cordova and vanilla Javascript. I hope everyone using flutter has a great time but I would rather leverage my knowledge of how to access the DOM and make use of the 15 years of JS dev experience than re-learn some tech that appears to be quite limited to me from the 5 or 6 examples I have seen so far.

thanks. I hate it

Yeah why not... drag&drop feature for rapid application development (RAD) --- Layout editor will help manual typing as the code will easily reach over 2.000 lines just to define Widgets (without any business logic). Have a look at this online studio: https://flutterstudio.app/ --- Drag and Drop in XAMARIN with VS : We may try drag and drop control (widget) from Xamarin at VS (drag/drop from toolbox to Design View)... then define some properties... then Manual coding if needed. --- Xamarin also has these features : ross Platform (ios , android, window), the hot reload..., native..

The studio is a TED ripoff.

@nawaaz Will Proof that programmers are bad at design.

I read this before watching the video, and when I did, I felt you mate :D

I just got done with my third course on Flutter. I think it has real potential, but I am going back to React Native for at least another year while they work to get the major bugs out of Flutter.

Can you more specific on mobile platforms specially iOS

@Truong Nguyen It's built-in in Dart (or Flutter) extension. To enable it, you open the Settings window (by pressing `Ctrl` + `,`), search for `Preview Flutter Ui Guides` then enable it. Need a reboot if the effect doesn't affect instantly.

i don't know i'm watting :(

Other news