Thank. You thank you so much it's, just, great, to be here for, flutter interacts, this year whether, you're here in person here. In Brooklyn whether you're attending one, of the over 500. Viewing. Parties, around the world from leg off to instant Istanbul, whether, you're watching on the livestream or. Whether you're catching the highlights on YouTube welcome, our. Goal, for this year's event is to, highlight the creative. Expressivity. Of, flutter as a platform, for. Interactive. Content, we. Want to give you a sense today of the range of capabilities, as a tool for, designers. For, developers, for creative, coders whatever. You call yourself if you. Care about building, beautiful. Native. Experiences. For, any device that paints pixels to the screen we. Want flutter to, be a canvas, for you. So. We're gonna start by talking about our vision for flutter. We. Shipped our first, release of flutter a year, ago almost, of the day and that. First release focused exclusively on, mobile, devices on, building. Apps with a single, codebase that run on iOS and Android. But. Today we're focusing on a more complete, vision for flutter as a portable. Multi. Platform SDK for. Pretty much anywhere. You might want to paint pixels on the screen and that. Portability. Of platform, is ever, more important, you. Know we. Live in a world where Internet, connected, devices are pervading, every area of our lives many. Of us transition, throughout the day between multiple, devices phones. Watches. And other wearable devices tablets. Desktops. Or, laptop computers. Televisions. And increasingly smart. Displays like the Google Nest hub and, so. In this emerging, world the focus starts to move away from any single, individual. Device towards. An environment. Where your services, and software are, available wherever, you need them. As. Matias has mentioned we call this an, the int computing. And this. Is the world we built flutter, for, flutter. Is the, first, UI, platform, that is designed, for this ambient. Computing world and this. Vision is unique. To flutter a portable. Toolkit for, building beautiful, native. Experiences. Wherever. You might want to paint pixels on the screen. So. With flutter instead, of being forced to start your application development. By asking where, do, you want your app to run and having, to start a team and, skills. And, everything else starting. With that question we. Want you to be able to begin with. A different, question we, want you to be able to focus on what. You, want to be able to build and in. This multi device multi, platform world flutter, is providing, you with a framework and tooling, for creating. User experiences. Without compromise. On. Any device or form factor. You. Know we want you to be able to start with your creative, vision and make the decision on your target platform later we. Want you to be able to solve, problems for all your users not. Just those who happen to have the same device that you have and we. Want you to be able to build beautiful, tailored, user, experiences. And user interfaces, not, just the boilerplate UI, that matches someone, else's, design system. Buffa. Is designed, for beautiful. Applications. Giving you control over every pixel on the screen it's. Fast, we're. Powered by the blazing, fast skier, graphics, engine the same one that we use in Android, and chrome and it's.
Productive With, features including stateful. Hot reload that let you make changes, to your running app and see the results in real time, it's. Open, with, a bsd-style, license. That encourages, forking. And, experimentation. And an, ecosystem of thousands. Of packages covering. Everything from firebase. To, google fonts to, bluetooth, to, sequel lights and so. That is flutter, beautiful. Fast, productive. And open. The. First UI platform, designed, for, delivering, tailored, experiences, in an ambient, computing, world. It's. Been great to see how FAR's flourished in the, short. Time since its initial release. Already. Well over a million, developers. Are using, flutter for, apps both large and small and. We've. Seen billions, of installs, of flutter apps to date. Last. Month github, published. Their state of the October's report and as. The largest site for open source of course they have unique insights, into the open source community and. Trends. Amongst adoption and we. Were surprised and delighted to see flutter be, the number, two fastest. Growing open, source project, on the site having, tripled, in size across, the last year and also, sees to see the darhk's language that powers flutter be, the single, fastest. Growing language that, they measure. And, that popularity, is also visual visible, in this list of get hubs most starred projects, last, year we were proud that fatha was one of the top 40, projects and, this year it's one of the top ten you. Know, even at Google starting, an open-source, project from scratch is a risky. Endeavor and, a bit of a risky career bet so, this, is just our chance to thank you for your support. And interest we don't, take it for granted and, we continue. To work every day to, try and build a better project for you thank you so much. So. The, rest of this, morning of this session, is, divided. Into two main chapters. Firstly. We're going to start with our progress on bringing flutter to more platforms this, ambient, computing, vision. And. Then secondly, we're, going to talk about the work that we've done to make flutter a canvas, for, creative, expression, unlocking. Designers. And developers to, build whatever experiences. They have in mind, so. Let's start with the first of these two flutter, on every. Screen. And. Today. In our journey towards, flutter delivering, on that ambient, computing vision we've described we're focusing on three core, form factors, that make up the bulk of our work today mobile. Desktop, and web and. Up. Till now as I've mentioned many people have thought of flutter as a mobile framework so we're going to start there and then we'll, expand out. Today. I'm pleased to announce the immediate, availability of, flutter 112. A latest. Stable release of the fuzzy framework. Vatsa. 112 includes, over 1500. Pull requests, representing. The work of hundreds, of contributors both from inside and, outside of Google and. There. Are many more new features than I can do justice to in a short while but a few highlights we, have dark, mode full dark mode for iOS including. All the new acrylic materials. And the adaptive, colors the beautiful work that apples done around. Dark mode, we. Have new widgets. That helped deliver pixel-perfect, experiences. On iPhone. And iPad. We're. Transitioning, to the new Android, X supports, libraries, on. Android. We've. Upgraded. Supports. For ads to app enabling, you to take flutter and embed it in an existing, app. Including. Things like pre loading the engine for faster startup. We've. Got the new Google Fonts package that Matthias mentioned for easy access to nearly a thousand, open-source, fonts and.
A. New flutter, gallery, that, makes it easier, than ever to try out all the new widgets and experiences. And. We've got so much to talk about today that, that is all I'm gonna say about flutter ones for health itself. This. Is live it's rolling out now for download at, flutter dev. So. When it comes to building apps we, have the, same needs that you do ourselves. At Google our own, product, teams of course have all these same challenges, how to deliver apps to all of these different places and in, fact Google is using flutter in over. 20 different projects. At Google from, adds to. The Google Nest hub to. Various startup projects. One. Of Google's newest, and most innovative, consumer. Products is stadia. Which, brings the most powerful. Cloud powered, gaming experiences, directly into your living room. Core. Stadia needed UI experience, that matched gamers expectations. So to tell you a little bit more about how they built their mobile, companion, app I want to invite, Roberto's. Kara moot see who's the technical, lead for the stadia UI team roberto. Thank. You Tim. My. Name is Roberto, and I, work on the stadia, front end. So. For. The few people in the audience who don't know what stadia is it's. A new gaming platform, that. That. Google launched just a few weeks ago our aim, is to enable everyone to play anywhere, anytime. So. Where. Does flutter come into this we. Want to build a companion, mobile app for stadia it. Would help gamers, set. Up their accounts in hardware and provide, a game store and social features. We. Wanted, to. Support. Unified. Branding, capabilities, on both. Android, and iOS. The. UI should be modern and cool to match the gaming culture and be. Performant, to match the high standards, for quality and latency that we had set ourselves for the games themselves, most. Importantly. We, were working with the tight deadlines the. Release date had already been announced so. We, started with a small team and we, ramped up fast and. Let. Me show you what we built with flutter in just a few months. So. So. I talked about setting. Up hardware this is these are the screens that they. Allow. You to set. Up your game, controller. You. Know connecting, to Wi-Fi and, so on. Look. At the cool animations, we built with flutter. Okay. This is our home screen it. Shows the games that, that you already own. This, is the store. This, is the game details page for an. Exclusive game that woman killed Devon we have on stadia. This. Is our friends page and, search. Okay. I'm back to the home page so. What, happened. First. Of all we delivered on schedule which. Is awesome. One. Of our concerns was that we had to interact with a lot of native services, so we had to interact with game controllers, with, Bluetooth with firebase and. We, had a few concerns about that but actually the interaction went super, smoothly.
As. I. Said before we want to build a platform that everyone can play on and we. Launched in 14 countries almost as many languages and. Flutters. Capabilities. Made, building, and accessibility. For, disabled. Gamers. Into. Much of the app. And. Most. Of all everybody's. Happy. We. Very, much hope our users are happy but. Also the, developers, are happy, because. Of the of. The development, cycle. Because. Of the platform, and UX. Some product are happy because, they see their vision come to life. Thank. You. Thank. You so much Roberto, that is so cool I'm really thrilled, that stadia, chose flutter, of. Course many companies. Outside, Google are also using flutter for their app development, and. If. We move to the next slide one. Example that we're calling out today is eBay. Wait. But so we may have some eBay as an ass, this. Week they launched their brand new app for car enthusiasts. And eBay. Built this app from, scratch using, flutter, we're thrilled to have you be onboard. And. Another recently, released, example, of flutter on mobile devices comes, from splice. Splice. Offer an audio library of millions, of sounds, loops and, presets, that help, musicians bring, their ideas to life and so here to tell you a little bit about that is their principal engineer Angelina. Favreau, welcome. Angelina. Hello. Brooklyn, hello, everybody on the live stream. I'm. Angelina, Favreau and I am a principal engineer at splice. I'm, also the technical lead on our mobile applications, team and I'm here today to tell you the story of how we built our new mobile app using, flutter. So. What is splice well imagine, that you're a musician or, a music producer and you're working on your next bangin track or perhaps you're. In a project where you've been given a very very specific creative. Brief and, you're looking for the exact right sound, to fit the feeling, or the mood or what your client is looking for so, splice has a giant, library of Rights cleared samples, bits, and pieces of music that you can use in your track everything. From drum, loops to, piano chords. Trumpet, licks sound effects like laser zaps even. The sound of London in the rain so. We have sounds and ideas from thousands, of well-known artists as well such as Steve Aoki and deadmau5, splice.
Helps You find the right sounds, when you need it so you can stay in the creative flow and finish your track. But. Why build, a mobile application for. A process that for most music producers, is primarily, a desktop, first experience. Well, think of the experience, on mobile for for musicians a little bit like, photo filtering, apps on your phone right like you might take some photos you, swipe through the filters that looks kind of cool and you experiment, you get some ideas, and inspiration, but. The real photography. Work for you happens, later, when, you're at your desktop so, we had a hypothesis. It would be useful for you to build your library of sounds on the go so, that you could use them later now. To, validate, this hypothesis, we chose to build our mobile application and flutter after. Trying it we fell in love with the developer experience for, us separate, iOS and Android teams, was going to be a non-starter, the speed to validate hypothesis, was critical, we're, excited by the technology and especially by the promise of native performance deployed. From one code base across, multiple platforms and, since, splice really, is a multi-platform, experience. We're investigating, it for use on the desktop, in our desktop application, in the future so, let's take a look at the app. All. Right so. What. We're looking at here is the splice home and. At. The very top you can see recent, releases these. Cards, that I'm scrolling through our sample, packs and you can think of a sample pack kind of like an album of samples, below. That we've got our top, packs that's the stuff that is most popular right now in splice and below that we have a selection of content, that's been curated, for me today. So. What, am I feeling, like let's take a look at this dancehall pack. All. Right all right that's laps let's. Suck on the download button and add that to my splice library, maybe, one, more how. About some steel drums. Okay. All right. But. You know what I woke. Up in a whole mood this morning I I want. To look for a sound that captures, that mood I was watching the end of evangelion, recently. So I've been watching some anime and. I'm looking for a sound today that is really going to capture the feeling of a slide, transition or. A segment, change in the keynote presentation. So, let's go / - let's go over to slice search. Mmm. And I want something cartoonish, yes let's look for anime. Shimmer. See. What we got. Okay. There's a lot of results what about this one. That's. Pretty fun but that's a little more melodic I want I want something that's percussive. So. What. About. That's. The one that's, the one right there so what I'm gonna do is I'm gonna have the download button again and as mentioned that puts it into the, splice library, and what I end up with is this giant. List here showing all my recently, added sounds what's. Fantastic about, this though is that as I download them on my mobile they're there for me when I end up at the desktop application. Everything. Syncs automatically, so that when I'm in the flow making music splice, is right there with me. All. Right. So. What, did we learn from all of this well we learned that our hypothesis, is actually a really good one. The mobile application has, been officially launched, for about a month and it's already driving a really significant, amount of downloads for across, all of our surfaces, we. Know that the flutter community is really awesome whenever. We had a problem or a question you know the, developers on this project self included this was our first time using flutter, community.
Was Super supportive to help us answer questions and so was Google as a partner, you know, my conclusion, here really is that flutter is incredibly. Powerful we're excited about its future and especially, about building the next generation of features for the splice mobile app thank. You. Thank, you so much Angelina okay. So that's a quick rundown of flutter 112. We're. Now going to shift gears and, start talking about butter on desktop, and web and we'll, start with desktop, we. Made a lot of progress on the desktop with, growing supports, for Windows, Linux, and, Mac OS. Supporting. Desktop, apps requires working three, core, areas. Firstly. We have to build the tool chain and the, host support to. Enable execution. Of flutter from a new operating system. Secondly. We have to expose, new, input. Mechanisms. Like keyboards and. Mouse pointers, and buttons that simply, don't exist on a phone and we have to make those available, to. The operating system or to flutter and then. Thirdly we. Have to do some UI work to enable, apps that, have. A. Desktop. Feeling. To. Have that look and feel so that they express. The desktop environment. Things like resizing. And. Different interaction, patterns, so. Today, we're, pleased, to announce that the desktop support has reached alpha, quality for, Mac OS and is now available as part of the dev Channel. So. For the first time now you, can use release, mode to, build a fully optimized. Mac OS application. Using flutter so, an adventuress developer could now share a complete, production, speed, executable. With others. So. That's the desktop the. Web is even, harder, in some ways because of its incredible. Ubiquity. And its support across mobile, and desktop browsers. But. We've seen tremendous interest. In seeing flutter produce. Web output, particularly. Since we shared our preview release at Google i/o this, year. So. When you target the, web with flutter you. Don't have, to learn a new set, of skills you. Don't have to fork your code into something that's, slightly. Different, whether. You're targeting mobile desktop. Or web you're using exactly. The same flutter. Framework, library you're, not using a fork you're not using a different version you, don't have to worry about differences, between the platforms it's the same code. And. The. Magic, is that because the dart language that, powers, flutter was, built with the web in mind from the outset, so you can, compile. Exactly. Your, same, code to, both arm for, mobile and, JavaScript. For the web and. Rather. Than shipping as a plugin flosser. Uses exactly. The same HTML. Components. As any, other, web, app so for, example a text input fields, that has the same, password. Manager, clipboard. Cursor, emoji, support all of those things appear, because it's just the same as any other HTML, input, class. So. Again. What you get is all, the power and, the productivity, of flutter combined. With the compatibility. And the openness. Of the web. So. Today we're. Proud to announce that our web support has hit the beta milestone, and is ready for active, development. Now. We're, still working on a few things we've got a little bit of performance work, to do a bit more browser compatibility. A little, bit of desktop, accessibility. To do among, a few other areas but, we're ready for you to give it a try, for a whole variety of, different course inari O's from things, like islands, of interactive, content, to, companion. Web experiences, where you've already built your mobile. App and you want to just make it available as a web experience, I. Want. To show you a quick demo if my machines working but before we, do I want to introduce one. Of the tools that support web, development, with flutter. Rive. Is, a designer, for, animated. Content, it's, from a company that used to be called two dimensions they've relaunched, themselves they brought their existing. Flair application. And rebranded, it as rive and they've. In continued, to invest. In it and grow it and. It's, available now at rive dot app and so. We've been using rive and experimenting. With a new canvas, kit based backend to, see what, could we do if, we combine the. Combination, of Rive, and, flutters. Web, support so. It will just sign, into this machine that seems to have gone to sleep and load. The demo. One more time let's see if this is up and running for me yes jolly good so, this is a little.
Example. That the rive team built for us which. We're calling - demo, and. The. Idea of - demo is again just to try and push you, know this web support and see what kind of things could, we do with it so you might just recognize this little -. Mascots. And. Here he is or, here she is we've never been too clear. And. I'm. Going to move the, bird around one, of things that's really interesting to see here it's hard to see on this everything, you're seeing here is a different, rive object, and so at, the background, here you've got textures, and waterfalls, everything. Is has, some, notion of z-index. So, you can see that, -. Moves behind the menus. And all of this. We integrated, here if I slow down the speed for a moment and, pull, -, across a little bit you can see just a few of the little things that are going on this a whole, variety of layers, of animation. Being built into one, - bird here there's kinda like the wobble, as the bird moves up and down the eyes follow, and track where. I've clicked the mouse you. Can see you know the the feet are moving around there's all kinds of crazy things happening here so. We'll just I'm, bummed, that up a little bit back in terms of speed and. We thought we'll add a few more dashes, to the screen and have. Them all kind of wander around the. Space together and it's kind of fun just to see them all kind of hopping around here. And. Then we thought well let's sort of see how far we can push this so we thought we'd had a few more and, you. Can see they're kind of hovering, on every, single one of these is in an individual. Rive objective, those, layers of animation, and things going on and. They kind of look at you a little bit like the Mona Lisa I'm never quite sure whether. This is good or bad when they stare at me like that but there you can see them all kind of moving around and, I can sort of bump the speed up and. Let's sort of stick that to two times speed and close, that down again and have them all running, around screen it's just beautiful, the way that you. Can use these same tools creative. Visual, tools to, build an experience like this where the the. Creatures just move around and a, lot of fun anyway that's an, example, of flutter, web using, the canvas. Kit experimental. Back-end powered. By rive. So. Mobile. Desktop. And, web got, it mobile desktop, and, web all available, to you from, a single, flutter, codebase. Part, of our journey towards, this ambient, computing, vision. So. I can't go any further without brief, mention, of dart. Which. Doesn't, just supply our our mascot, but it's also the language that powers, flutter, and dart. Is Google's, language that's optimized. For client, development, and in. Addition to the fast adoption over the last year that I've already talked about we've, been adding new language, support for UI developments. On. This side you can just see a short. List of some of, the new features we've added over the last 12 months and a, lot, of the work that we've done in darts, over this period has been focused, on UI, development, on how do we build a language, that makes you productive, as a developer. Building, beautiful, flutter, experiences. So. Dart also includes a suite of tools, for. Flutter developers, regardless, of which of, the various different devices. You're targeting and so, to show off some, examples, of what dart offers I'd like to invite two of my colleagues Chris, and Zoey to the stage hi. There YouTube, Hey. We've. Been investing, a lot in tooling, over the last year and today, we, have a few new features we like to show off some. Of you may already have experience with flutter but I know we have some future flutter developers, sitting, in the audience today before. Your committee flutter you, will want to give it a try and let's. See how we can let you try flutter without. Installing, anything, on your local machine let's. Try a tool called Darth, head. DARPA. Was initially, created to, let you play with dart but, recently we launched a brand-new version of dart pad that actually uses, flutters web support to, let you play with flutter code in your browser so. To access tar paper you can go to DARPA, dev and. For. Those of you who have seen the previous version of dart pad you may notice we have redesigned the UI to, make a look more modern. Now. Let's go to the samples, drop-down, and, select. A simple sunflower. App just. To show you how it works. Once. You do you, see the app running immediately in your browser for. Example, oh thank, you. As. You. Can see it's a real running flutter app so you can actually interact with it you can go to the app bar to open the drawer closed the drawer you can go to the slider to adjust the size of the sunflower you, can also make code changes let's.
Say We want to change the color of the sunflower from, orange, to blue as. Soon, as Chris makes the change. Let's. See if Chris can actually find that code, yes. And you hit the Run button and you can see that change actually gets updated immediately, so. Dar pad in addition, to the DAR pet playground. We have also embedded, into Learning Resource for. Example if, you go to one of our code labs or documentation, you. Actually see DARPA has now been built into tutorials, so. Now you, can learn thank. You I. Love. The energy from this room. Thank. You so now you can learn the real world flutter, techniques, use nothing, more than a browser and, we hope you find it easy and fun to use well. Now after trying flutter and deciding, that you wanted to use for production you, would want to install, the local tools, so. Another new feature we're announcing today in preview is called hot, UI, hot. UI lets you see the apps UI being, hosted, directly, in your IDE and make changes there let's. Start by loading up Android studio and. What you're seeing here is a ticket app already, running in the emulator and, now. Let's open up the flutter outlined View tab. It's. Adjusting, its resolution for, now but. As you, click in the UI notice, the corresponding, part of the code gets highlighted and. Meanwhile. If you click anywhere in the code the, matching UI gets highlighted as well, and. Moreover you. Can actually make changes in the code and your eye will, be updated, for. Example now Chris is trying to change the color of the. Ticket app once. He makes the change with, the existing, hot reloj feature you can actually see the color gets updated within, less than a second Zoe that green is pretty ugly I agree. With you and I actually don't like it either so, let's see if we can do this better now, this time we go to the hot UI preview, panel and, open. Up the color picker and. Change the color right there. What. Chris is kind of picky so okay do, you like this better now yes yeah. Thank. You as, you. Can see as soon as Chris makes the change your, UI gets changed and also the code gets changed as well so. How do you I let, you directly, connect your code to your UI keeping. Both of them in sync as you change either this. Feature will be available in the Android studio as a preview, for you to try today in, our. Next step, is to integrate it into the dart dev tools in 2020, so, no matter what I do you choose and then. You can actually use it, well. I've been doing a lot of talking so Chris why don't you come over and tell us about the next two new features, great thanks, Ali thank you. Okay. So Zoe just mentioned, a tool car dart, tip tools and dart, dev tools is our standalone. App for, dart. Debugging. Or flutter debugging, and so the idea of dev, tools is it's separate. From any specific editor, so you can choose whatever you like and today, we're proud to announce a brand new preview, of dev, tools which you're looking at here and we're very proud of this because we've. Actually rebuilt, dev, tools from the ground up in flutter, itself. So. What has that has done is given us the ability to implement some fun cool new, features and so we've actually implemented, a new debugging, surface here. In dev, tools using flutter that, enables, us to find one of the most common, problems. That you'll find when you're debugging. Flutter. App settings so Zoe if you could show. There. We go I think we've got here a layout, overflow, error which is very common, any flutter, developer, in here has probably seen this already we've, got this you, know construction. Zone police, line do not cross kind. Of UI that, makes it very easy to see that you have an error but we haven't done a very good job in helping you figure out why you have that error or what, to do to fix it so, Zoe. Let's see if we can use this new version of dev tools to. Fix this problem so what's always done is she's selected, the. Component, and by, the way it turns out that the default view we had had all the information you, needed to. Be able to find this problem. However. You might have a trouble seeing it unless, perhaps you all live in the matrix. For. Those of you who live in the real world we, have, another. Feature we call the layout Explorer, and. The idea what the layout Explorer, is it helps you visualize your.
Layout, Using. Important, properties, like width, and height and flex, and alignment, so that you can actually see, what's going on in your UI and why, it's acting like it's acting now, one of the things that the layout Explorer does is it looks, for what might be potential. Problems, and highlights. Them so that you can find them more easily and so in this particular case, we, see that the width, of the child content, is much bigger than, the width of the parent and so, the layout Explorer has marked that in red now normally, this wouldn't be a problem but Zoe, I think we might also have a problem with our flex. So. We look at the Flex property, here we see it set to null and so what happens is because it's set to no the parent doesn't know what to do with that extra content, because, it doesn't know that's, why you're seeing that error that is the definition of an, overflow error so, normally. The way we'd fix this is we go to our code and we'd start madly, typing, and, throw in extra code or, remove code and see if we could fix, it magically, and hope that's the right way to do it well the idea what the layout Explorer, is that, you can actually interact with these properties, live, in your tool before. You even get to your code so, Zoe I think this is a flex problem let's set the Flex parameter and see what we get oh, good. It, looks like our problem has been fixed and now, when we go back to our code we have confidence, not, only that we know what code to change but, also what caused the problem in the first place so. The idea, of dart, temp tools is that we are continually, adding new bugging. Services, for, your real-world problems. So, that you can fix, your apps and we. Hope you'll take a look at this new preview, version of dev tools and let, us know what you think ok, great. So. Zoe, at. This point we, have built our app with hot UI and we've. Debugged it but dart tip tools and we made it work great on a single platform but. Flutter. Is multi-platform, right so we want to make sure that we can support. Multiple, platforms, with our single source, code so, I'm pleased to announce that, as. Of today using. Visual Studio codes. Multi-session. Debugging, you can actually debug, both. Ios and android. Simultaneously. So. You might think at this point it would be a reasonable, thing for us to do to. Fire, up Visual Studio code and show you the debugging, those two devices and that. Would be reasonable, but. It would also be boring so. When, we made two, devices work we, thought. How, far can we take this and. We little we went a little crazy so gentlemen if you will i. Give. You the, flutter octopus. Zowie. So. What I'm presenting, here is Mak, Catalina, machine. Running. Again seven. Simultaneous. Targets. That, includes, pixel, book go an. IPhone, s and iPad, pro a pixel. For Excel and an ancient, Android tablet, as well as both, the Windows version or the the, Mac version and the, web version of this at all being, debugged. Simultaneously. From, a single set of source code and each one of these apps. Has their own States so Zoe if you you, know interact just they're. All different apps however. Because they're all being debugged simultaneously. Zoe, let's see what happens when we make a change all right. And. Because, they're all under being, debugged Zoe, go ahead and set a breakpoint whence. We, hit, a breakpoint so. It can trigger that breakpoint, from any one of the devices she chooses and when. She's under, the debugger she has access to the watch window and. Data. Tips and all the services, of the debugger and. So. Notice here let me guess.you, use.
The IPad, pro exactly. And you can see the call sack here for that particular, device, now we don't expect you to go and build your own octopus, or too. Said the bug against, all those devices simultaneously. But. Isn't. It nice to know that flutter. Supports, all those platforms when, you need them. Thank. You very much. Back. To you Jim. Wow. That, is cool the, octopus, I want. One of those my own desk. Thank you again Chris and Zoey. So. That. Brings us to the end of our first chapter, so we've talked about things like stadia. And splice, we've, talked about new investments like web and, great. Tooling. Hopefully. You can see the feathers continuing to grow, but. I but I also want to another thing I said earlier on we want you to start not with what device you're building, on but, what you want to create, so. The, second, thing we're talking about today is how, flutter, can, be a canvas. For your creative, expressivity. What. We. See flutter, as being this canvas because it removes a lot of the restrictions, sort of plagued visually, orientated, developers, and designers in, the past you. Know I think designers, probably. Need something, like these things any good, performance, right. Inspiration. Of course you have to come with your own creative ideas, powerful. Primitives, a platform. That supports the things you need to do fast. Iteration, the ability to be able to kind of make changes, and iterate, in real time and. Visual. Tooling, and, so. That's the kind of environment we want to build and in this second. Chapter we want to lay out some of those tools. And, sources. Of creative, inspiration that, we think will help you build, beautiful. Applications. And in. Doing so one. Of the things that I saw in the run-up that, we saw in the run-up to flutter interact that, really, inspired us was, the work of Robert Felker who is a digital, artist who has. Created a series of generative. Art, expirations. With flutter and, they combine geometry. And texture. And lights, in stunning, ways so. We recorded, a little video with, Roberts and I'd like to play that now. When. I start, a new artwork, it's just, an inspiration. You. Just have a feeling so. Between, the first ID and the, end result there's. Just the same feeling, it's. Not about the visual, I'm not interesting, in what you see I'm interested in what you feel. I'm. Robert my, everyday job I'm a flutter dev and project manager and I'm. Also a floater artists. Previously. I was kind, of locked by, the tool I can do a lot of stuff but, only what the tool permits, me when. I found, the floater it, opened the. Door inside, me now, I can, really push further. Generative. Art is, a lot, of research, like. A lot, it's, a lot of failure, it's a lot of failure finding, the color finding, the form, understanding. The good behavior of light what's. Really good with flutter is, the, speed, of the feedback, it's, nearly instant. Currently. Artists, do not understand, the full potential of the tool when, you start further you start with material. Design or, you start with the, iOS component, and you think this. Is flat but this is just the, tip of the iceberg, or if you want to push then, you start to enter the. Flutter engine, and, the flutter engine, is like the juice of the, corn. Each. Time, I start to cut, I, just. Feel joy, so some. People are painting, so people are cooking I just. Do flutter, and photo in. Robert's. Designs, are now available you can actually buy them as, framed. Artwork, and, I love that you can now have a piece of flutter Arts on. Your. So. We're going to talk about a couple of tools and. To start off with one that if you're a designer you probably, already familiar with and that's supernova, and so, I want to invite jury tread sack to talk, a little bit about what supernovae, are doing with butter Jerry thanks. Him. So. I am a devotee in fact, I've been developer, for the last 20 years and most of that time was spent building beautiful interactive. Web sites and applications. However. There was always this one thing that I really hated it, was, the feeling that designers, create something so amazing only for developers, to recreated from scratch. This. Of course isn't without these problems this I'm pretty sure you know maybe too well, details. Get lost pixels, get forgotten and it. Just makes. Everyone so angry all the time, what. Is it however it leads to a very inefficient, process wasting. Time and resources it could be put somewhere else, so. Here is my question for, all of you wouldn't. Be amazing, if we could automate all the boring and tedious tasks, in a process and instead, focus on being creative once, again for. The past 40 years we've, built a solution that makes this a reality and I would like to show you how it works here now.
So. Supernova, works off of design, tools that we already like, to use like, design like sketch or Eckstein I have. A sketch design here and if I would to create it from scratch I would probably create the project then, x4d haces export, the phone's, code. The layout is just a lot of work so. Instead I will bring this design to a super Noah I. Also. Liked Fatih and I will also select the screen that I wants to import and once, I do that everything. Becomes the flutter component, so now everything. Is a water component, here. On the left side I actually have a very but I can edit the behavior, of the application while. Here on the right side I have a real, flatterer application, running in real time, but. Let's do. Something more amazing there. Are two components that I would like to change, into actual. Components. So first is the button, what. I can do is I can convert, this bunch, of layers into. Actual button and, as. If by magic it actually becomes a button, and even, though it looks the same when, I click on it it behaves like a button and I. Can do the same thing with a list of speakers so, instead I will use grid, list component, and, now. It becomes a scrollable list however, it doesn't really look the same because. It's. Growing recently. Or vertically, right so I will switch, to vertical. Layout because, supernova, exposes, all the properties, that, you. Have available on all the components, I can, also probably change. The left inside just so it looks nice so. I think components. Are now pretty. Much done let's. Move on to the layout as. You know every application should be responsive. But fortunately, I don't have to do that because while I was doing the components, supernova. Computed, the flexbox. Layout for, me and so, to show you that I can just grab the edge and resize. The application, and it works just, like that, but. I think the application is still bit boring so. Let's. Add some fun to it I can also trigger animations, and because we have our own an animation engine in supernova, I can actually make animation, on fly I could. Create some custom animation, but for this demo I will select one from the demo library so, just maybe. Some bouncing, and now when I tap on a button it, actually bounces in and that's, it I think, but my, application, is now pretty, much done but, I, actually have few more things to show you. You. See the true power of supernova comes from a production code and so if I click this magical, button on the top it, actually generates the production, code for me and it has all the components the.
Entire Layout and all the it's done. And now is the last thing I could export it and I can either export or, I can copy paste the code but, I actually have a support, for the, reload, here so, you'll unable that and once. I choose the hot Rio target, I can switch to visual studio which is already synchronized and now, when I restart the application and, open. The simulator, it. Actually shows, the entire application and. If I go back to the supernova I change something maybe. Make. It a little more dramatic I. Go. Back to visual studio and, synchronize. It it. Will actually show, the. Button. And. That's. It the, entire application. In three minutes I think that's pretty amazing. Yeah. And, for, this reason I am now very excited to, announce that, for. Further support is launching, today at supernova, dot IO and, because. We think flutter is the feature of cross-platform, apps, we are also making free, for, all fluttery designers, and developers so. You can build great apps together. But. Before I go I actually have something amazing to share video, ever, since the introduction of flutter for web we've been hard at work bringing, supernova, to everyone, without any limitation. In. The, upcoming months we'll be releasing a completely, new supernova, rebuilt, from the ground up, in flutter, it. Features, advanced support for enterprise, teams as well, as code enabled design system manager, that, serves both designers, and developers equally. Together. With Fattah we will close, the gap between design, and code I'm. Not really excited that supernova is joining the flutter ecosystem. And I cannot wait to see what you create thank, you very much. Thank. You so much Jerry I love. The not only a supernova providing, tools to help you build flutter, apps they're, gonna be using flutter to build supernova. That really I think speaks to you. Know hopefully the power that. We can bring so. That's one, tool and, I want to shift gears just temporarily because we want to talk a little bit about the creative experience.
With Tools like supernova, and one. Of the most inspirational, people, I've had the chance to work with over my professional, career is grant, Skinner and I'd, like to introduce you to him now grant. Well. Thanks so much Tim, I am, so excited to be here 20. Years for 20 years now I've been creating digital experiences. With. A wide. Variety of platforms, and a, plethora, of different frameworks. Most. Of them are great at what they do you, know they let you build functional apps or functional experiences, but, there's been very few that have really gotten my creative juices flowing. The. First platform, that I really fell in love with was, flash I know it's kind of a dirty word now but, I, loved. It what. Drew me to flash was that I could fuse design, and, code. And I, could use it to build both beautiful, things horrible. Things but always unique, things, it. Also introduced, me to one of the most passionately. Creative, communities, that I've ever had the privilege, of being a part of. I/o. Flash, a lot. You. Know it really. Drove. My, love of design and code and it, let me build the company that I'm still running today we. Built a reputation that's, led us work with companies like Adobe and, Google, Atari. And. Disney. But. You. Know fast, forward 10 years flash. Maybe, wasn't, quite as viable as it was when I started but. Html5. Was really, building up to take its place and. You. Know, it was very similar to flash if we could imagine something, we could build it in html5 and, so, we were able to seamlessly pivot. And take, on this new platform I. Still. Really love the web stack and we still do a ton of work on it but. You know it's 10 years later now and well. I'm standing, here at a flutter conference, so you might be able to guess where I'm headed, with this feel but a. Really. Good friend of mine, approached. Me a while back and he really, wanted to build an app for a game that we played together called destiny and, it, about the same time I. Had. A client that introduced, me to flutter and I, kind of poked around a little bit, gotten. Pretty interested, in it I suggested, like hey. Why don't we combine, these things why don't we build a destiny app using, flutter. Mm-hmm. You know he said okay, so. We spent the first week or so arguing. About state management cuz that's how you start any modern, dev program. And. Then. He started writing the data layer and I, started, building, the UI and. They're. Really surprisingly. Short amount of time we. Were able to release an app that we called read ryx for both iOS and Android and. This. App. Made. It through app review on its very first try, its. Hovered, between about a 4.8, 4.9, rating, in general we've. Logged zero, crashes. On the iOS app and. We. Had a lot of fun building it so. And. We've we've had a ton, of feedback from, the community about, how. Smooth, it feels how pretty it is and so. To me this is really a testament, of what the flutter team has created, the. Fact that we've been able to build this with so few issues being. Just a couple of people with. No experience whatsoever, in flutter or dart when we started off and just doing it for fun in our spare time, is. Really amazing, to me. See. To, me a good, UI framework. Makes it easy to realize, a design, a. Great. UI, framework. Inspires. You to make that design better and. I. Really feel like I found that with flutter I, don't, feel like I'm beholden, to the framework I feel like I'm elevated, by it. There's. A few kind of key points that for me stand. Out in what has made me like flutter. First. Is dart I. Was, pretty new to dart and I, tend to be a little bit cynical, of new languages, but. It, took a lot of the best things from c-sharp and combined, with some of the things that I love about JavaScript. And gave, me this language that was just really easy to learn and easy to work with. Second. Thing is that there's a lot of existing, building blocks right there's tons of first party and third party widgets they're, all open-source so I can use them as I want or I can modify them to make them do what I want them to do.
And. When they don't do what I need them to do a really. Low level access, to both, layout, and rendering so. I can do those like special, weird things that make experience, is great, and. When that's done I, can. Wrap, that up in a widget and take advantage of the compositional, model of flutter and just, inject, right out right back into the normal UI. Makes. It really easy to both share and, to integrate and. Finally. I mean no, flutter talk is is finished. Without a mention of pot reload, as, a, creative, coder I find hot reload, to just be such. An exceptional, thing it, reduces. The barrier of expert, exploration. It, makes it so much easier to play, I can iterate I can refine I can, try things out I can see how they look I don't, have that one minute compile time that, just doesn't make it worth it to try and tweak that. 0.13. To a 0.14. And see if it looks better. So. As I, was working on red ryx I kept going back to my team and kind of sharing the things that I had learned and I. Was really excited about how, much. My team was getting into this not just my developers, but even my designers seemed really interested, in flutter as a platform. So. When. The flutter team came to us and challenged, us to, basically. Show, off what you could do with modern flutter, by. Creating a series of UI vignettes, it, was like a total. No-brainer for us to say yes. So. We did what we do we jumped, in with both feet we, started, throwing together ideas we started exploring the platform, doing, research and, sketching. Out ideas and, you, know this is a tiny, sample we sketched out a lot. Of ideas and we, specifically. Made a point of trying to select ideas, that we wanted to build not. Select, ideas that would be easy to build inside a flutter and, to. Me this is important, because it's really easy to make demos, that. Tailored, to work on a new platform it's much harder to find, good ideas and then force them to work on that platform. So. Ultimately there. Wasn't a single idea, that we weren't, able to realize like, yeah we. Made compromises, once in a while but there was also a lot of cases where. Our idea got better as we implemented, it and I think again that's really exciting. I'm. Super. Happy with the end result of what we built really, proud of it and I'd like to share a little video that we put together about them. Thanks. So much I'm. Really, excited that we finally get to show everyone this we've had so much fun building these vignettes. They're. Gonna be they are fully, open source and you can get information about them here, and grab the source code I really encourage you to check them out play, with them rip out the pieces you like throw away the parts you don't and use, them to make something really really. Cool. In, addition, to the source code we're planning on doing some blog posts over the next little while talking. About sort of specific, things that we learned or challenges, that we faced and, we're also going, to take some of the little, reusable. Chunks and, repackage, them as widgets add. Proper, documentation. Finally, we, are hoping, to release, we'll see what Apple does we're hoping to release a both. An iOS and Android app, that'll. Let you play around with these with these vignettes. Without having to compile the code. If. You stick around. Later, today I'm going to be doing a talk with one of my designers and we're going to talk about the process that we use to conceive.
Of Design. And ultimately produce these vignettes I hope. You can join us there. I'd. Like to close by thanking the. The. Whole Google team the, whole flutter community, for, making this. Making. Flutter such a fun sandbox, to play inside of one. Of the things that really draws me to do to new, technologies, is the. People around it and I'm really excited to get to know you all a little bit better so thank you. Thank. You so much glad those samples, are beautiful, and you can experience some. Of them over in the expo, area if you're physically here in, person if not then flattery Skinner comm. So. We're, getting towards, the end but. One more I want to talk about for. Designers creative, tools are almost synonymous with. One company and that's Adobe. Their, creative cloud sweet is probably. The default choice for, any professional, designer and to. Talk about their, experiences. With flutter I'd, like to welcome Kerry shots to the stage, welcome, Kerry thank. You Tim. So. First. Of all I'm excited. And honored to be able to be here to present what, we've been collaborating on with Google so. Designers, excel, at creating. Rich and engaging designs. That delight users an Adobe. XD free. By the way enables. Design and team collaboration, at the speed of thought well. Quickly and easily targeting, multiple platforms, form, factors and surfaces, the, epitome of ambient, computing. This. Is a perfect, fit for flutters ability, to deliver beautiful experiences, across multiple, platforms. Now. The problem, with that is that translating, these designs the code is a huge, pain point especially. When, you have to do it time after time after time when the design changes, so. To help we have collaborated, together with Google to. Create a plugin for Adobe, XD that. Exports, real flutter code that a developer, like you or I could. Use immediately. Without, having to reinterpret, the. Designers, intent I'm. Excited. To give you an early look at what this looks like so, let's dive right in. So. Here, I have, my. Visual, Studio code environment, already set up on the Left I have my iOS simulator, running I already, have an app started. And. I also am running the dart, code plugin, for Visual Studio code I. So have. Adobe. XD running, now if you're not at all familiar with Adobe XD it, is a tool for designing, at the speed of thought user. Experiences. For screen design across all sorts of platforms and I, have a small design here a small snippet from grants designs. For. His application. So. What, I want to do here is just show you the power of this plugin this. Plug-in lives inside, the plugin panel and. It. Will be available when. We release it through the plugin manager you. Can simply do this in application, search. Install. You don't even have to restart XD. So. Let's show you how this works I'm going, to zoom into the badge here, and what, I want to do actually is take this badge and Transplant, it into a more complex design but, let's start simple. So. This badge has. It's. A really pretty badge. So. It has an icon it has some graphics it has some text to it this. Plugin lets me do two things I can copy this design and paste it directly as code which, is really cool but. I think even more amazing, is it lets me do this as a reusable. Component so it generates files automatically. For me so. I'm going to select this artboard and artboards, can be used as, containers, for screens or reusable widgets I'm. Just going to come over here and click export selected, for flutter now. It's already told me that it's updated a file because. I told it ahead of time where, this file lives on my desk otherwise you would have a picker now. Nothing has changed in my sim because. I need to go tell, Visual. Studio code and flutter where this lives so. I'm going to come in here. Oops. There. We go and I'm going to just use the badge. Save. This and you can see immediately that, we. Have a nearly, pixel, perfect representation, of, what. X of, what was an XD and this is real flutter code so, if you want to come in and inspect, this. File you can do just that and, it. Looks just like you would expect. Super. Cool isn't it. Okay. But that's not all this is what this is to me what is the coolest part of this so. If I come back to XD, and I'm. Going to drill into this layer a little bit and I. Don't know how obvious it is on screen but there's a few layers in here that have a label.
That Starts with P and a colon and, this means that they're parameterised, so. This allows, me as the designer to give you a design but the developer, to supply their own data so. I'm going to come back to visual studio code and. I'm. Going to just overwrite, what, the design what the designer has given me with, some of my own text, so I'm gonna say best copy maybe. For the category, and teleporter. For the title and immediately. It's, rebated. Inside, of my, simulator. What's. Even more cool is this separates out my data and from my design, so. If I as, the designer decide, that you know what I want to change this color I can. Do that. Andrey. Export, it and immediately, it's available inside. Of my simulator and notice it's kept my data so this lets me segregate, out my, data for my design. Really. Really cool stuff. Okay. So, this is a simple, example but what about something more complex. So. Thanks to grant we have this super complicated screen, here and. How. Is this going to work right so I'm going to react sport it this time to a separate file I'm going. To tell Visual Studio code to use it. And. Just. Like. That we have a pixel for pixel representation. Of what, was an XD and this is real flutter code too but. I think there's a little bit of an empty space down here so I'm going to take this badge and paste it in there. Copy. And. I'm going to position it just where, I want it. We. Export, and our. Badge is now in place. Super. Super powerful. So. I hope you can see that with this small, example, how, powerful, this could actually be, so. What. We're really excited, to announce is, that. This. Is going to be available open, source so. We invite you to sign, up at the waitlist on screen and, we. Will get you into that and we're, happy to have you play around we. Will release to the wider community later. This year. Sign. Up at the link on the screen to join the beta waitlist, and we can't wait to see what you do this do, with this with. The combination of Adobe XD with. Flutter and the, XD to flutter plugin thanks. Tim. Wow. Okay. So. You've. Seen the two pieces. Individually. And now together flutter. As a platform, that, takes your code and lets you run it on any platform in an ambient computing, world, flutter. As a, platform. To enable you to take. Your creative, ideas and inspirations. And turn them into, beautiful. Experiences. You. Know butter is at its heart an open source projects, the. Value we derive, for Google comes, in part from the productivity. Gains realized from other product, teams inside, the company, who, use flutter but. Again. We build flutter for. You we build blood flutter with, you. Our. Journey is taking us from a very mobile first. Focus, towards, this broader, vision. For. Flutter as a portable. UI, toolkit, and we're.
Going To continue to invest, ourselves. And with others in the ecosystem, in designer, and, developer, tools, that increase both the productivity. And the, beauty of your, finished application. But. The. Thing that really, compels, me about flutter and the community, of which we're all parts is not. Necessarily. The big, apps. It's. The small individual. Experiences. It's the stories, that come, from individuals. People, who use, flutter to solve real problems that. Are personal, to, them and I. Want to close with one example. Of that a video. That shows a little bit about how, you, can use flutter in, a very personal, way let's, roll that video. The. Day of Amon II was born we, were very excited, to, meet our daughter. Her. Birth was supposed. To go as normal, it was a very, normal pregnancy, I, mean. I look back and it is, the. Happiest, day of my life and the scariest day of my life all wrapped up in a 24-hour period. When. She was born they, can't get her oxygen level, higher than about, 80, to 85 percent and they said it has to be in the high 90s, they, decide that they are going to take her to the ICU or, NICU they. Told me she has a heart condition and, she. Had open-heart, surgery. At. Six, weeks Imani, finally, came home she. Might have been in the home setting but. She brought the hospital, with us. First. Year of her life it was pretty, grueling, she. Had her cardiologist general, surgeon ophthalmologist. A physical therapist a feeding specialist, and an. Allergist, it, felt like she had more providers than most people would have in their lifetime just, thinking to myself one, is it all, gonna stop. We. Found out about her. Eyes and we needed to start patching to, help strengthen the eyes so that it did not develop, into amblyopia, or, lazy eye as it's, commonly called patching. Shuts, off vision, to one, eye so. That the other eye can, get stronger, we. Had to keep. Track of how. Many hours a day she was being passed I would ask Danica, every day hey did you patrimony, and I felt bad asking, that question knowing, that Danica, was already overwhelmed. I, thought. Let me try to. Use. What I know, to. Be able to influence, the future even, if it's in a tiny small way. Patch. Me was. An idea to. Help us communicate, better, so that we could share information about. The patching schedule. Right. Around the same time frame being, a software architect I saw this new technology, called flutter it, helped.
Me To connect. The dots to say hey I want to do this I, would. Wait till Amani, was in bed and then take maybe. An hour to a night I saw. The, udemy course buy a brewery, and collaboration. With the Google team so I felt, like that was the right way to learn flutter, over. The years I've worked on all kinds, of stuff but flutter has, been a, framework, that I've been productive into, fastest, I was able to make patch, me in in a short timeframe. The. Awesome, thing about the patch me app is that now give some very objective. Information to, give to the care providers, where before sometimes you know you underestimate, or overestimate it, we. Realize that, there. Is a need for this. Outside. Of our home I decided. That I should publish, it to the App Store, my. Hope is it'll definitely spread, throughout the US for all you know even the world flutter. Allowed. Me to create past me without, having, to sacrifice on, either. The, app and its functionality or. My, family, and my time with my family. What. The app gave. Back to me was a lot of control I have. The best life partner, and certainly. Children, with special needs it, can either create, a distance between parents. Or it can draw them closer and I'm very happy it. Brought us closer, you. Know Amani has overcome. So much in a short life all the pictures when we look back at it we see how fragile, she was and you. Look at her today as a baby and she's a daredevil she, is determined and, headstrong and my hope for Imani is that she, continues, to thrive, and we. As a family continue, to thrive. She. Has changed. Me to. The core now, I want, to spend my time in a productive way to be able to give back and Imani. Has taught me that. You.
2019-12-13