Building platform adaptive apps | Session

[Music] i'm kevin moore i'm a product manager on the flutter team flutter provides incredible new opportunities to build apps that can run on mobile desktop and the web from a single code base however with these opportunities comes new challenges we want our apps to feel familiar to users adapting on each platform to maximize usability and ensure a comfortable and seamless experience that is we need to build apps that are not just cross-platform but fully platform adaptive there are many considerations for developing platform adaptive apps let's break them into three categories first we'll look at adapting to the size and shape of the screen our app will be running on next we need to consider how to support the input methods being used such as touch or mouse keyboard lastly we need to consider the idioms and norms that users expect on each platform we have fairly limited time so we're not going to spend too much time on each topic my goal is to introduce some of the considerations for an adaptive app telling you about the features that are built into flutter to help you address them and to point you at apis that you can use to fill in the remaining gaps throughout the talk we're going to use the flutterfolio app as a reference it's a scrapbooking app that runs on mobile desktop and web it's free and open source and a demo built to reflect current best practices you can go to flutter.dev go slash adaptive to learn more let's start by looking at form factor and screen size if you've been building apps or websites you're almost certainly familiar with creating responsive interfaces and if you're a flutter dev you know there are a lot of widgets that make it easy to build resizable layouts we certainly don't have time to go through them all but it is worth spending some time perusing the widget catalog on flutter.dev to familiarize yourself with the options that are available out of the box if you can't find a widget that does what you need you can take a more procedural approach to adjust parameters swap widgets or even rewrite a whole tree here we're switching to a vertical layout when we're on a handset you're going to see this approach several times in this talk instead of duplicating code there are often small tweaks you can add in line based on simple conditions here we're injecting a different list of widgets into a column by using the spread operator we have a column that already starts out with a header but depending on the platform we're going to inject either widgets designed for handset or another set dart makes this easy taking a more procedural approach lets you reflow or even completely restructure your ui to suit a particular form factor thanks to state-based architecture and the fact that everything in flutter is a widget this is usually simple just instantiate your sub-view into a different parent in this example you can see how the exact same image grid widget has been presented as a sheet on a handset but is a modal overlay on a larger screen actually determining how you divvy up device layout will vary between projects but you'll usually use a combination of media query and platform it's a good idea to consolidate this logic into a single place to keep things consistent facilitate testing and to make updates simpler it can be very helpful to have a single source of truth for numeric values like padding or spacing which need to be changed throughout the app depending on the platform in this case we're using a class with some static values that are easy to update and reference when you need to change one another option is to use layout builder to make decisions based on incoming constraints you can build a unique layout based on constraints provided by the parent in this case choosing between a one or two column view based on the available width this is less coupled to global variables which makes it particularly beneficial for creating reusable components or views that adjust to their local context now beyond screen size we should also consider the other unique strengths and weaknesses of different form factors it's not always ideal for your multi-platform app to simply offer identical functionality everywhere it may make sense to focus on specific capabilities or even remove certain features on some device categories for example mobile devices are portable and have cameras but they aren't well suited for detailed creative work so flutterfolio focuses the handset experience which you see on the left around capturing content and viewing scrapbooks but it explicitly disables editing features desktop on the other hand which is in the center here focuses on creation and editing and the web version on the right uniquely supports deep links to scrapbooks to leverage the web's extremely low barrier to sharing the next thing we need to consider is input devices one of the most obvious things to consider is touch versus mouse input compared to touch a mouse provides more precision which means that hit areas can be smaller and we can have a higher visual density on the screen flutter's material design components have visual density baked into them allowing you to easily adjust the size of elements like buttons and list items to accommodate the differences between touch and mouse of course the line between these two input models isn't always so clear we have touch screen laptops and tablets with styluses so flutterfolio provides a toggle which defaults the most appropriate setting but lets the user switch if they'd like of course precision isn't the only difference you also have to consider additional inputs like scroll wheel right click hover interactions and a physical keyboard flutter gives you a lot for free here scrolling widgets like scroll view or list view support the scroll wheel by default and because almost every scrollable custom widget is built using one of these support comes for free tabbing through controls and activating them with a keyboard still takes a bit of work but the focus class and its related widgets make it significantly easier flutter includes multiple ways to handle focus traversal from straightforward logic using widget creation order or the natural reading order to more hands-on options like specifying order indices or even writing a totally custom policy material controls include support for basic cover states tool tips and displaying appropriate cursors by default but you can tweak these by hand if you like for example here's how easy it is to change the cursor for a specific widget based on the value of an is busy flag and text fields come with support for common interactions like copy paste via right click or keyboard shortcuts so you get a lot out of the box but if you're building a custom widget or want to do something unique flutter also gives you low level access to all of these inputs for instance flutterfolio uses onpointer signal to enable custom horizontal scrolling behavior on its main page here you can see how easy it is to respond to scroll events on any widget by wrapping it in a listener and responding to pointer scroll events and you can also use on secondary tap to display rich context menus on desktop instead of the larger button controls for touch devices right click and long press are also interactions you can listen for with gesture detector just like tap the easiest way to start supporting different input devices is to start with a great touch experience you can then tweak it to offer higher visual density when using a mouse and then layer on all the additional inputs you can approach these other inputs as accelerators alternatives that make a task faster the important thing is to consider what a user would expect when using a particular input device and work to reflect that in your app each platform has its own idioms and norms nominal or de facto standards which inform user expectations of how an application should behave thanks in part to the web users have become accustomed to more customized experiences but reflecting on platform standards provides two significant benefits first following idioms and norms helps you align with users existing mental model accomplishing tasks becomes more intuitive and users are more productive and less frustrated second following idioms and norms builds trust users can become wary or even suspicious when applications don't adhere to their expectations conversely a familiar feeling ui can build user trust and help to improve perception of quality which often adds the benefit of having better app store ratings so how do we achieve this you start by asking yourself a couple of questions first what is the expected appearance presentation or behavior on this platform and second how would a user of this platform expect to achieve this goal but answering these questions can be hard if you're not a regular user of that device so when possible try to have someone on the project that can act as the advocate for each platform ideally they use this as their primary device and represent the perspective of a highly opinionated user on flutterfolio onedev was the advocate for windows and android another for linux and the web and one of the designers gave ongoing feedback on mac and ios this meant that there was a consistent informed feedback on what needed tweaking to make the app feel appropriate for each platform as an active participant on the project the advocate is well suited to catch nuances in the ui that feel off on their device a simple example is how the default button in a dialog is typically displayed on the left on mac and linux but on the right on windows details like this are easy to miss if you're not using a platform on a regular basis let's take a quick spin through a few specific norms and idioms you might want to consider and look at how you can approach these in flutter scroll bars vary pretty wildly between platforms on mobile they are small visual indicators that only appear during a scroll on desktop they are larger interactive elements that can be dragged to scroll and remain visible whenever they are needed they even vary between mobile os's with bouncing over scrolls in ios or more sedate interactions on android thankfully flutter handles all of this for you adjusting size visibility interactions and scroll physics to match the host platform when presenting lists or other collections that support multi-select you'll want to adjust your approach for different devices using modifier keys like shift is common on desktop whereas on a touch device tapping to toggle selection is expected another example is text now flutter defaults to non-selectable text which makes sense on mobile but desktop and especially web users expect to be able to select and copy text this is easy to enable in flutter by swiping your text widgets for selectable text and finally for those jumping into the newly released desktop support you can even bring customization into the application title bar using the plugin bitsdojo window flutterfolio brings the current user icon and authentication controls to the top of the window while still reflecting control conventions across platforms of course that's just a few of the things you'll want to consider the more operating systems form factors and input devices you support the more difficult it becomes to spec out every permutation in design taking some time to learn basic usability principles will empower you to make better decisions you'll have less back and forth during production and you'll end up with a better application faster flutter makes it easy to support multiple platforms from a single code base to do it well keep these things in mind first take into account form factor and screen size when determining which features to expose and how when considering user input start with a solid touch implementation then layer on support for additional input methods and increased visual density and always keep platform idioms and norms in mind when an app meets users expectations it will feel at home on their device flutter makes a lot of this super easy but it's still important to educate yourself on the basics of usability careful consideration and a bit of planning will result in apps that are easier to use more delightful and better rated to learn more you can visit flutter.dev go slash adaptive there you'll find source code for the flutter folio app a link to an article that digs deeper into these topics and other materials that you can use to get started building apps that will wow your users and be sure to check out all of these other flutter talks at i o [Music] thanks you

Channel: Flutter

Views: 16,600

Keywords: purpose: Educate, type: Conference Talk (Full production), pr_pr: Google I/O, flutter platform support, flutter mobile, flutter desktop, flutter web, flutter cross platform setup, flutter cross-platform support, flutter multi platform, flutter multi-platform, platform aware, running flutter on different platforms, flutter developers, flutter development, #GoogleIO, Google I/O, Google IO, Google developer conference, Google announcement, Google conference, Google

Id: RCdeSKVt7LI

Length: 12min 56sec (776 seconds)

Published: Wed May 19 2021