Designing for the Web with Flutter (Flutter Interact '19)

Good, afternoon everyone, I'm. Farhad, I'm an, engineer, on the flatter web team and I'm Liam spradlin a designer, of material design in his design, advocate, and. As. Developers. And designers one. Of our biggest challenges today, is not, only building, for, multiple. Platforms, but, also building, for. Multiple. Form factors and. Flutters. Started, by. Supporting. Two, of the most popular platforms. Android. And, iOS. Today. Liam and I would like to talk about bringing, the same productive. Modern, developer. Experience, to the web so. We'll. Be doing some live, coding and giving. You some. Product updates. So. Here. Are some of my, favorite. Reasons for, using. Flatter. Web, so. The, first one is, deployment. Ease, of deployment has. Two. Main benefits for, your projects, the first, benefit, is. That. With. No install, friction. More. Of your users can try out your product, and you can increase. User. Adoption, the. Second. Big benefit, is, being. Able to quickly. Iterate, on, your applications, at. Google. Some. Of our products, run hundreds, of experiments. Simultaneously. And. We. Frequently, update, these experiments. The. Web is a great, way of delivering. This. Quick, iteration, cycle, to, improve your products. Using. The web. And most. Of all creating, really, expressive. Dynamic. Experiences. For the web can be challenging, and as. Matias mentioned in the keynote, earlier flutter, allows us to jump to the interesting part of solving these problems. By. Shortening the cycle of iteration between designer and developer. And. I think a, lot of designers in the room might be familiar with hearing no on these kind. Of. Interesting. Dynamic, experiences. Either because of technical feasibility or product. Timelines, or other, kind of logistical reasons but. Now it's easier to say yes to these experiences, and extend them to the web. So. To, show you how flutter, enables, these. Rich, interactive. Experiences. On the web let's, take a look at how we build websites. Today so. Typically, we use HTML. Templates, and CSS. To, build up our elementary. And we pass it on to the browser and the. Browser uses. HTML. And CSS to, layout our elements, and, paint. Them on a web page. Flutter. On the other hand was. Architected, with. The idea in mind that, the. Built layout, and paint cycle, are fully available, to, developers, so. Flutters, API, is expose. The. Whole rendering. Pipeline to, you and this, is what. Enables. These rich, experiences. To. Come. To the web as well. As. An example of this we can look at one of our material studies called shrine which has this really highly expressive identity, and the identity is expressed through things like custom cut corners on surfaces, that are elevated, custom. Image treatments, typography. And and a, lot more and, as for how it was saying having full access to the paint pipeline, and themes and flutter allows. Us to implement this really easily. This. Is another example of, a custom component and interaction, where the shapes of the buttons and the bottom bar are being manipulated based on user input so, the. Changes are actually conveying, something to the user about states. So. There. Are some wonderful upcoming. Web standards, such. As CSS, paint, that. Enables, some of these on. At. The platform level. With. Flutter, you. Can you can start building these, experiences. Today. And. To. Get, started on, an example of this just for a show of hands who here is familiar with the shape on, the screen. Okay. Cool so the. Golden ratio is a concept, that some of you are familiar with and it's, a mathematical, ratio that we see reflected in the, common geometry all around us from things like our composition, to seashells. To, ferns, to. Pinecones. And even. Broccoli. It. Can be described as a progressive spiral, like this where each segment has a. Shares. A ratio with its neighboring segments, and specifically. Each segment here has a shares. A 1.618. Aspect, ratio with the following segments, and so. Because this is a rigid mathematical, structure that can set the parameters for harmonious. Curves and shapes it. Can also be a useful tool in other kinds of composition, as well including, maybe, the layout of components, on a screen so now. We'll get, an idea of how. That would look in code. If. We can switch to. Yes. So. Let's. Do some coding, I've. Created, a, sample. Here. Where I'm. Building a golden, ratio widget and. I'm. Going to a. Take. Advantage, of some of the built-in. Building. Blocks, a. In. In, flutter to. Create. This ratio so, first, of all I the, golden. Ratio. Width, and height. Ratio on it is. Let's. See. 1.618. So. I'm going to use the aspect ratio widget and. I'm. Going, to create a child. Where. I subdivide. The two areas on. My. Widgets. By. Using, flexbox. And. I. Inside. My, aspect. Ratio widget I want. To. Have two areas, that have the exact, same ratio, in, this, case I'm going to use, flexible.

With. A, flex, value, of one. Six one eight, since. It's an integer. And. I'm. Going to place, our. Primary. Child. Widget, here. And. Add. Another, area, to my Flex box. Okay. So. It's. Sorry. All. Right. Oh. One, second, let me. Okay. So. Now I, when. I, resize. This widget I should, be able to see that the. Ratio between the width and height is. Preserved. And. The, the, area. Between, the. Two elements are. Preserved. As well so. If I launch, this in, a. Browser and. Start. Resizing, the browser. You. Can see that no. Matter how. I change, my. Browser. Window it. Keeps, the. Same ratio, intact. So. When. I, have. More. Vertical, space as you see there's. Too much empty space here, so if I had a primary, and secondary content. I would probably want, to rotate, this and. Flutter. Provides. Built-in. Widgets to, accomplish, this, but. I'd like, to show you how much control, you have, with. Flutter. In. In. Terms of. Controlling. These layouts so, I'm, going to use. Layout. Builder widgets, and what, a layout builder widget, enables, you to do is I check the constraints. Of your container, so. I can decide to, build different, children based, on. The. Containers. Constraints. So. If we take this. Code. And. Simply. Paste, it and. Save. You'll. See it, will do a Hutt restart, in the browser and. Start. Vertically. Aligning. To the two areas so, as I play around with. My container, size. The. Layout will change to, accommodate, the. Constraints. So. We can, take this. And. Start. Nesting, it. In. Which. Case you. Can have golden, ratios. And. You. Can have these layout, containers. Nicely. Create. Expressive. Designs. So. The. The, power. Of. Flutter. Is that. You have fine grain control now. When. You. Do. Responsive. Designs. You. Don't just a. You. Don't, just look. At your, browsers size, but. You can. Create. Layouts, based on your containers constraints. Back. To slides if we go back to slides, we. Can take a look at a more practical, example of this with the example, app rally and rally is one of the material study apps that's based around personal finance, so you can see that the screen is made up of all these, different widgets that all have different kinds of information that are not, only presenting, different kinds. Of content to the user but also performing, different tasks, for the user so, I'm going to take a look at how, that. Kind of responsive, behavior would react in an environment, like this, on. Large screens in rally you get this broad dashboard. Kind of overview feeling, where each widget has plenty of space to show the information than it needs to, you've got dedicated space for navigation, and also for the alerts on the other side and, as. You start to move between devices to something like a tablet, things start to rearrange themselves so. The dashboard widgets, that you saw before are now lined up and alert still has that reserved space on the side and, when, you go even smaller things, continue, to change so, the navigation componentry. Changes, from a rail navigation, to these customized tabs along the top and now, everything, exists, in one vertical. Column and alerts, are still prioritized, at the top so, it's important to recognize here that rally isn't just adapting, can phone entry and layout across sizes but. It's also reprioritizing. Elements, on screen to preserve the user's mental model of how all of this information is related and what the content means, and. So. We can see in the simpler example, how a cohesive, navigation, structure might work across devices so.

You Can see on mobile the app uses bottom navigation and, it seamlessly adapts to rail navigation, and medium screen sizes and a persistent, navitor, at larger sizes so. As the screen space increases. Or decreases you're. Also changing the amount of space the visual weight the, priority, and also the ergonomic, qualities that are given to navigational, components, and as. You heard in the keynote earlier flutter, is working on making this happen right now. So. As we. Get closer. To a production. Quality release, with, flutter web, and. Handle. More and more use cases. We. Want to make sure flutter, is a great citizen on the web and. Part. Of this is following. Web standards, and. Taking. Advantage, of the latest web, api's, that. Are available, across, these browsers. But. Most importantly. We. Want to build it in a way that respects. Web. User. Experiences. And. Since. We launched the technical, preview we, we've. Been working, hard on making. Sure all, the imports, all the widgets behave, in a way that, users, on the web platform are. Accustomed. To so. We. Have been working on text editing. Clipboard. Supports. Spelling. Autocorrect. In inputs. Things, like keyboard, navigation, because. Flutters, roots were in mobile, for, a long time. There. Was no need, for keyboard. Navigation or, tooltips, or hover, events, so. All. Of these have been added to flutter and we. Make sure that these get translated, and run, on the web platform based. On standards. So. When. I talk. About flutter web two teams, at Google. Three, questions, keep on coming up over, and over again so the, the first one, is. Code, size how. Big is, flutter. Web how. Big is the material, app the. The second one I get, very frequently, is once. They see that, we. Are literally, using, flutters, same. Framework identical. Framework, to render elements on the screen they, say oh you're. Painting, everything so. Accessibility, must, not work so. That's the second one they asked about accessibility, and the, third one is this, is teams, that are using flutter already, for, mobile. Use cases at, Google, they. Ask, about, their, favorite. Plugin and whether, we have added web, support to it so. To, answer some of these. In. In, terms of performance, today. A material. App written, and flutter is. About. 300. Kilobytes gzipped. It starts, around that number and, our. Team is hard at work getting, that number, even lower. And. This. Year we. Started making changes, in. The. Flutter framework, itself, to. Make it much more performance when, it comes to rendering. On the web and. The. Performance, optimizations. We're doing for the web are, actually, benefiting, all of, the other platforms, so, one one, of them is. Retaining. Layers so. When, you update a portion. Of your application, state, and call, set State flutter. Repaints. That portion, of the screen so. We made sure that we, don't. Create or destroy dom, nodes inside. The browser over and over again as we're, painting, and updating. The, UI so, if you have an infinitely. Scrolling. List it. Will reuse, those Dom nodes as you. Are scrolling and update. Their. Contents. So. BM how about accessibility. Right. So. To speak. To accessibility we've got a little video here that um where we're demonstrating. Talkback. Which, is already supported on Android as well as voiceover. On iOS, and screen. Reader support for desktop web is currently in testing so. Some of the features that you would expect that are already implemented for assistive technologies, across platforms, include. Things like UI traversal. Traversal. Order UI interaction cues, like tap oval labels editable. Incremental. Images. Live regions, and check balls but. As, for hot side it might be surprising, to hear that all of this works given the flutter is painting everything so I'm, interested to know how its implemented and.

Again. Here, we we, chose to, go, with web, standards, for, accessibility. We. Use. Standard. Area. Aria. Attributes. On dom, elements, so, the thing we do differently, is we create. A separate. Semantic, tree on top. Of your visual tree so. In. Many. Flutter, applications. We, found that, the. Number of semantic, notes is a, lot fewer, than, the elements. You need to actually render. Your scene so. We're able to create a much smaller. Semantic. Tree and overlay. It with re attributes. And. Enable. Accessibility for, the web. As. Farhad said everyone's. Favorite, plugins are the, third big, question from. Products music Google and the web has a very rich set of api's and it's constantly, adding support for new technologies, too so. Flutter gives you a flutter, for web gives you access to these api's through Web plugins and. To. Give you an example of a plug-in this is the most, commonly, used plug-in. In flutter. It's. Called safe. A shared. Preferences, and. It. Allows you to save. And load app, preferences. On. Your local device so. If. You were to implement this in, an, iOS project, if you were building, a native apps you would use nsuserdefaults. If. You. Were, implementing. This in a browser you, would likely use either, local, storage or. Indexdb. To store your settings and if. If. You are on a, Windows desktop for, example you, would use the Windows Storage API swith, local, settings so. Plugins. Basically. Give flatter access, to. Platform. Specific, interfaces, and in. This case it shields, you from all, that detail. That's, under, the hood and. You. Can simply, code. Against, the plugins public, interface, use. Its api's, and when, we compile, an IOT binary, or we, create a JavaScript, bundle, these. Simply. Work. And. If. If you build your own web, plugins to, for example interrupt, with the JavaScript, library you already have you can easily add these now. To. Your, flutter project, by providing. Them in your pops back yellow file. So. We're. Happy to announce that we have the first set of plugins now, published. And. Available. And. A, big, thank, you to our, flutter, community. We. Got great contributions. On some of these plugins, to. Make them available to, you today. So. Flutter. Is evolving, from mobile. Framework, to. Cover desktop. And web. Experiences. As well. And. Working. With early, access partners, we have identified. Some of the best use cases for, using flutter web today, so. These early access partners, are. Their. Dogfooding, some, of their apps they're, getting very close to shipping.

Their. Apps into, production and we. Worked closely with them to, both unblock, any features, they, needed to, launch and I. Get flatter webbed ready, for. Our beta launch and. The. The first use case is really, simple if if, you, have a, mobile. Flutter. App today, you, can simply recompile. It and serve. It on the mobile web. The. Second, use case is. Apps. Where. You, create. And edit, content, typically. On a larger, screen with a keyboard but. The main app still. Lets, you consume, the content on mobile devices, so. Some. Of our partners, create basically, to flutter apps and one. Is primarily, for, mobile, and the, other one is targeted, towards. Laptops. And, desktops. So. The, third, one we're very. Excited about is. Embedded. Interactive, content. This. Is a great, way to add, flutter, to your websites, today so. You can build rich. Interactive. Experiences. Using. Flutter, and then host them inside. Your website. So. We hope that you're excited about flutter, for web and beta and building. Rich expressive, experiences. And all the technical capabilities, as well, we welcome feedback and, we really hope that you'll share with us and continue sharing them with us the things that you're creating because we really like to see the, beautiful stuff that you're making with flutter thank. You.

2019-12-17 21:30

Other news