Flutter for Developers (Mobile World Congress ‘19)

Before. We get started I'd like to tell you my. Name is Chris, and I am the product manager for, the flutter developer, experience, and with, me is Matt, who, is the lead for a flutter developer, relations team and it's our job to teh to, tell you about flutter, from a developer point of view now, before we get into that let. Me ask how many of you are developers. In the room. Excellent. I don't see any managers, that means we can make fun of them. All. Right so, what is flutter let's start there flutter. Is a new. UI toolkit, from Google and its job is to help developers. You. Folks build. Quick. Apps have. High. Quality, and high, performance, and to. Do it across. Multiple. Platforms in. And target, them natively, that's the, job of flutter and so. Our, job is to tell you about that but before we tell you about that Matt. Is going to show you how. It actually works. Matt. Most. Of your developers, so you'll be able to spot the mistakes that I make, so. We're, at MWC, I, want to spend, 15-20. Minutes just, showing, you the developer experience for flutter this, is not to teach you how to build flutter apps this is just to give you a flavor for what it's like to, build an app so I'm gonna go through stuff pretty quickly and. Anyone. Who wants to come up and ask specific questions afterwards. Or during the breaks or whatever please, feel free to I'm more than happy to ask questions, so the first thing that was on my mind was what, am I going to start to code on stage and I figured since this is Mobile World Congress it, will be nice to build something that made phone calls because that kind of makes sense so, I'm gonna see if I can in the next 19. And a half minutes or less put. Together a phone. Dialer now I am running I usually, do this with an. Android phone hooked, up to my Mac today, I'm gonna use an iPhone and this is a real phone this is um this. Is a QuickTime, doing. An actual cast, so everything you see here is happening, on a real, device and everything that I do today I've. Tested, and works, well on an. Android handset so I thought I'd shake things up today so, first off how, many of you have actually written some flutter before. Okay. A few, so. Some, of this will be old hat to you but hopefully there'll. Be some interesting, things here, everybody. Has, been talking about hot reload and how it makes their lives easier so, I have the world's simplest app on here which. Is basically some Center text which says effectively. Hello world and if you get one thing from today is that. Everything, about UI and, positioning, in flutter is about building widgets so I'm gonna be building and playing with a lot of widgets, so when I talk about widgets they're, just the components, that I'm gonna do so, I have hello and ec let's change that and say hello.

From. Water. And. There. We go. Martin, promised you 200, milli second, heart reload time I'm afraid my laptop, only managed. 751. But. I got a lot of stuff running in this so hopefully is that still sub second so that's pretty, good so, there you go hot reload I made a change not, super impressive because I just changed the text I can. Go in here and I have done, a little bit of theming in here so, as you can see my colors. For my text our greens so maybe I can make that dark blue and. There. We go that's faded art blue the text is a little big for what I want to do so let me drop that down some size and. There we go okay so, I'm already starting to play around with it and this is all well and good but this is like hello world and we're two-and-a-half minutes into the demo let's actually do something more interesting so. What I'm gonna do I'm gonna create my first widget so I'm gonna go and I'm gonna create a stateless, widget and I'm gonna call it my dialer, because I'm gonna be building a dialer and what, I'm gonna do in here is I'm going to start with what does every dialer have it has some buttons so, what I'm gonna do is I'm gonna put in a, digit. Button that, I created, and this takes a character so, I can give it one this. Isn't going to do anything because I'm not using my widget yet so, let's take out this text and let's. Use. My. Dialer instead. There. We go Wow. Magnificent. He's made a button that's really exciting, and it, actually works. There's the button being clicked but, I don't need one button I need several buttons so how do you do that in flutter bunch, of different ways you can do it let's, add a second button and see, how we get on so I'm gonna go here and I'm going to use some, of the tooling that we've built into. I'm. Using Visual Studio code Android. Studio and IntelliJ, we have some really awesome tooling, for that as well I'm, just going to make use of this liberally throughout so I'm going to create a column I'm. Going to take my digit button and I'm going to replicate it and then. I'm gonna put in two two and now, I have two, buttons, great. And they're way at the top of the screen and that's kind of lame so I'm, gonna tell my column. To. Lay out in. The center there. We go okay so now I have two clickable, buttons. Maybe. I don't want them vertically, maybe I want them horizontally so, maybe I can. Change. This to a row there. We go so, you're seeing a couple of uses here I'm using widgets to create actual elements, of UI and I'm also using widgets to lay everything out I'm doing everything through, code there's, no underlying, layout.

Language, Being used here and it allows me to iterate really really quickly so. This is great but what I really need is I need something like sixteen seventeen buttons I need to do them really quickly because you don't want to see me code buttons. All day so I'm gonna create two the stateless wood you can call it my, numpad. And, what. I'm gonna do is I'm gonna use a table, and the, table is gonna let me lay things out table. Style now, I can, hover over and see what it is one of the nice things about flutter everything's written in dart so I can actually go into the documentation, and I, can read the documentation, in my IDE I can actually see the source code for. Implementing, a table which, has got a lot of complicated, stuff in it but the nice thing is is I can always dive in and see how things work under the hood and I can use them so, I've got a table a table here takes children. Which are a bunch of table rows so, let's give this some, children and that's. Gonna be another list and these. Take a. Whoops. These. Take a table. Row. Oops. Too. Much coffee I should have not had my fourth cup ten minutes ago. Great. Okay so twitch twitch. Table road takes more children which is just widgets so, let's go in here and let's give this some children and, in here I am going to create. A loop, I am. Going to create a. Map. And so what I'm doing here is I'm just going to give this a few, digits let's, say 1. 2. 3. And. All this is doing is a little bit of fancy, programming. To map. Those. Characters. To, some. Digit buttons this is great nothing's, happening in screen everyone's, bored at this point so let's just get rid of these and we'll, keep our car let's, change this back to call them and. I'm. Gonna get rid of these that are on screen I'm gonna put in my numpad. Ok. Right. Ok so now we're getting somewhere we have a row, and we have these. So let's replicate this, a couple, of times.

Three, And then. We will watch. With anticipation as, I. Cannot. Count. At. All there we go seven, eight nine. This is so exciting, I should have done this prepped earlier. And. Hash and we're, done yes. There we go okay so we have a numpad, it's. Not that exciting I know but it's getting places it's, a little, spread. Out because, this. Is an iPhone X and it's super stretchy so. I will, unstretched, if I that by wrapping this a little bit of padding and, let's. Give that 25. Say. And that's going to shrink it down a bit cool, okay. So that's not bad seven, minutes in and we actually have some buttons, what, are we going to do next, let's. Show. What, those buttons are actually typing so I'm going to put a new widget in and I created a readout, widget. And. I'm. Just going to drop that in now. There's a couple of things to note here one is I've used a pre-built widget. And, secondly. They're the numbers that I've been typing in since we began and this. Is the example again of stateful. Reload, I was, hitting those buttons they. Were the state was being record and even though it's constantly, reloading, the UI that, is still there and just to prove it there we go even the Delete key works so, that's cool, so now we have a readout which, is nice, we, kind of need a button, to actually dial something, so there's, a simple dial button here okay. And now we have the basics, of a dialer that's kind of cool but you, know I kinda. Did some cheating by I pre-prepared. This readout and these dial buttons so let's take a quick look under the hood just, to show you that there's no real magic here, so. Here's, a few widgets I created earlier and here's my number readout one and. It's got a little bit of stuff in there in terms of setting, margins. In terms of playing around with nice curvy, borders. So. Let's play around with a couple of these just to show that it's fairly easy to modify the first is we, have this nice, delete button I can, go into my delete button and you can see there it's an icon for a backspace, I could, you know change that up a little bit and maybe change it to something different okay. That's nice I. Can play around here you can see my borders are quite Roundy I can, make my borders even, more Roundy I can make my borders, less, Roundy that's, nice. Maybe, I don't like this you know 2 or 300 year, old style, of wrapping. Everything in a border maybe I just want to have it nicely underlined, so, I can do that you. Can see here I've got some decoration, going on some. Bordering so I could change this instead of saying border at all, I could just say hey just, draw the bottom border. And. There we go so, ok playing around with this this, is nice. Where. I am way ahead of time this is great course you can have tons of time to talk after this. But. This is pretty white and it's, pretty minimal and that's nice but maybe we want a little bit more color in there what could I mix into this so. Let's, go back and here's the code that I've written so far I've got a number pad I've got a dialer I want to create a new look dialer, so I'm going to create a new widget and I'm, gonna call this my fancy, dialer because. It's going to be fancier. And. I can't spell Tyler that's fine. And. Okay. So, let's. Just, start, with I want, to show something in the background so I'm gonna create a stack, and, you've seen row you've seen column you've seen table stack, is another way of laying out except you stack things on top of one another rather, than horizontally. Or vertically so I'm gonna create a stack the. Stack is gonna take some children, which, is going to be a. List. And to. Begin with I am just gonna drop in my. Dialer. Which I just wrote five. Minutes ago into. Here and then I can up here swap, out this to my fancy dialer, and, absolutely. Nothing's gonna happen because at the moment I'm just showing the same thing before now. What I want to do is I want to put something in the background so I'm gonna use, this. Handy. Position. To fill widget. Which is basically gonna fill my background, and in, here I'm gonna put the. Flutter logo. And. I'm gonna get the commas right there we go. Boom. So we got a floater logo in the background that's. Pretty ugly you, can't really see what's going on I am naughty will.

Will Come up on stage and show you how to build beautiful things this. Is not what I do I build, things that are functional but this, is too ugly for my liking so what I can do here is I can take this flutter logo I can, wrap it in a new widget and this one I'm going to give. It some transparency. So. I can use this opacity widget, and I. Can set the opacity to I, don't know a zero let's, see a fifth. Okay. It's, not too bad it's. It's certainly not as as. Eye gouging as before but. You know it's still a little white and, minimal. So let's add a little bit more color in so, how can I do that well one of the things I can do is let's, say under the, opacity so things are still opaque but before we render the logo. I'm. Just gonna style up the container, that the logo is in so. Container, takes a handy decoration. And I. Know for a fact this is called box decoration, and, let's have a look this is a whole bunch of things I can do borders, and, I can do box shapes and, shadows. But. I'm gonna play with the gradient so. Let's stick in a gradient and. I'm. Gonna give this a linear, gradient. And this is going to require a couple of colors and. I'm gonna stick with that dark blue that we had earlier and I'm. Then going to make. A. Hideous. Design choice and blend it into green because. Why, not and. There. We go okay so now we've made a color that's kind, of fairly opaque so if I if I if I turn, down the transparency, a bit you can see a little better there, we go that's nice don't. Quite like it going right to left maybe I want it to go diagonal, so, there's probably something to do that so let's have a look linear, gradient yes, has, a beginning, an end and notice that occasion. I'm going in and putting in commas and that's just to lay things out a little easier so I can drop things in again this is the tooling at work so. What was I going to do I was, going to say begin and, I was going to align, my begin. At. The. Top. Left. There. We go. So. That, has. It's. Hard to tell. Let's. Try. See. If that does something. Let's. See, if we can go here and do that. Okay. Oh you know what my phone's gone to sleep, there. We go I was, gonna blame flutter and actually turns out it was my phone and, so if we go back to green and. We. See the bottom right we're gonna have that nice effect bottom, to top great. So. We. Have a, wonderful, UI for. It, we. Have a UI, that you may or may not decide is wonderful. For. Her for. Dear. Me for. For for dialing now does this actually work what, we'll see in a second but what I want to show you is something new in flutter 1.2, which. Is before, we had some really good debug tools built, into. Android studio it was great you could do it Visual Studio code not so much and I'm more of a vs code minimal, IDE, kind of person. So I was sad, but. I'm no longer sad because what I can do is I, can start the new dev. Tools and in. A web browser it's gonna launch a suite, of tools, that you can use so you can see this is hooked up to my app right now I can, go in I can go and see what's my opacity I can see it's a 0.5. I can check out what's happening with my logo and where it is, I can, drop down to so I can drop in and I can inspect, the, widget tree easily, I can, go in I can turn on my debug paint to work out how my layout is looking that's, nice and I can even do the performance overlay, and as, I'm using my app it's.

Actually Telling me what my. Frames. Per second is so I'm easily. Achieving, under, around. 60 frames per second at the moment so, that's really nice so these are available now, shipping. With the, beta. Or, 1.2. And you can play around with that available, across all, the IDs, we support. So. That's nice so. Final. Test I actually, wrote some code which hooks into the Android and the iOS. System. For, dialing, numbers, and. Being. An. Android program before that was easy and being an iOS I learned a lot of a. Bit about Swift doing that but, what I did was I effectively. Created. Some. Very lightweight code. That's platform-specific, and then, I built using platform, channels which is how flutter, can communicate, with, the the. System's to, make that happen so. What. I'm going to do is I'm going to test this out and I have a phone number. Which. Is Chris's so you can take it down and ring him. You. Clearly didn't get the text from that night, and. So we, are going to try this out. Okay. So now. Hundreds. Of my new closest, friends can feel free to call me whatever you like maybe. At 2:00 in the morning you've, got a burning flutter, question. Hey. Chris how do I make this work and, this. Is a American. Phone with a UK SIM sitting, in Spain so it takes a few seconds to go through. Did. I get your number right. Hello. Mobile, World Congress. There. We go I think that's working excellent. And there we go so there you go so that was a dialer, in flutter mostly. Written from scratch with a few bits and pieces in, 16. Minutes and 52. Seconds, thank you very much Matt. So. It. Was experiences. Like that that. Made me excited, about flutter I've only been on the flutter team for about three, months and it. Was actually sitting down and writing flutter code and actually experiencing. Exactly the kinds, of things, Matt was showing for myself building my own custom apps getting, up to speed quickly being. Able to use hot reload being, able to actually write a single, hunk. Of source code and have, it go across, multiple. Platforms that, that's, my real experiences, and I called. Up the team and they they, had a spot for me and now I work, for flutter I mean that, that was pretty great for me so. I was, explaining, all of this to another friend of mine a, software, engineer at another large, software. Company and. And. I was telling him how great this was and, I could write my code once and, have it work across multiple platforms. Android. And iOS and, he, looked at me and he said. Isn't. That a solved, problem. Can't. You already do that and and. I, said well, well, sure and there's two main ways to do this right. You can, write. Two apps, you can have two teams and write two apps one from Android one, from iOS and, that. Gives. You the. Good. Chance at good performance, and it gives you access to the native api's. But. You. Have two teams and you have two code bases and, it's easy for the features to get out of sync and for, the branding, to get out of sync and over, time and we hear this from our customers. The apps get out of sync with each other okay, that actually happens.

The. Other way of do it of course is there. Are existing. Cross-platform. Frameworks. Right you can write your code often, in JavaScript. And HTML, and. CSS and, those are easy technologies. A lot of us are familiar with those style of technologies, we can pick those up but. When. You do that and you actually deploy, to production environments. You. Have some problems, when you're trying to maintain. 60. Frames per second with tearing, or scrolling. Or. Garbage. Collection, or jank, or Animation, problems, you, have these problems and so. The idea of flutter is that. It is meant to be the best of both to. Take the, native, performance and quality and. The. High velocity developer. Experience, and, combine. That with the ability to get to multiple. Platforms okay. And so. We're. Gonna talk about how flutter, enables, that right. How flutter, as a modern, UI framework, makes this happen we're gonna start with talking about its, architecture. We're, gonna talk about, what. It means to be declarative, and composable. And reactive, we're, gonna talk about how it works well across multiple platforms so, the rich ecosystem. How, it has first-class, tooling. And community, support and we're, also going to talk about. Its. Open source nature and, the benefits, you get as developers. Using. Open source okay that's, what we're gonna talk about so. Of. Course. Any. Architecture. We want we. Want it to be layered we don't want it to be intermixed, we want it to be easy if there's, anything, that we want to do to extend, flutter. Either. On top by building our apps or in, in the middle by forking, it or adding, functionality, and in between that, you can do that okay. So at the bottom of, the architecture, is the. Engine, and this is built in. C++. Code Cement to be the fastest, possible thing it can be so. It's built, low. At the low level to do drawing, and the level rendering. And, we also have the dart runtime, and, jitter at that bottom level okay, now, on top of that everything. Else is built, with dart okay. When, Matt was actually, digging through and saying hey you know I I looked up this source code in Visual Studio code, for, one of the core, flutter widgets, he, was showing you the actual source, code okay. The the source code that's available on github, and you can take a look at and it's heavily commented, with, documentation, so you can understand, and extend, it whatever, you want and so. Those are kinds of things like animation, and rendering and. Widgets and our set, of components, and we'll talk more about those in in a minute on top of that, there's. A set of plugins. And packages, and those. Could be written in pure dart or, it could be a mix of dart, and Java. Mix, of darting Kotlin, mix, of dart, java and iOS. Code, Swift or, objective-c, the. Idea being that you can have these plugins. That. Have the native code in them with, a dart API. So that you can add them to your app and call, them from your app and not. Have to worry about the native code, and we have a rich ecosystem we'll, talk about that in a minute okay. On, the, side we have a number of tools matt, mentioned. Visual. Studio code that's his preference well we also have Android, studio and IntelliJ, support, deep, integration, with all three of those IDE s you. Saw the dart dev tools which is brand-new, for flutter 1.2, we. Also have a full range of command. Line tools as. Well as, at. Its core if you're running dart you're running an analysis, server and this is what provides the language services across all of these, IDE. S and. Then we also have a, head. Of time compiler, and you might be wondering, what. Possible, use could we have for a just-in-time. Compiler. And in. Ahead of time compiler. Why do we have both, we. Have both so. We get the best of both worlds, while, Matt was writing his code he, was running a development, built, he was running in, a dart VM using, the just income time compiler, so that when, he was making changes, in pressing the Save button those.

Changes, Were sent over the distant time compiler, and they were just. In time compiled so that's why you get that sub. Second reload. With. The state intact. However. When. You want the fastest, possible speed. In. A native environment. You. Don't want a VM in the way, what. You want is native, code and so that's what the head of time compiler. Provides. When, you target. Android. And iOS specifically. That's, what you get the performance, no, matter which way you go, you. Are going to get. Optimized. Runtime, for building client you ice flutter. Builds. A ton, of objects. Every time you make a change and we'll see how this works when, you make a change. That causes a rerender. You're gonna get a new subtree, widgets. That's. A set of objects if it's a big subtree it'll be a big, set of objects and if it's you're doing this 60 frames, a second it'll be a lot of objects, being created, and destroyed dart, is optimized, for that dart. Is a platform, and as a language is optimized. For building. Client-side. UI, okay. Great. Now. When. It comes to features, of a modern UI framework, first. And foremost we want something to be declarative, this. Is something we have from the web, traditionally. Before the web when we wanted to say. Lay out something, like what we have on the right there we'd, say okay we have a image. And it starts in the upper left and it has a certain amount of width and it has a certain height and then the thing that comes under it we offset it and we layout that and we calculate, all those numbers we lay it out ourselves. That's. Not how I want to spend my day okay. Well. The declarative. Layout what you do is you say hey I've, got a parent. Widget and I've got some child, widgets and I'll tell you how much space they need and what their layout constraints, are and then, you figure it out right. That's what we want from flutter we flutter to figure it out so we declare, our intent, and flutter. Does all of that offsets, in all those positions for, us. So. Here's an example of code, that Matt. Was showing right start, at the top work, your way down here, we've got some custom, widgets, were in the middle of creating that, each one can easily map, which. Is a set of things happening, on the right okay, you, can look at your UI and write, the code. All. Right. Now. Matt said hey everything is widgets he spent all this time, bringing. In widgets he wanted a row here a column there okay. We. Have, architected. Flutter. To. Have a large, number of small. Widgets. Those. Small widgets are easy, to understand, and easy. To compose. From. In different, ways that we've never thought of okay, what, would they do is, they make it easy for you, to combine. Them in ways that you need to make your app work and it, encourages. Both. You and third parties, that you get widgets. From to. Build small. Composable. Reusable. Widgets that, make it easy to understand, and easy to reuse okay. That's. How we've architected it. Alright. I see, we have a hand raised for a question which is good I'd like to inspire questions, we. Are going to have a panel, afterwards, where we're going to answer all those questions. All. Right. And. Again, this, idea of which is all the way down you, might have seen these words on us, my slides, earlier the. Difference between material and Cupertino, we, have two main family. Of widgets that are. Styled, for, material, design or, for. The iOS, Apple. Design language which we call Cupertino. It's. The set of widgets, that. Look and feel like material. Widgets or iOS, widgets, okay you, can mix and match them they work just fine together you can decide that you want your, flutter app to look like, one or the other depending, what a platform it happens to be running on you, can decide and this is what we haven't see a lot of our customers deciding.

That, We want our app to, have its own unique look. And feel a branded, look that. Looks the same and works, the same across. Multiple platforms okay. Doesn't. Matter all, fully. Themed oval you saw saw. How easy it was for Matt. To, add. Shadows. Or change colors, or add gradients. Or change a box to an underline change, the icons it's all that easy you. Left full control you, can make it look exactly how you want it to look. We. Also want it to be reactive, modern, UI frameworks, are reactive, well what does that mean. The. Idea of a reactive, framework. Is, sometimes. Your your widgets are stateless. They. Are completely, composed, by the parameters. That come in okay. Sometimes. However parameters. Have state matt. Showed this when he showed that that. His. His. Number box had, stayed in it right, he was showing what the current number was right as the as the user dialed okay. When. That's when, widget. Has state. And. That. State changes. The. Widget needs to update the view, of its self. But. It doesn't, go and say okay draw, or. It doesn't do what the old-style. UI frameworks, used to do which is oh you, know this, part, of my UI is now, invalid. Wait for some kind of a message and, paint that rectangle, we, don't do any of that all. We, do, when. We're going to change, some. State, for, example here. We've got a like button and, we've. Got is that button currently liked or not and. Then. When we have, our build method which it provides this widget, of components. That make up this button, when. We set the color is it, light red. Or white, okay. We just use this date to, compose, how. That widget looks. Now. When the user clicks, on that control. We. Want to change whatever, it was to not, be to be the other thing but we want to do it in this side this set state and set, state is a. Signal. To flutter, that. The state. Associated. With this widget has changed, and so. It gathers up all of the set state. Notifications. And it's synchronized to make sure that it's drawing as fast as it can so it bundles. Some of them up together as. Much as it can and then it goes to the widgets and say oh you understand. You have a new layout, and it calls, the, build method and, then. The widget just says oh well here's what my layout is, that. Means that you as with it widget. Author, only. Have to worry about this state both. Of the static, state that came in when. You were built as parameters, and the dynamic, state that can change during the lifetime of the widget and use. That to figure out. What. Your wish it looks like you. Don't have to worry about is this, the first time this widget is called is this, the second time when I have to make minimal updates and the, reason you don't have to do that is because. Flutter, when, it reacts to, the set state call will. Gather up what you give it in the build method and then. Compare, it to what's already on the screen and come. Up with the smallest, possible, Delta. To, make the change. That's. How you achieve, that. Fast, redraw, right that 60, frames a second okay. Because. Flutter is aware of what's going on and it does all that heavy lifting and you just have to say in. This state here's, what my component, looks like and flutter. Will will. React to that okay. Great. So. What. Does it mean to be multi-platform. Well we. Know today that flutter, supports. Out-of-the-box. As of December, in production. Release. Android. And iOS how, does it do that it does, it with, something called the embedding, API the. Idea is that most, of flutter is completely. Agnostic to. The platform, it's running on but, at the very bottom level there. Has to be a mapping that says oh I want to draw a pixel on the screen that. Happens, differently on Android, versus iOS versus. Something else okay. Plus. Oh there's, an event right. Somebody. Touched something or somebody moved Mouse or clicked, on a keyboard right those, kinds, of things are platforms, specific. So. There has to be a mapping, that mapping, is called the embedded API what. We've done at the Fleur team is. Provide. Implementations. For both Android, and iOS we're. Also experimenting. With. Implementations. For desktop, for Windows and Mac and, Linux and we're. Experimenting, with. Implementations. For the web, with. The idea that if. You. Had those you, could just say I've got my flutter code and I want to target it at whatever. Embedding. API I, happen, to care about, okay. Or. Whatever implementation. As one. Example one. One. Member of the flutter community, happened, to really like raspberry, PI's so they built an. Embedded, API implementation. For the Raspberry Pi if. You want to take your flutter app and point, it at a Raspberry Pi today. You can do that right. You don't have to wait for Google to implement that embedding API you can do it yourselves, okay. Great. So that's one way we support multi, platforms, another.

Way We support multi, platforms, is once your app is running, you. Need to be able to call, api's. Sometimes. When. Matt was. Making his dialer, he. Had a nice little dial button in the. Background, that dial button had, to do different. Things based on whether it was running in android whether it was running an iOS because, how you dial, there's just different code and, you bind to different libraries right that's just how that goes okay, the, way we do that in flutter is we do something called a platformer, channel the. Idea of a platformer, channel is this, is your dart code that. Sends, a message to. Some listener, and that. Listener, is going to change based, on whether you're running on Android or iOS if, you're running on Android it's, the Android listener and it will take that message and call. The right native API and package up the response and send it back if, it, happens to be running on iOS you'll, have the iOS listener, and it will do the same okay. Whenever you want to get to the native api's on whatever, platform you want to target you, can do so via. Platform. Channels okay. Now. That, platform, channel idea, has. Led to a whole. Ecosystem. Of, plugins. Because. Of the idea of a plug-in, is. Dart. Code plus. Platform. Specific code for one or more platforms, okay. A package. A regular old dart package is just dart code right, but. A plug-in, is a. Flutter, piece, of flutter code that can target the, native platform using, those platforms channels, and so, if you want to write that native code you can but, if you don't want to you, can just go to that URL right, there and type in a search word and see. If one of the 1,400. Components, that's already there serves. Your needs and, the. Flutter team has put a bunch up there and other, members, of Google have put a bunch there and there's some great ones from, the flutter community, and Square, has, built one and. Firebase. Has built one a couple. Of new ones that are pretty popular the. Webview being able to host a browser inside, your android or iOS app, or maps. Okay. The. Things you would expect from Google are up. In that list okay. Great. So. What, about tooling. What, about the community, itself. Well. As Matt, mentioned we, support Android studio and, IntelliJ, and vyas code it used to be before today, that. Android studio and IntelliJ, got a little, more love that. Cool inspect, your code that, Matt was showing that, only ran inside. Of Android studio and IntelliJ, but as of today with, the flutter 1.1, or 1.2, release we've. Made it available as a separate standalone application. So, that if you happen to be using Visual Studio code, we've. Integrated that, it. Works just fine or if, you want to use it from the command line you can do it that way as well so you can use whatever editors, whatever IDE your. Little heart desires we. Support them all okay. We. Also saw Martin showing. Off code. Magic I'm a big fan right. Being able to it's, so, amazing. Being able to to, make a change, to your github, and then BOOM magic, happens right that's. Where that term comes from, excellent. All, right. Also. If you haven't seen flair by two dimensions, this, is a standalone, animation. Tool where. You can build animation, since the timelines, and watch things go and tweak, things and bring in your graphics at all the things that you expect. Your designers to do with their animation, tools but. Then you, save the file and. You pull it up and, your flutter code and. You have these interactive, experiences, in, your flutter code, okay.

All. Right. As, I, mentioned we have the. IDE s but if you don't like the IDE s you can feel free to use the terminal all that functionality is, available. From the command line we we, like everyone on the floater team. As. I. Mentioned also flutter. Is open-source fully open source all the stuff that whole architecture. All the stuff I showed you on there it's, all open source feel free we have. Hundreds. Of contributors. Lots. Of which make, significant. Contributions. In fact. Several. Of the features that were announcing today in flutter 1.2 come directly from third-party. Contributors, not just the flirty okay, and, in. Terms of momentum, we've. Shipped, the one OH as I mentioned in December. We've. Already doubled, the number almost doubled the number of developers, in that time, in ten weeks it, has been amazing, to watch the growth of the number of developers sunflower, we've. Seen a 40, percent increase in the number of. Plugins. Flutter, specific. Packages. And plugins we're, in the top 20. Now. On github when it comes to stars we're, right nestled, nicely between node and go which. Is a pretty nice place to be for, a pretty. Young project, I won't, say which which, one were ahead of I'll, let you look that up. Thousands. Of apps in in both app stores and great. Community, support if, you want to get started. Reddit. Stack overflow. The. Chat, apps that you might like right. Where. You want to ask questions where you want to get questions answered all of that flutter. Dev slash community, it's a fabulous place to start as well as start. Flutter calm Florida, Institute online. Training, that you can just use. Right today to learn flutter, it'll take they'll take you step-by-step through, what, it takes to be a flutter developer. And. Of course I mentioned, open. Source and. Not. Just open source but open source with, frequent, updates, and. Of course I mentioned. A couple of times, flutter 1.2. Which comes with a, number. Of framework features including. Animation. Easing, functions, and Android app bundle support, and as I mentioned those, are from third parties those. Don't come from the Fluttershy okay. Two big features, new. Cooper Cupertino. Theme that gives you even more control, and. Keyboard. And mouse input as we expand, flutters, reach for, example, to, building. Great. Tablet. Apps or, great Chrome, OS apps where, a mouse and keyboard is a part, of the input and not just touch we're. Building, that right into the core aflutter and, we've got more work to do there we're doing a number of localizations, and from the tooling side. Matt. Already mentioned dart, Ted tools we are adding support for Java. 1.8. And. We've done a bunch, of studies in terms of error messages, we've. Found that with a little bit of user, experience, research we've got an amazing UX. Team by the way on. Flutter, that. If we can change the format, and the text, of the exact, same error messages, you already, get we. Can make you something like 50% more. Effective, in terms of actually being able to act on those error messages and fix them that's. Amazing, so, we are pushing, than that and we're gonna continue to push on that if we can make you more productive in any way that's what we're gonna do. Okay. And let me show you another couple of others you. Saw dart dev tools. Here's. Another one we've. Noticed. That a lot of folks like, the samples. That come with flutter but. The way we've got them arranged right now they're kind of embedded inside the, flutter. Repo. Itself and that's great for us because it makes sure that when we change things if there's, problems, and breaking changes we see them in the sample so we want to keep it that way but, it also makes it hard to extract, if that's all you want is one sample as opposed to the, entire flutter.

Source Code base so now. We've made it so both within visual studio code and Android studio IntelliJ, you can just created create, a new problem you can pick which sample you like and base your work on that, sample it's great for just. Looking at the sample and learning flutter it's a great basse. Recommended. Another. One, remember, I said hey we like all the developers. Of all kinds, we, want to support all itës, how many how. Many VI. Vim programmers. Who are in the room vim users, couple. Oh oh, let, me ask the other question, you. Max oh. I. Don't. Want to start a riot. Right. And. Not. Everyone raised their hand is not everyone, using either vim or Emacs are, you using something different I. Assume. Yes one person is using something different excellent thank you very much thank, you very much sir anyway, for those of you who like film. Or other. Editors. Besides. IntelliJ. Android. Studio or, Visual, Studio we're. Actually releasing an alpha, of a language, server protocol, implementation. In, this. Release so that you can plug it into, your. Existing editors, even if we don't support them directly with all that functionality, if. You want to and. In this particular case, we. Happen to be reflecting, an error message of some dead code but, we can do. Warnings. And, finding. Definitions. And references, and refactoring. Or renaming, and all of the goodness that LSP, provides right the idea being we want flutter to be everywhere, and that includes, developer, tool support. If. I have excited, you about, flutter as much as I am excited about flutter I would. Like to direct you to flutter, dev, slash create, the. Flutter team's first, coding, contest, the. Goal is how cool. And, you, be in, five. Kilobytes, of dart code or less. Okay. And. If. You want to you know remove the comments, and you know use, really short variable names I won't complain right feel free okay. So. Check that out the flutter create challenge I think the top prize is a. Monster. Mack. Like, desktop huge, Mac with a big with, a big monitor and all the trimmings so if. You're excited about flutter I I definitely recommend this that's. What I had to say about flutter, as always, flutter. Dev is the place to start and thank you very much for your time.

2019-03-15 12:56

Other news