Unknown

[Music] [Music] [Music] [Music] [Music] [Music] [Music] do do [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] so you ever traveled somewhere and saw kids playing soccer there's something really fascinating about how sport transcends all cultures languages history over the years i've dabbled in every sport imaginable i think that's part of the reason when i launched bushset i was absolutely inspired by how we can help athletes across all sports i've represented the british diving team since 2015 competing at european and world level this is really where fine margins make

all the difference which is why i started using push push is an advanced strength training wearable part of our mission is to optimize athletic training making sure that when an athlete is walking into the gym they're actually getting the most that their body can afford to give that day push gives me rep by rep feedback in real time so my lifting becomes more flexible and efficient which helps me improve my strength as a diver we were constantly getting requests for android support and one of our challenges is that we're a small team and we knew

that trying to support two different code bases was going to be super difficult with flutter we are able to save roughly a day a week in just syncing two different code bases it's really enabled us to push out a lot more features a lot faster being a wearable we really needed to make sure that the bluetooth connection was going to be robust and reliable that it can handle any type of data transfer that we need and we were blown away by just how performant flutter was [Music] we really wanted to make sure that our technology

can scale and can help impact athletes lives at various levels of development and that's something that i'm really proud of push gives me motivation to see how far i can go and what i can achieve that ultimately means the olympics this so [Applause] [Music] [Applause] [Music] welcome to flutter engage we're so glad to have you join us virtually wherever you are it's been a tough year for many and so we're thrilled to share some good news as we show you some of what we've been working on and announced some new things that we think you'll

like our theme for this year's event is to highlight the flexibility and portability of flutter as a complete ui toolkit for building beautiful apps for any platform and today is a key milestone for flutter with the launch of flutter 2 a major upgrade to flutter that builds on the momentum and foundation of previous releases and opens up a broad range of new target platforms for production use over the next hour you're going to hear us talk about flutter on android and ios as well as web and desktop you're going to hear from companies like microsoft

canonical and toyota and you can learn more about how our work on darts provides a unique technical envelope for your code providing a portable productive and robust combination of capabilities for building apps flutter is the first ui platform that is designed for an ambient computing world and this vision is unique to flutter a portable toolkit for building beautiful native fast experiences wherever you might want to paint pixels on the screen our goal is to shift you from having to start with the platform you're targeting and focus instead on what you want to create some ui

toolkits impose tight constraints on what you can build they limit your creative expression to what fits within the toolkit but flutter allows you to hand craft beautiful experiences where your brand and design comes to the forefront flutter is fast it compiles your source to machine code but thanks to features like stateful hot reload you still get the productivity of interpreted environments allowing you to make changes while your app is running and see the results immediately and of course flutter is open with thousands of contributors adding to the core framework and extending it with an ecosystem

of packages so the big news in flutter 2 is that we've broadened flutter from a mobile framework to a portable framework unleashing your apps to run on a wide variety of different platforms with little or no change as of right now there are already over 150 000 flutter apps out there and that number has doubled just since last summer these apps come from big teams at big companies as well as entrepreneurs and startups who simply want to share their idea with the world and we thought we'd show you some of our [Music] favorites [Music] [Music]

[Music] so let's talk about what's in flutter two you can think of flutter two as a free upgrade for your app we've shipped about 10 updates to flutter since our original launch but in this release we add support for something worthy of a major version upgrade a major increase in the number of users you can reach if you've built a flutter app so far you've probably been thinking primarily about ios and android but with flutter two your app can target four additional platforms windows mac os linux and the web and when you add ios and

android to that list you can see how uniquely flexible flutter is with native support for six different platforms and the ability to tailor the experience for each platform without compromising performance flutter is perfectly suited to both rapid iteration and high quality results so to demonstrate flutter's versatility in action we asked our friends at gskinner to create a demo app that spans all these platforms let's show you what they've created hi everyone here at g skinner we've created a variety of flutter apps that compiled to and ran on multiple platforms but for this project we wanted

to go beyond that and build something that purposefully considered the norms user expectations input devices and idioms for each platform to create an app that truly felt at home on every device we also wanted to leverage the unique strengths of each platform to power a creative workflow after some brainstorming we decided to build a scrapbooking app called flutterfolio [Music] let's take a closer look at how the app works on different devices mobile devices are great because they're portable follow us everywhere and they usually have a camera built in given that we focus the small screen

experience around capturing content let's say you were on a walk and you bumped into tim and his rabbit carl you could use the mobile friendly ui to quickly navigate to an existing scrapbook and reminisce about shared experiences or navigate to your furry friends folio and snap a few pictures of carl to add in later of course larger screens provide a lot more space and improved precision which makes them ideal for creative work like editing a scrapbook so when you get back from your walk super excited to add in your new photos of carl you can

fire up the app maximize it being the native controls in the custom title bar and use your scroll wheel or arrow keys to navigate to a scrapbook you're looking for while editing you can use desktop specific idioms like multi-select native menus keyboard shortcuts context menus and scroll wheel zoom but of course not all large screens are the same when working on a touch device the ui adapts in a variety of ways such as providing larger hit areas and exposing functionality through contextual buttons instead of right-click menus last but not least we wanted to target the

web these days browsers are capable of almost everything you can do in a native app so the full app runs there as well but the web is unique in the ease with which content can be shared we leverage that strength to let you share a read-only version of your scrapbook for example to share your amazing new page with tim and carl so they can follow along in real time as you make new updates this url is actually live right now if you want to go check out carl of course we barely skimmed the surface today

so i'd like to invite you to visit flutter.gskinner.com where you'll find more info source code and links to the app we also learned a ton building this and we're excited to share that knowledge on our blog and via twitter ultimately we were able to build an app that runs great and feels at home on three form factors five os's and the web while reusing over 95 of our code we built flutter folio with best practices in mind you can check out the source code to start making your apps platform adaptive today if you want to

experiment with this app further the source code is available at flutter.gskinner.com and for more on great design practices with flutter check out the separate talk with philip hrachek that we're posting live today of course there are hundreds of other new features in flutter two we continue to make progress on foundational areas that you and your customers care about improving performance and stability supporting the latest ui trends and widgets and increasing accessibility we've completed our work on a new state restoration api with support for running on apple silicon we've added multi-line text editing and keyboard shortcuts

we've added interactive scroll bars we've implemented null safety throughout the framework and we've closed nearly 6 000 issues the full list of pull requests merged is a 200 page document to give you a sense of the size of this upgrade and we have a blog post with a lot more details flutter isn't just being used outside google over a thousand engineers inside the company are using dart and flutter to develop apps today representing over 30 different teams and the apps that you see on this list here are already shipping using flutter one of the largest

apps from google using flutter is google pay and timothy jordan recently sat down with piu schramjen who's the vice president of engineering for google pay to ask him about their experiences with flutter let's hear what they had to say hey push timothy here ever since google pay moved to flutter we've been getting some questions from our developers was it an effective move for you and would you recommend it to other teams uh hi timothy thanks for asking um in a nutshell i'll say yes it was absolutely effective um you might have heard of google pay

but let me first tell you the scale of the problem you know we are trying to uh launch in 30 countries on two platforms android and ios and serve users in all these countries we have 150 million plus users now as a result we have two code bases right ios and android and there's total 1.7 million lines we also had feature disparity the the feature being implemented in each was happening at different rate um also uh tech that was building up and we needed more and more engineers to keep up on development on these code

bases so so we started looking at flutter and after weighing the pros and cons of a rewrite in the migration we decided to rewrite everything the good thing was we ended up with 35 smaller code base 1.1 million minds compared to 1.7 million lines and at the same time our tech debt went down by 90 on a per engineer basis now once the rewrite was done we also found that our engineers were 20 more productive in terms of feature implemented because of the rewrite we were also able to merge all the duplicate release process experimentation

uh the launch process security reviews because now everything was done on the flood report base plus the best part was with every engineer working on the same code base we were able to take the ios engineers and android engineers and get 50 engineering efficiency immediately because they were all working on the same thing now if i had to go back i would absolutely make this decision all over again and to answer your question yes i will recommend it to any team that builds on multiple platforms okay thank you thanks for joining us today so one

of the most interesting things about mobile development is that phones come in so many different shapes and sizes and one of the latest trends is foldable phones one great example of this form factor is the surface duo from microsoft which combines the best of android with the surface team's hardware engineering expertise and we're happy to announce that microsoft has been contributing code to flutter over the recent months here to tell us more is guy merin who leads surface developer experience engineering in the last year we've seen new device form factors emerge the foldable and dual

screen devices this new form factor is great for productivity when you're in your home office or when you're on the go the device adapts to you when you're creating content playing a game watching a video typing or just reading and browsing the web for us the mobile developers it means new scenarios and user experience to explore in our apps first your app can now run on two screens and not just one you have more screen real estate to show content and interact with your users when thinking about two screens you can also utilize various dual

screen design patterns such as the least digital view the companion pane and other ways to organize your application ui the foldable form factor also provides opportunities for your app to share content with another app for example when two apps are running side by side and by adding drag and drop functionality to your code we want developers to take advantage of foldables and dual screen devices regardless of the platform or app that they're building on today we are happy to announce that we are collaborating with google and bringing foldable support to flutter we're contributing code to

enable flutter apps to take advantage of these new opportunities with devices like the surface duo but also enable it on other devices like for manufacturers like samsung and others let's see a demo now the best way to demo anything flatter is by using the flutter gallery app that we are all familiar with this is the surface duo emulator which you can download today let's run the flutter gallery app and look at the widget the app is started on a single screen so let's spawn it across both screens now as you can see the app reacts

natively to dual screens and repositions the assets across both panes this is typically the first step that you will take in your app start thinking today of the new layouts that you may want to show now that you have two screens but flutter is all about widgets so let's see those in action we've added foldable support for the existing flutter widgets for example when you use a dialog it will now be hinge aware and will display according to your choice on the right or left pane we've also modified other model routes pop-up menus and other

widgets let's move on we've added a new widget to help you position assets onto screens we call it a two-pane widget you can use it to place assets on the right pane or on the left pane it will also display correctly on a single screen phone or a tablet-like device the two-pane widgets makes it easy to support all these new form factors but enough with demos let's dig into some code now we've added display features to media query you can use it to query the type of displays you have and the position of the hinge

when you're using the two pane widget add your own widget and content to either the left or right pane let's summarize what's new foldable and dual screen devices are available now and ready for you to try them with your app you can use a dual screen device or a dual screen foldable emulator the code and widgets we've previewed here are ready for your review and your feedback we want to meet developers where they are at and today we're super excited to share these news with you the great flutter community all the samples and widgets are

open source and ready for your contribution we're excited to see what you build with them in your app thank you and back to you tim so let's talk about portability last year we gave you an early preview of web support so today we're delighted to announce that flutter's support for the web platform has hit the stable milestone this is a huge leap forward for flutter building on the portability of darts the power of the web platform and the flexibility of the flutter framework to deliver the same experiences on the web as on mobile and it's

exactly the same flutter framework it's not a fork it's not a different edition the web is just another device target for your app so not every web page makes sense in flutter but we think that flutter is particularly suited for app-centric experiences things like progressive web apps that integrate with a user's environment including installation offline support and tailored user experiences single page apps that deliver a client rendered experience and existing flutter mobile apps that want a fast path to the browser so i thought it'd be fun to chat with dion almayer who is responsible for

the web developer ecosystem here at google including of course the chrome browser and get his take on how flutter fits more broadly to the web platform as a whole dion thank you for joining me today thanks a lot tim thanks so much for inviting me to share my excitement really about flutter 2 and the availability of web support you know we think the web is an incredibly broad tent it was born as a content platform and enables richer capabilities for publishers than ever but we've seen this open platform evolve into a great one for use

cases such as commerce and of course apps now the brawl 10 has allowed for many web frameworks and approaches to innovate offering you the developer choice and there's plenty of room for flutter to join the fun now the web has many strengths including ubiquity and reach so if you're building a flutter app you now get to reach users outside of app stores and with the power of urls users across operating systems or device types could be directed to any part of your app from links that are shared by friends clicked on in search from an

email from anywhere so i remember when spotify came into cds one year and shared their story of their first progressive web app and how it drove so much engagement because many users were simply looking to listen to a song and were now able to go straight to that action versus facing any install friction high quality pwas like these are now possible due to the web pushing on two areas first platform improvements these enable fast performance rendering and we know this is really important to the flutter community second bringing capability gaps to the web in a

soft trusted manner project fugu is our main umbrella for this effort and pwas are just a great fit for flutter because of the marriage between on the one hand a world-class developer experience for app development and with the other the web platform ingredients that can be incorporated by the flutter engine so you get improvements for free as both flutter and the web evolve now we've seen this at work as flutter's web support has transitioned from tech preview to beta to now production the flooded team were able to try different rendering approaches you know starting with

the dom but then canvas kit taking advantage of new apis to help with ergonomics and speed up performance this is where web assembly and webgl open the door for massive optimizations which the flutter team has done wonders with we're collaborating in many other areas such as improving text metrics new accessibility apis and more so hope that you and the flutter team collectively keep pushing us further to enable the next generation of experiences because we really do know that we've only just begun so with the flutter and chrome team working well together we can iterate on

web platform features that flutter can abstract and make easy for you to use so you could just focus on your app now also users are clamoring for high quality pwas so flutter gives you a great way to ship them and i can't wait to see what you the developer do here because i've seen how the flutter community always delivers on high quality creative experiences dion thank you so much it's great to have you join us thanks again tim appreciate it so since we announced beta support for the web we've been focusing on some major architectural

improvements that extend and optimize the core flutter framework for the web perhaps the biggest thing that we've been working on since the preview as dion mentioned is performance and we've been making a ton of progress we recently switched our default for the desktop browser over to a new canvas kit renderer that combines skier and wasm to couple a lightning fast web graphics engine with the productivity and ease of use of flutter and we're seeing huge performance gains as a result so i want to show you an example of this with a demo from felix blaschke

who's a developer in germany who's been experimenting with fluttergraphics on the web [Music] [Music] even more fun i can take the same demo and run it multiple times simultaneously on the same machine thanks to the power of flutter [Music] so performance is important but it's not the only thing that we need a flutter app that's running in the browser should feel like a web app so we've been adding features to flutter that help you use the best of the web for example hyperlink widgets text autofill control over address bar urls and routing and pwa manifests

and thirdly we want to make flutter web experiences feel right whether you're using a mobile phone or a laptop with a keyboard and mouse and regardless of what shape and size your browser window is so we've added interactive scroll bars and keyboard shortcuts we've increased the default content density in desktop modes and we've added screen reader support for accessibility on windows mac and chrome os i want to show you one example of the kind of app that shines really well on the web irobot is the company behind the popular roomba robot vacuums but they also

have coding robots that empower the next generation of innovators let's take a look at their root robots child may have what it takes to become the next great digital visionary you just have to allow it to take root coding shouldn't be something just computer scientists do it should be something everyone can do and root makes that possible [Music] it's easy for coding to feel abstract but root teaches computer programming in a new way it starts with a language so simple that a young child can use it even before they know how to read irobot built

their app with flutter and today they're launching the web version of their experience so here you can see the app running in the browser using the same code as their tablet app on the left side you can see their visual code editor which lets you drag and drop commands and flow structures that will run on the robots and on the right hand side of the screen you can see a simulator that shows a virtual robot and lets you test out your app before running it on the real thing they have a whole library filled with

different project ideas and three different coding levels within the project aimed at different age levels and of course everything you see here is built with flutter including the simulator with the same code shared between ios android and web browser it's really cool to see irobot using flutter for educational purposes and i hope you'll check it out yourself at code.irobot [Music] of course we're using flutter's web support ourselves one example that will be familiar to most of you is dark pad our web-based scratch pad for exploring flutter and dart code we also use it throughout our

documentation so you can see how to work with a widget in line in your browser without first having to copy it into your app there's so much more to say about running flutter on the web and so we have a breakout session dedicated to this topic where mariam haznani and john ryan walk through building and deploying a web app with flutter so you've already seen how portable flutter is with the ability to go from mobile to web and the great thing about building on open source foundations like skier is that we can take this work

further still including three platforms that together reach well in excess of a billion users windows mac and linux today we're delighted to announce that we're also opening up desktop to the stable channel of flutter enabled with an early release flag this release lets you produce standalone executables for each platform mac os linux and windows and you can even use the developer tooling provided on each platform to submit apps into the store we're excited that everyone can now run flutter natively on their development workstation this isn't just our work it's been a community partnership microsoft has

contributed a number of pull requests to the flutter engine to use the latest windows runtime apis when running on windows 10. on linux canonical has been a fantastic partner and i'd like to have them tell you about some of their contributions to flutter hello i'm ken vandyne engineering manager for ubuntu desktop at canonical when desktop application support in flutter was announced we saw an exciting opportunity to make linux distributions including ubuntu an attractive target platform for flutter app developers flutter's native multi-platform story is growing rapidly and we wanted to be at the vanguard we worked

with the flutter team to bring desktop linux support to flutter making it easy for app developers to publish their apps for linux by making linux a first-class platform in flutter we are inviting application developers to publish their apps to millions of linux users and broadened the availability of high quality applications available to them we not only enabled flutter for linux we also worked with the flutter team to publish the flutter sdk as a snap in the snap store the app store for linux by publishing the flutter sdk as a snap we've made it very easy

to install and set up your development environment to build mobile web and desktop apps with flutter on ubuntu even with just these basics in place we're at a very exciting point in our flutter journey linux support for desktop apps is rich enough that we can recommend it for developers to use today we continue to support flutter for linux keeping in sync with other desktop platforms but that's just the start we also want to give developers a rich toolbox of window types to create effective user interfaces across platforms to do so we will work to bring

full multi-window support to flutter for desktop across all the desktop platforms that flutter supports we are working with the flutter team at google on the specification now and we will start the engineering work very soon of course plugins are an essential part of the flutter app ecosystem as well we are working on enabling popular flutter plugins for linux including flutter support for firebase bluetooth network connectivity desktop notifications and more furthermore while enabling app developers to bring their apps to the linux desktop we thought it would be nice to bring along the ubuntu style as well

ubuntu has a very distinct style which we are proud of we call this style yaroo which is a community-led effort within ubuntu we have worked with the yaru team to bring yaroo to flutter which takes material as the base and applies the ubuntu style colors and fonts this enables app developers targeting ubuntu to match the distinct ubuntu style with ease now that we have enabled flutter for linux for other app developers it's time to further our commitment by building our own linux apps with flutter as we've already announced we are developing our next generation ubuntu

desktop installer in flutter soon every user who installs ubuntu desktop will be doing so with our new installer built in flutter using the yaru style along with the new installer the out of the box experience for devices pre-loaded with ubuntu will also be powered by flutter choosing the installer as our first app written in flutter is a bold move to say the least it's the first thing our users see and as everyone knows that first impression is critical it not only has to be beautiful it has to be robust and reliable it has to run

on a wide range of hardware ranging from old pcs or laptops to the latest hardware on the market the user experience can also be very complex with advanced dialogues for disk partitioning supporting a huge variety of possible configurations we feel flutter is up for the task and choosing it for the installer is telling the world that choosing flutter for linux apps is a great choice the desktop team had not only worked to make linux a first class citizen in flutter flutter is the default choice for future desktop and mobile apps created by canonical we look

forward to working with you thanks thanks so much ken it's a really big deal for us that you picked flutter for the very first experience users have of ubuntu and we're looking forward to continuing to work with canonical so we talked about how the key theme for the flutter 2 release is portability upgrading your code to be able to run on six different platforms ios android web windows mac os and linux but there are even more screens out there beyond the kind of operating system that you might have on your phone or your pc so

i'm delighted to introduce another customer who is using flutter to bring beautiful user interfaces to light in a critical part of their own product toyota is the world's biggest selling automaker with over nine and a half million vehicles sold in 2020 and with cars beautiful tailored user experiences matter toyota a building flutter right into the heart of their core products and so i want to hand over to daniel hall to share more about their plans with flutter hello i'm daniel hall chief engineer at toyota motor north america as well as global chief ux designer at

toyota connected basically what that means is i'm responsible for leading design and development for our next generation in-vehicle infotainment systems today we're excited to announce that toyota is partnering with flutter to bring a best in market digital experience to vehicles by building infotainment systems powered by flutter using flutter marks a large departure and approach from how in vehicle software has been developed in the past while we're not ready to share our final product just yet we'll take a little bit of time to talk about why we chose flutter and how we're using it at toyota

so why did we pick flutter at toyota we continually evaluate options for bringing the best possible user experiences to our customers flutter immediately caught our eye for a number of reasons foremost toyota customers expect a consistent and high performance in-vehicle user experience to match the overall quality of toyota vehicles flutter's rendering engine provides good performance in a constrained environment and features like aot compilation give us the consistency we're looking for in an in-vehicle technology flutter also allows us to provide an in-vehicle user experience on par with what customers have come to expect from their smartphones

everyone can probably think of a bad experience they've had interacting with touch screen apps outside of their mobile phones these apps are often sluggish or just don't feel quite right what we're doing with flutter at toyota directly addresses that problem by leveraging flutter's cross-platform mechanics flutter's done a great job of packaging touch mechanics that just feel right no matter where they run finally after noting flutter's performance traits we were really sold on flutter's developer experience despite releasing our apps on a single target platform we leveraged all the multi-platform tools that flutter provides for the pipeline

from design all the way to release even as an alpha feature desktop support combined with hot reload provides a fast development workflow the variety of different release targets that flutter supports such as ios and android tablets are useful for all sorts of physical and digital user testing we can even leverage web support as an integration into design tools to improve our feedback cycle with product designers of course this developer friendly workflow isn't just for our own benefit as we create software our ultimate goal in using flutter is to streamline in-vehicle software development resulting in a

better customer experience a technology that enables high productivity with a relatively low barrier to entry allows us to create a tighter overall feedback loop in our design and engineering processes these faster iteration cycles allow us to collect and integrate feedback from our customers earlier and more often which helps us create the best experience for our customers we talked a little bit about why we chose flutter but what are we doing with it that is unique to toyota well to start with we're using flutter's and better api to leverage the technology in our infotainment systems powered

by automotive grade linux the flutter engine's architecture makes it relatively easy to support embedding in our target environment it's just a matter of cross-compiling the engine and wrapping it in an embedder the embedder api is fairly easy to use and allows us to integrate our flutter apps within vehicle systems additionally we've created several in-house tools that enhance flutter's developer ergonomics by extending them to include our design process all under the same umbrella our overall goal is to support a workflow that enables design tools to generate code so that validation and running software is immediate both

darts language design and the flutter sdk software design have enabled us to support such tooling for example flutter's approach to declarative ui and code as configuration allows us to very easily perform code generation based on designs without any complicated or confusing middle tiers of configuration most importantly while developing these toyota specific tools flutter's open source principles and high growth developer community have been critical to our success without the support of the large and open ecosystem we couldn't extend flutter to enable our end vehicle use cases at toyota we see working with open source software as

a positive investment towards our end vehicle user experiences and we look forward to playing a role in the open source flutter community we can't wait to share more details of toyota's partnership with flutter in the near future so from cars to web browsers to laptops to phones and tablets flutter truly is unique as a ui toolkit in its flexibility by bringing together beautiful fast user experiences with a productive development environment that lends itself to exploration and iteration all delivered as free open source from google there's nothing quite like it let's now go one level deeper

and talk about dart our client optimized language for fast apps on any platform why does dart matter well dart combines a unique set of capabilities for building apps for starters as you've seen already dart is portable with compilers that generate highly performant intel and arm machine code for mobile and desktop as well as highly optimized javascript output from the web the same flutter framework source code compiles to all these targets secondly dart enables true iterative development with stateful hot reload on desktop and mobile as well as language constructs designed for the asynchronous concurrent patterns of

the web and thirdly dart offers google class performance across all of these platforms with sound null safety guaranteeing null constraints at runtime as well as development there really is no other language that combines all three of these capabilities together and it's the reason why we often talk about as dart as the secret source behind flutter now we've not been standing still with dart so bob nystrom is going to tell you about some of the work we've been doing in dart to upgrade your app thanks tim i'm very happy to tell you that we have shipped

null safety for dart so now the type system helps you eliminate null reference bugs this is the biggest change to dart since we added sound static types in dart 2. with null safety we didn't just add non-nullable types to the type system we also added a slew of features like smarter flow analysis late variables and required named parameters so your dart code isn't just safe but easy to write these changes are so big in fact that the only reason we aren't calling this release dart 3 is because we managed to ship null safety without breaking

your code instead we allow null safe code to coexist with null unsafe code this lets you migrate to null safety incrementally when you want and we provide automated tooling to help you when you migrate in return dart gives you more than most other languages with non-nullable types do null safety and dart is sound that means that when your program is fully migrated the type system guarantees like a mathematical proof that no non-nullable expression can ever evaluate to null this guarantee is great for confidence in your code but it's even more valuable for the compiler chips

are so complex today that we need sophisticated compilers to make the most of the hardware compiler optimization is often about detecting that some operation isn't needed and eliminating it but that optimization is only safe to perform if the compiler can prove that the operation is never needed sound null safety gives the compiler that proof when it comes to null checks here's some dart code the getage function simply returns the value of a field on a given instance here's the assembly code our compiler generated before null safety since the parameter to getage could be null the

compiler has to emit a null check before the field access here's what you get today with null safety since the field's type is non-nullable there's no need to check for null the generated code simply accesses the field our 10 instruction function is now only three that's a small change but real programs contain thousands of these checks so eliminating them means less code to download at install time and less to execute at runtime of course working on dart isn't just about new features we are constantly improving the performance of existing features too a quote i love

from an algorithms book is efficiency determines the boundary of what is possible when we make something twice as fast your app can be twice as rich and interactive here are a couple of other improvements we've made the google pay team recently rewrote their flagship app using flutter they ramped up fast and wrote a ton of dart code so much that they started hitting the wall where the size of their application was going to harm adoption so we worked to unblock them so that they could use flutter's compile size optimizations which got their app 14 smaller

than it was with the default compilation settings servers often speak utf-8 but dart's internal string representation is utf-16 we found out that utf-8 decoding was a bottleneck for the assistant team so aska on the vm team rewrote our decoder hand authoring some parts in x64 and arm assembly to take advantage of vector instructions the result is anywhere from 2 to 20 times faster than before when you want to access features unique to a hardware platform you need some kind of interop system which flutter has long had using asynchronous platform channels recently we've been working on

a new lower level synchronous way to call native code named dart ffi that system is now out of beta and ready for production use with null safety out the door we get to turn towards the next batch of language features i want to talk about one area we're exploring to give you a feel for how we look at language design whenever i talk to developers coming to dart from kotlin the top three requests they have are non-nullable types extension methods and data classes so we have the first two now so let's talk about the last

one with the data class you define a type of the set of fields and then the language gives you a constructor equality hash code and copying operations for free it's essentially baked in behavioral policy the problem is that methodologies change faster than programming languages if a few years from now users decide that persistent data structures are better than immutable value types we can end up with deadweight language features so what would it take to be able to define policy at the library level how could we enable a dart user to essentially add data classes to

the language themselves what i'm talking about here is meta programming code that produces other code meta programming is already common in dart using code generation if you've used angular dart or the built value package you've already run dart code that generated other dart into your app but code generators can feel heavyweight and opaque and kind of bolted on so we're exploring adding static meta programming features directly to the language our goal is to enable frameworks like flutter to eliminate some of the verbose code you have to write today i'd love a meta programming feature expressive

enough that you could use it to define a data class system that feels as natural as data classes do in kotlin now we don't know what the solution will look like yet but we're actively exploring the design space okay that's a lot to absorb about the language but a fast language is no use if you can't productively write code in it so next kenzie's going to talk about developer tools thanks bob hi everyone i'm kenzie from the flutter team and today i'll be showing off four new tooling highlights available with flutter two the first new

feature we'll look at is one we call flutter fix as part of flutter two we've done a lot of work on consistency and tidying up the framework to make our apis more approachable and to make your code cleaner now i know what you're thinking framework improvements are great and bring all sorts of new and improved functionality to you but usually they also come with some breaking changes to your code well fear not because what we've also done as part of flutter two is created a tool called flutter fix that does all the heavy lifting for

you to migrate deprecated apis in your code base for example i have the budget tracker project open in intellij and this is a sample app that hasn't been updated in a couple years now so now that i updated to flutter 2 there are some analysis errors to address you can see that it's using a couple deprecated apis so let's click on one of these warnings and see how we can solve the problem i can see the deprecated member here as well as the quick fix icon and the quick fix option allows me to automatically migrate

my code to the new api so now i can see my code has been updated and the warnings have gone away we've added quick fix rules just like this one all throughout flutter and as we move forward with new braking changes in future versions we'll add new quick fixes to help you migrate your code flutterfix helps us keep the api fresh without breaking your code so give it a try and now that we've moved our budget tracker to flutter two let's move on to the second feature i'll be showing off today null safety and dart

to do this we'll fire up the null safety migration tool with the dart migrate command right now my code is in a state where null safety is not enabled but the migration tool will enable dart null safety and help me migrate my code so that it's compatible with the null safe runtime so i'll open the tool and this tool analyzes our code to determine what can be non-null and what should be nullable and from this the analysis tool displays suggested changes with the explanations for those changes so for our case all looks good to me

and i'm just going to go ahead and accept the changes and apply this migration so if i come back into my code i can see that my code has been updated to null safe dart and now that we've migrated our code to null safety we can still use nullable types but by default our object references will not be nullable eliminating a whole class of bugs from our app making our app smaller faster and more robust and that's just the tip of the iceberg on null safety and dart and on the migration tool so check out

the null safety deep dive to learn more for the third tooling highlight of the day i'm going to show you some new flutter debugging tools so let's do a little bit of work on the budget tracker app i'll get it running here next to intellij and if i play with the app a little bit everything looks good but i want to make sure that everything looks good also in landscape mode oh and it does not so it looks like we have an exception here in the run console and i can see that a render flex

overflowed by 282 pixels on the bottom now looking at this air output i can actually directly navigate to the error causing widget in my code but that's not as helpful as we'd like because what i'd really like to be able to do is go directly from an error message to inspecting that widget in flutter devtools but luckily we have created a new feature that allows me to do exactly this so when an overflow error occurs your ide will show you a message in the bottom right window of your screen and this message describes the error

that occurred as well as gives you the option to inspect the error causing widget in the flutter devtools inspector so let's do that this opens up the flutter inspector directly selected to the error causing widget and moreover we can see this directly in our ide using the inspector in the past would have required you to open devtools in your browser but now we've actually embedded devtools directly in your ide so whether you're using vs code intellij or android studio you'll always have access to this powerful tool that gives you insights into your running flutter app

so let's get back to the problem at hand and use the layout explorer to solve this issue i can see that i have some unconstrained heights here so let's fiddle with the flex values in the layout explorer to see if i can fix the problem and there we go problem solved the overflow error went away and now i know that the single child scroll view was just missing a flex value of one and that means it needs to be wrapped in a flexible widget so what i will do is come over here and wrap this

single child scroll view in a flexible widget so now it has the flex value of one that it needs and if i come into the run console here do a hot reload i can see that there are no more exceptions and the issue has been resolved in the app over time we'll be adding similar functionality for other common errors to make it easier for you to go from problem to solution using flutter dev tools all without leaving your ide and last but not least of our tooling highlights i'm going to show you some new features

in flutter dev tools i've already shown you how the inspector can be embedded in the ide but you can also open devtools in the browser where you'll not only have access to the inspector but also more sophisticated debugging tools for things like performance network memory and more some of this new functionality is available in the layout explorer itself by popular demand we have added the ability to show a visual representation of fixed layout details in the layout explorer in addition to the flex layouts we already support so now you can debug layout issues for all

kinds of layouts we've also added an app size debugging tool to devtools so let's see this in action with the budget tracker app i have already created the size analysis file for my app so i'll go ahead and import that and analyze the size we can use this tree map in the tree table below to explore our app size and visualize the space occupied by different classes and libraries looking at the overview of my app the assets are a little concerning i only use one image in this application called headshot and it's rendered as a

really small avatar in the app but i can see here it's taking up 1.6 megabytes of space which seems like way too much for such a small image so now i can revisit my assets and optimize the image or use a smaller version and then i can verify the improvement using the diff viewer in the app size tool but unfortunately that is all the time we have so be sure to check out the flutter two announcement posts to see all the highlights and new features to get these tools all you have to do is run

flutter upgrade to get the latest flutter two build thanks for tuning in back to you tim thanks kenzie our developer tools are another example of the unique flexibility of flutter built with flutter for flutter and integrated into whatever tool you're running and for those of you who want to hear more about how dart null safety works and how to migrate your apps to null safety check out the breakout session from leif peterson ok so we've seen how flutter 2 expands flutter from mobile to web desktop and embedded devices we've talked about dart as the secret

source that provides flutter with a portable productive language runtime with new features such as sound null safety that offer increased robustness and performance but the flutter ecosystem is much broader than just what we provide in fact there are over 15 000 packages now for flutter and darts from big companies like amazon microsoft adobe huawei alibaba ebay and square to packages like lottie sqlite and svg as well as individual developers like you and me who are packaging up useful functionality for others to use one great example of a useful package is from sentry who are publishing

a major update to their flutter sdk for their popular crash management and release tooling this package provides tools to help developers ensure their app is healthy on all their target platforms offering deep insights into exceptions and crashes whether they occur in flutter or in underlying components we're also today announcing a major update to our flutter plugins for several core firebase services authentication cloud firestore cloud functions cloud messaging cloud storage and crashlytics we've updated all these packages to support sound null safety and we've overhauled the cloud messaging package in particular but there's another major package we're

releasing today and i want to hand over to zoe fan to tell you all about it thanks tim hello everyone my name is zoe i am a product manager on the flutter team there are many ways that mobile developers get paid for their work monetizing apps via ads is probably one of the most popular paths for many mobile developers today we support ad formats such as overlay banner interstitial and rewarded video ads however many developers have been asking us where is inline better where is native ad because in order to create a beautiful and seamless

user experience developers want to display ads as part of their content in existing flutter view and customize it to match the look and feel of the app therefore today we're excited to announce an open beta for the google mobile sdk for flutter this is a brand new plugin that provides inline banner and native ads in addition to the existing overlay formats also in this plugin we're unifying the support for ad manager and admob so no matter what size publisher you are this plugin is able to tailor to your scenarios we've been piloting this plugin with

some of our early customers in a private beta program and many of them have successfully launched their apps with these new formats so musica is one of them today it is our great pleasure to have alan the cto of suamuzika to share his experience with us all let's welcome alan hi i'm alan and the cto of soul music is the biggest latin american music platform for independent artists in the world we support more than 16 000 verified artists in publishing and distributing their music on the platform to more than 10 million monthly active users our

content is 100 user generated meaning anyone is invited to upload music they've created in 2020 we rewrote our android and ios apps in flutter and started testing the google ads beta plugin [Music] since we are free platform and we need to monetize each user the best way possible we must have a great e-weeks ui but how it's done today with overlay banners we can hardly call it an okay experience because of that we were excited to be invited to participate in the private beta of the ads plugin where we could implement those burners in the

widget 3 at last just like a normal widget simple and clean this made it possible for us to create the best experience possible for our users while still monetizing from advertising ok let me show how it works we want to put our banner right here on this part of the album page so when we scroll it will scroll together we start by creating a stateless widget that receives ad unit name and a list of sizes then we will define our banner as the publisher banner ad that receives our sizes at unit listener and the publisher

at request we can never forget to load the banner on our listeners we're gonna listen for the loaded and the failed events and print on screen if needed on our container now we just need to put our width and height and the magic widget that will do the trick the add widget that receives our defined banner now we just need to add our newly created widget to that part of the page is the sm banner add unit i'm going to put the add in define before it's the admob banner app with the sizes i will

put the large banner it's the 320 by 100 [Music] just need to save how to reload and it should appear right now ah okay we forgot to save the widget okay hot reloading and there there's the banner it should also appear in every page as you can see it scrolled together with the all the widgets as we wanted that's it you don't have to only take my word we've had amazing metrics showing an increase of performance since we made a change when we launched the new app with the google mobile ads sdk for flutter we

saw and 350 percent increase on impressions with a four 43 percent increase on ctr and 13 increase on our ecpm that's it hope you guys liked and so how easy it is to insert ads in our apps with the new ads plugin thank you allen for sharing your experience and also huge thanks to many many other developers who helped to beta test this new plugin and make our mobile ad solution more robust the google mobile ads sdk for flutter is available today for you to download from pub.dev we hope this new plugin helps you unlock

more revenue growth for your flutter apps if you're interested to learn more about how to monetize your apps via ads we have a breakout session later and we look forward to seeing you there back to you tim thank you zoe you know community is at the heart of what we do as an open source project we have over 750 contributors to the core flutter framework alone to say nothing of the tens of thousands of you from around the world who organize and attend meetups write blogs and samples create packages and file issues and feature requests

flutter is an attempt to raise the bar for ui development everywhere and so it's not just a google product it belongs to all of us as someone who's been privileged to be able to travel around the world and meet with people using flutter i'm particularly excited by the impacts flutter has made in africa where there are some of the most creative and entrepreneurial developers i know drawing attention to an often overlooked part of the world so i wanted to introduce you to a few friends now [Music] i'm a florida developer from lagos nigeria a software

engineer from ghana mombasa kenya both nigeria rwanda angola i'm a flutter dev from ghana towards the end of 2017 i just saw that flutter is released and it's by google i discovered flood time 2018 i discovered flutter from communities from a friend of mine a friend of mine introduced me to flutter turning my designs into full-fledged applications was always a painful process until i stumbled upon the flutter website early last year i spent a while building a few css inspired effects for web his influencer what i love most is the creative freedom it gives you

it's been fun so i've built a couple of apps for clients i have built a couple of user interfaces and shared them on github you have the freedom to arrange code the way you like that is really important to me and it fascinates me with horrible you can basically sit side by side with the designer and change themes colors designs and preview it as you are doing it and i've worked on five different real-life applications using flutter fata gives me complete control over my interface there are no limits to what we can do with flutter

i get a couple of my inspirations from my own designs again designs from dribble from other people and um looking at existing native applications i can't be able to say okay what if i try to build this thing further i love design and it's always exciting to bring designs to life i love how i'm able to build consistent uis across platforms and i love how my apps run very fast so flat has opened doors for me i have gotten a couple of jobs from florida i get the opportunity to end a living for myself doing

something i really do enjoy it has enabled me to work with companies in india in the uk and in the u.s this is my flatter story that's my story [Music] so we got lots of other great content for you today there are four breakout sessions there are some community sessions there's a leadership roundtable ama with representatives from flutter and firebase and new codelabs and demos to explore we hope you'll join us for some of these but before we're done one last video of a new flutter app that we think you'll love the first wallace and

gromit feature length story in over a decade is coming out and it's delivered through an app built using flutter let's see what the team has created the big fix-up needs your help we're using the latest technology to invite everyone to come and help us hi i'm beth product manager at fictioneers and i'm here with my colleague rex to talk about a brand new project we've been working on for the last 18 months it's a new storytelling experience featuring the lovable wallace and gromits and it's called wallace and gromit the big fixer our goal with the

big fix up was to create an innovative app that delivered meaningful content to your smartphone spanning a variety of different types of media in real time for us harnessing flutter was an obvious choice it was a great fit for the breadth of media we wanted to share as well as for the real-time storytelling components firstly flutter in its plug-in community enabled us to quickly navigate a complex native integration i'm now going to hand over to my colleague rex raphael our senior software engineer rex developed an open source unity integration specifically for our project which is

available for developers now which is one week we're able to ensure compatibility of our unity ar tech stacks such as ai record ar foundation and all the libraries and we're quickly able to validate and establish the value of presenting the casual gameplay and media in flutter using less resources by having rich but shorter ar interactions provided by unity moving forward flow the plugin api made it easy to maintain the interaction method channel api is easy to understand and allows us make bi-directional communications between flutter and unity while retaining that beautiful and high performance floater rendering

engine that just makes our app look and feels great thanks to flutters animation support we were able to quickly create a unique look and feel for our wallace and gromit app through animations and user interface in particular the pre-design behavior made it easier for us to achieve our goals from that we then customize the effects to suit our wallace and grommet style we're also able to implement drawing-based animations using adobe after effects body moving and dotting something that really helped in terms of efficiency was that we were able to validate our approach to the ui

through wireframing thanks to existing material component library we were able to quickly bring together components that built the backbone of our application iterating on our wireframe app to bring in custom higher fidelity design components was helped greatly by the component-based architecture overall flutter helped us to achieve our ambitious vision of storytelling and we're really excited to see where we can take it in the future if you want to check out how we've used flutter and play the big fix up yourself you can download the app now for free on the app store or google play

hey everybody i'm andrew brogdon and welcome to the ass flutter leadership roundtable live at flutter engage how live are we you might ask let's just say there's a decent chance my daughter might wander in here at some point so uh if you see a four foot tall version of me wander into the shot don't worry it's all part of the fun speaking of guests though we have a bunch of leaders from firebase and flutter that have sat down to answer your questions let me get them introduced to you uh first up how about eric seidel

flutters director of engineering good morning andrew nice to see you nice to be here uh so of course you have been with flutter since the beginning right like you you started with flutter back before it was even called flutter right yeah we uh we started this project uh six and a half years ago now uh ian myself and a couple other uh folks and yeah it's it has been a wild ride awesome thanks for being with us here today speaking of ian flutters tech lead ian hickson how you doing hi andrew how you doing and

you were telling me the other day that you got started on the project when somebody passed you in a hallway is that right that's right adam passed me in the hallway adam barthy he was one of the other co-founders and he asked me to write some documentation for us writing specs for for what the project was called at the time sky i believe and i was like sure i'll help you happily write some some specs for you and then a few weeks later i started writing code and i never looked back that sounds like my

story i started coding and then didn't want to do anything else after that um also with us is mariam hasanani a flutter product manager for the web hi everyone how are you doing uh so miriam you're responsible for sort of defining how flutter works on the web right yeah we've been hard at work and we're excited for you to build with flutter web cool and of course last but not least you know and love him from stack overflow and a bunch of firebase videos frank van pufflem better notice puff hey andrew and hey flutter developers

i'm so excited to be here and i brought help sparky is going to answer the questions together with me so it's going to be great there you go awesome and of course speaking of questions we have some that have come in on twitter already and on youtube comments from our promo video back a week or so ago but we are taking live questions behind the scenes andrew fitzgibbon from the devrel team is monitoring the youtube chat and twitter and so if you have a question right now go ahead and type it into the chat he'll

be pulling those and we'll get to as many as we can um that said let's get going uh first question upload looks like we have a fun one to start off with what is the coolest dashitar you've created or seen um eric do you want to start off with this sure uh so full disclosure my dash guitar was the wizard uh with a very pointy hat maybe to match my pointy hair as a manager these days um but i think the coolest one i've seen is the the knight with like the helmet and the sword

i didn't get that one but uh i really like it uh ian how about you i i got the uh i got a dash who was holding a tablet um with computer code on it and when i looked very closely at the tablet i noticed it was javascript not dart so i suspect that she's been moonlighting on our flutter web team there you go well speaking of flutter web miriam did you get the same dash guitar or you get a number no i did not i didn't know that we had dash working on web um

but i think i got the super hero one um but the coolest one i've seen on twitter today is the one that looks like tim uh tim smith uh frank what about you yeah i did not see that one but what i've been doing actually i've been trying to create a mashup of dash and sparky so i've been meshing them together quite a bit didn't get it fully right but luckily the flutter team came to the rescue so if you check firebase on twitter we actually have an awesome custom dash guitar for us right now

well that's the that's the poll you have with our team right there um all right um awesome let's go into uh another question this one came in on twitter this is from jamba arden i believe or john bardot uh when will flutter webb be ready for production eagerly waiting for it miriam this you know you're the pm for florida on the web what do you think uh so great news um as of today flutters web support is now available on the stable channel so um now you should be able to use web as a target

device for your flutter apps without having to enable any flags which means for those of you who already have existing flutter web apps you can now build your app in the stable channel and if you're new to building flutter web apps check out flutter.web uh for more on how to get started awesome yeah we just updated our getting started guides there's a lot of good resources there um looks like we actually have a follow-on sort of question this one also came in on twitter for you mariam from kaimon 1984 chimo 1984. what is an ideal

use case for flutterweb uh thanks shaman that's a really good question um so with this initial release we really focused on building a foundation for rich interactive web applications so think of things like if you have an existing flutter mobile app you can use the same code to build a web version and then expand your user base so that now you are reaching web users as well i think we're also additionally a good fit for building progressive web apps or pwas or single page applications so those applications usually have a lot of dynamic content a

lot of interactive ui um and so the reason we really believe those three are the best fit um is that we still have some work to do around really supporting those uh document-centric type pages uh that you see on like traditional html um with a lot of rich text static content um and so i think right now we're really really good for web applications that is sort of flutter's bread and butter right application ui right yep awesome well thank you time on or kaimo uh 1984 that's a great question um moving on here's one from

youtube this co i and i'm sad i did not get this person's youtube name this comes to us from the poignancy um which is just an awesome name for an account will flutter fire ever become an official firebase sdk and if so when puff i think this is your department i think so too and it's a great question so thank you to point and see um yeah we at firebase we love flutter and for those of you who don't know there might be a few floated developers out there and firebase is a set of backend

services that allows your footer application code to talk directly to our server side functionality so with firebase right you can add sign in by just writing photo code instead of having to spin up your own oauth server right or directly talking to a database right without having to set up your own rest api um yeah and our team loves flutter right because we love being cross-platform right we're across development platform and yeah flutter is also cross-platform so they go together like peanut butter and jelly or like sparky and dash right now it's a bit of

a long answer i think i have three parts for you one of them is the first one which is um essentially the sdks and firebase has a lot of platforms that we support but our primary sdks are often ios android and web it's one of the reasons we love that footer added web support um and what we've done to make those available to your flutter app is that we we sort of take the official application or sdk sorry and we wrap that in some flutter code to handle interrupt for you and um so those wrappers

we call flutterfire but as soon as you're using firebase in your floater applications you're already using the official sdks because they're right under there now that leaves the footer fire library itself and that library is indeed has been going through some changes as flutter has been adding uh functionality platforms mostly right we also had to update that so we've been seeing some breaking changes there and those yeah have have taken some some iterations to get through but i think we're now slowly stabilizing those we so we see more stable api releases coming there if you

find any issues by the way or if you see something that doesn't work the way you expect it to work always report that on the open source repo and get it because we might not know it if you don't tell us so that's one second one is documentation and we have a getting started guide for flutter and firebase in the firebase documentation on firebase.google.com but after that the best documentation lives ad and now i need to always check because i have this tab open in chrome all the time it lives on firebase.flutter.dev so i never

have to type that one but that's where you find great documentation that's really tailored to flutter usage so highly recommend checking that out um one of the great things about that documentation is that it's also open source so if you find a mistake in there or if you think we could explain something better that's great because we're looking forward to either an issue report or a pull request third one is other things other materials that we create like like video content and last year you might have seen that we've been doing from the firebase site

more firebase flutter content so we've done a few codelabs a walkthrough video for these i've done a live coding talk nerf wrecking at the firebase summit and then um let's see uh taunted the video todd kerpelman one of our developer advocates and actually he's about to finish a series on using real-time database and flutter application i actually just realized that that might not be announced yet so let's just keep it a secret between us right now yes so clearly right we are working hard to support more of flutter many firebase like team members love flutter

uh probably as much as many developers out there we're great fans and we can't wait to bring more of firebase to more flutter awesome well thanks you uh thank you bob and it sounds like there's some opportunity you know much like flutter is open source pretty much completely um same is true for a lot of firebase stuff like these plugins for flutter fire people can get involved if they want to right exactly yeah all of this uh most of our sdks are developed in the open right so we're always looking for for people to either

contribute there or just tell us if something doesn't work right we test a lot but we might not catch all books that you encounter so yeah a great a great bug report can be can make a world of change awesome uh well thank you and thank you again the poignancy hopefully that was a poignant answer um uh the next question comes from netlinks uh and this looks like it might be one for ian with more than 8 200 open issues on github clutter seems a bit understaffed are there any plans to improve the situation or

what are your priorities uh ian as tech lead you're sort of in charge of our processes you want to talk a little bit about issues and and how they're managed yeah sure so we have uh as as the as network says we have 8 000 or so open issues uh but the important thing is that we are resolving issues about as fast as we're getting them so for example last year we had about 15 000 issues filed in our github repo and we closed about 15 000 issues uh so we're actually pretty happy with the

the rate at which we're fixing bugs and resolving bugs the the number of issues is more a marker of how many users we have because the more users we have the more bugs get filed and the the number of issues we're resolving is more a marker of how many people are contributing and we have quite a few contributors we have uh over 200 people who are officially part of the flutter hackers group on github about a quarter of those are part of the google team so most people who are contributing to flutter are in fact

not part of the google flutter team but are part of the open source project they might be from microsoft or from canonical or never code or be volunteers who are working on their spare time so obviously different people have different amounts of time that they're spending uh contributing to uh the product but uh hopefully we'll be able to get more issues resolved uh to make net links happier so there you go all right again thank you for that question that links um looks like we have one from mariam coming up uh this is from by

lolly feylali uh this came out on twitter as well uh when will flutter webb drop the hash in the url and why does it exist to that pound sign that you see at the end of the urls that is an excellent question um okay so let's start with the why does it exist so today we use something called the hash url strategy and that is something we initialize when we are initializing the web engine um so what that means is that when you have fluttered name routes you are we're basically initializing those as part of

the hash that's attached to the url um but now today with the stable release we have a way for you to customize that url and drop the hash from the url that way you can make your url any way that you want configure it with any other sub urls you need to be able to deep link or share the url with friends and family and users but then also we have a plugin that somebody in the community has created so thank you it's called url strategy and it basically does what the instructions we also have

in our documentation do but just in a very easier way you just put it in your pub.dev and then you're able to configure your url and drop the hash awesome thank you miriam yeah i know we've gotten some questions on that before so i'm glad it came up uh came up today um let's see what else we've got um this sun comes in from silvio plus ah flutter is still having lots of compatibility issues with the new max m1 architecture are you working on some solution or should i buy an old intel mac eric maybe

this is a good one for you i guess i would start by maybe saying you don't need to buy a new computer um so i would encourage you to try again today um there's been a whole lot of improvements to the m1 support as part of the flutter two release um i'd also start by saying that um advancements to platforms like m1 on the apple side or things that come down from android or other vendors are things that we address immediately so like we we learn about the m1 uh the same time you did and

we ordered an m1 dev box the same day they were available and we've been working on them since we broke down the m1 work into sort of three buckets one of which is you know do apps run well on the m1 do the tools that are used to develop apps run well on the m1 and the third bucket being you know can we develop our own tools on the m1 and the first two buckets as far as i know everything should pretty much work um certainly with the flutter two that came out today certainly if

you are hitting issues with the m1 or otherwise we want to hear about it as ian alluded to we get a lot of issues every day we triage them uh and we want to address them as soon as possible so yeah try again with with uh with flutter two um but i also would expect it to work well and it's gonna just continue to get better as we continue to you know make more code changes what was interesting with the m1 is that it was almost like a whole new platform for us because we'd never

done arm as a host before and so you know we announced today web and desktop but really silicon apple silicon was kind of its own other platform that we had to support uh which is harder to get big banner messages for you know we now have support for the current mac os release uh but it is still a significant amount of work yeah i mean you sort of have to build that up from the ground level up right you got to first get make sure the dart and the vm and all of that's working and

then you got to make sure you the embedder is working and then just go up through the layers of flutter from there right exactly very much like you would end up doing for a new platform thanks well sylvia hopefully that gives you a good bit of confidence about the m1 architecture thanks for the question uh all right uh next up do the flutter dart teams ever plan to add official guidance for app architecture uh similar to jetpack and android ian do you you might want to talk about this and also sort of how we where

we decide to offer guidance and where we don't that kind of because that's an interesting question too i'm laughing because you're throwing this to me as if you don't know the answer but you and i have been talking about this for several weeks uh yeah we have in fact uh just uh i think either today or very soon we'll be landing a new template uh into the into the florida master branch um and uh that template will be uh basically an answer to this question it's you know how do you create an app with all

the best practices you know state restoration how do you have your app state and so on uh it's not the only answer to the question the whole point of programming is there are many answers to these questions and different apps have different needs but we hope that this particular template will really help here and we might create other templates in the future for different kinds of architectures maybe you'd rather use uh redux instead of the the state mechanism that we have in this template uh so this didn't land today for a flood or two but

it will hopefully be in the next day we'll release in a few months awesome yeah i mean this these concerns show up for developer relations you know my team all the time it's like where are we really being useful by saying people to people this is the well-lit path and we we recommend it and where would we be cutting off people from their own ideas that might in fact be better in the long run right we took a long time before we ever sort of anointed a state management approach as a good one for beginners

you know we settled on provider which is a great package uh from remy um but we because we didn't want to sort of solve that problem in a way that would stop other people from solving it in ways that might be better awesome okay let's um let's see what we've got coming in on the chat um this is from khaled ahmed thank you colin will null safety break existing apps is there some stuff that needs to be migrated um who might want to take that one eric do you want to take a stab at it

you certainly know a lot about null safety uh yeah i think probably ian or i could answer this the the idea is that you should be able to migrate like when they'll safety was designed to be an upgrade um you uh there's even a tool that you can use i believe it's called uh dart dart fix um and you can run it on your on your code base and it will help you uh go through changing uh to your code to make it null aware ian might have more to say dark migrate i believe is

a tool but yeah it'll run it'll give you suggestions uh if you look earlier in the keynote we we have a whole section that talks about how it works um the idea is it should not be breaking uh the you really would like your dependencies to be migrated first uh your life will be harder if you migrate before your dependencies migrate it's possible but it'll be less effective so you know if you have a package that you're using that isn't migrated yet go ask the developer of that package to migrate um but otherwise you should

be good to go and yeah it should not be particularly breaking there's no um as was mentioned in the keynote this is why we knock we are not holding this release dart three it's start two because it is in fact backwards compatible with non uh null safety yeah and it's uh just like any other language feature it's in the pub spec you declare which dart language version you want to roll with and so if you're dart 2.12.0 or higher then you're opting in we just went through this process for uh our samples and the flutter

samples repo and we did it just as ian was just describing sort of we looked at our samples and how many had a dozen dependencies and how many had zero dependencies we just sorted them in a spreadsheet by that and started at the top and went down from there um and so we're actually literally right now landing those in the flutter samples repo now that the uh the release has gone out the other good thing about the way we deployed uh null safety is you can literally uh compile an app that has non-null safe code

and no safe code simultaneously and the compiler will use null safety optimizations and and the ability to know what the types are when it's compiling the null safe code and then when it might when it has a boundary to non-null safe code it will add null checks for you uh we we call this um non-sound null safety if i remember correctly uh and so you can you can run your app in mixed mode essentially with both types of code in there and that should work fine yeah i know the dark team is very specific about

the sound and all safety is the particular type that dart offers uh which has some advantages because once you have that for all your code there are a lot of checks you don't need to make anymore and it can make your code a little bit faster and tighter i imagine there'll be a lot more detail on that in leaf's talk later today so folks interested in all safety you're going to want to stay stay on the line for that one um but thanks um let's see we've got another live question this one comes from ankit

kumar is flutter good for 3d rendering that's an interesting question uh puff looks like he's interested in it i don't know eric or miriam or ian who who'd be interested in that one i i can take it um i mean we've built flutter as a 2d system that said lots of people have done 3d with it um the apis that we provide are for you know drawing 2d objects on a screen you know as you would use for a typical mobile app um but the transforms that we use do support 3d so people have done

interesting you know two and a half d or 3d sort of setups also flutter the flutter content itself can embed other uh textures other opengl textures so you could write some opengl code to write some 3d and then embed the resulting opengl texture in the rest of your photo app and we've seen folks do that in fact i think even in the keynote there was this mention of um the wallace and gromit app at the end and that has both 2d and 3d in it i think some of the 3d parts are done in unity

might have to go look and learn more but mashing the two together is possible but again the bulk of flutter is designed around a 2d experience i believe grant skinner who everybody saw in the keynote doing some wonderful things with florifolio has also had done some vignettes for flutter that had some of them had some 3d elements just spicing up and adding some interesting design aspects to what would otherwise be 2d app ui uh and i believe you can find those on g skinner's site so those are worth checking out as well he did some

wonderful things there on his team rather um awesome uh let's try another live question this is from blessed george vargasi or varkeys uh what about flutter for desktop ian maybe do you want to talk a little bit about where we are on desktop yeah we are we have flutter for desktop is available now in the stable channel uh although we don't consider it to be fully stable yet um we support uh mac os we support uh windows and we support linux currently um what more is there to say we don't support necessarily all the features

you might want for example we don't yet have support for uh multi-window although that is coming we have some efforts uh going there uh but support for you know your basic uh one window app is pretty solid i've done a bunch of them myself uh there's an app i wrote for solving sudoku's that i uh run regularly on my mac and it works great yeah i would say just a little bit more like one of the things i love about flutter desktop and particularly love about it now being available on the sable channel is it's

just so nice for development like it's just so you just turn it on and then you just flutter around and just boom it's right there um and it's it's great for that sort of workflow so yeah try it check it out and send some feedback oh i guess one other thing i would say is that it's been amazing to me the overlap between flutter web and flutter desktop we sort of think about the desktop work in sort of splitting into two camps one is like how do you teach flutter about what a mouse and keyboard

are and what a mouse and keyboard are like we had to do that for the web because the web has so much sort of desktop-ness in it in parts but then there's also the other part which is like well how do you teach the flutter engine to run a really big phone that's plugged into the wall um and you know that it comes in mac linux and and windows flavors and and that sort of uh engine level work uh is is sort of what ian was alluding to like we have an engine for mac we

have an engine compiled for linux and we have an engine compiled and that's maybe less far along than the like can you use a mouse and keyboard with flutter which you can because we put it on the web now so hopefully i would add to eric exactly what you said a lot of what we needed to do to make web stable was to have those desktop form factors supported um being able to use your track pad your scroll wheel your keyboard to interact with your web app on on desktop browsers um but i'd also look

at g skinner's flutterfolio and you can kind of see how you can build mobile web and desktop app across the board and how those features go across those three different platforms and where we use each of them it's actually interesting to look at why we haven't yet labeled desktop as stable and two of the big reasons are we don't have good testing on our own side to make sure that we don't regress desktop when we add new features and that might not matter so much to someone writing a desktop app but it matters a lot

to us because we want to make sure that when we write new code for desktop we don't break things that are already working the other big thing that we don't have solid support yet is accessibility and we have a plan for that we're working on that we have code being developed for that but it wasn't ready for today so that's why we don't see that as a a stable product it's still a beta level product um but again if you have an app that you don't need accessibility support for maybe you're running it on some

sort of kiosk or something like that then that may be less important to you but we consider those two features in particular to be really critical before we're willing to put the labels stable on anything yeah it's a lot of responsibility to make sure you're not breaking six platforms as opposed to not breaking three platforms right one thing i wanted to make sure uh folks are clear on uh you mentioned that the desktop support the beta snapshot of desktop is currently available in the flutter two stable channel release is that right i believe that is

accurate okay and so that's so people can just have an easier time trying out desktop support as it exists now right from there the same version of the sdk they currently have installed right right awesome yeah so if you want the latest of desktop it's better to use it on beta because that's where the updates will be but you're just going to get a snapshot of what it is today on stable so if you if you have an existing app you just kind of want to see what it looks like on desktop sounds like you

can do that right from the stable channel but the latest and greatest would be either on dev or on beta and there's something really magical about having written an app for say android and then just running it on your mac or running it on your linux box and it just works and it's just it's a very weird experience to have done that i haven't i haven't experienced that before uh you know with the web you kind of have that when you write your your web app and it works in one browser and it works on

a different browser on your laptop and a different browser in your phone uh but it's really kind of a magical experience to have that with a native app absolutely awesome thanks uh well hopefully that was a lot of detail for you uh blessing george for gazey varghese about flutter on desktop um let's take another live question this is from shekhar shawshank uh what is the best way to learn state management packages like river pod sort of an interesting question about how to approach um maybe that's a dev should does would anybody be offended if i

took that one even though i'm the host i'm not really supposed to answer questions is that is that okay please i was hoping you would take this one all right fire away yeah this is this is my jam um one of the i would say the best way to learn anything with flutter is to just start coding um that's that's how i've done most of my learning with flutter it um one of the nice things about flutter being entirely open source is that when you do run into a crash or something like that you can

go really far down into open source code before anything would stop you this is how i learned most of the flutter sdk uh and river pod which is made by remy uh he also very good about documenting his code so if you ever run into any issues while you're playing around with it or just having some fun you can go straight into the source and see his dark dot comments and see how everything works um also i would say one of the wonderful things about flutter is that we have a global developer community who are

fun and energetic and welcoming not only are they happy to answer questions generally on sites like stack overflow and stuff like that but a lot of them are out there on youtube right now putting out videos putting out blog posts and stuff like that riverpod has attracted a bunch of users and so you can find a lot of resources from people who are a few steps further down the road on their learning journey with that particular package than you are and they've they've turned around and offered help to you along your way so if you

you know the best way just do a search on youtube do a search on uh blogging platform of your choice and your odds are you're going to find some folks who have already tried whatever it is that you're interested in learning and i've left some breadcrumbs for you on your own journey um yeah all right um let's see i think we got let's go back to some of the questions we got earlier uh on twitter and youtube this is one uh this is clearly a merriam question what about seo in flutter web is it supported

if yes let us know thanks what do you think marion i had a feeling this question was coming um so uh flutter started uh as a fork of chrome and so indexability has like always been on our mind um it's just with this release specifically we really optimized for web applications and focused on customers our early adopters that were already building applications with the web um and so that being said although indexability is something we're looking into it is a lot of work to get supported and so if you are looking for building very document

centric very text heavy and just site websites that need that seo support flutter might not be the right choice for you currently we do have ways that you can access the browser and dom because we do use the web platform and that is what flutter web is built on so there might be ways that you can find to embed those apis and the meta tags that you might need for seo using things like platform views but as of now we are looking into it and we would love to understand what exactly your use cases are

how you use seo today so file issues on github so we can learn more but it is it is on our roadmap it is something we'll look into uh but as of today we're best for web applications awesome thank you miriam and uh just to echo what you said there at the end filing issues upvoting issues and adding comments and context to issues that's one of the best ways for developers to sort of steer the sdk and provide their input do i have that right exactly a lot of oh sorry um i mean a lot

of what we've built for flutter web is from hearing what our customers needed at the time that they were building with beta and the tech preview so the best way to shape our future stable releases is to tell us what we can work on ian did you have anything to add there or is miriam pretty much got it no that was pretty much it we very much use the issues as a way to prioritize we look specifically around thumbs up on issues uh because github makes it really easy to sort by thumbs up on the

first issue first comment an issue so yeah definitely thumb up issues that you like uh file issues if you can't find one uh that is the best way to help us yeah yeah i don't know that it's oh i was just saying i don't know that it's commonly understood how open flutter is because i just don't not all projects are run this way but like all of our designs are docked to public all of our issues are public basically whenever we do anything we do it in the public and so yes there may be a

lot of issues to look through um and you know to find the issue that you want um but it's all done in the public and uh so you know either you can watch us do it or you can contribute and and you know join forces and help us make it better yeah i've come from a long history of open source and open standards and so i've been trying really hard to push that culture into the flutter project i think pretty successfully we have you know an open discord where all of our conversations happen we have

open github issues where all our issues happen our project planning happens in in google github projects sorry like design docs ring public google docs so yeah we are very much an open project and if you're interested in coping we have a contributing guide on github check it out follow the links thank you um so uh hopefully that gets uh a good answer for search engine optimization there and a little bit on contributing um let's take another one from youtube uh when will the problem of janky animations on the first opening of an app be resolved

especially with metal um eric i think i've seen you doing a little talk on speaking of github issues doing some some stuff on this do you want to take this one yeah this has been a popular topic uh particularly the last few weeks and i wrote a long post on reddit i'm actually in the in the middle of working on a longer blog post um i guess i would open by saying performance is something that is like a grounding principle of flutter when we first talked about the project five plus years ago you heard us

talk first about performance when you hear us talk about the pillars of the things that we're trying to accomplish performance is you know number one uh and that's not just you know that's not just words like we back that up by you know every commit that's ever checked in uh is compared against all sorts of uh performance tests uh across the board across all the platforms a performance is something that we we we strive for we drive towards uh every day um specifically regarding to jank and and first run animations uh that's an issue that

we have been aware of for a while and particularly on ios it did get worse in some scenarios within the last year with the migration from opengl to metal where we're no longer able to cache the shaders which are the little programs that you have to run on the gpu to actually produce the pixels uh we're no longer able to cache the shaders between runs as well as we were before uh so the short and long of it is we're aware that there are issues here um and we are hard at work on it uh

lots of people worry on this problem uh ian's working on this problem uh and by this problem i mean the the general problem of performance and how do we make it better um all the time we think we're doing pretty well and we can always do better yeah around the what i've been calling the early onset uh jank issues uh it's very much something i'm focused on right now if you look at uh github uh project 188 i remember the number by heart because i opened it so often uh that's where i've been tracking all

the bugs about this uh the best thing you can do uh to echo what we just said in the last question the best thing you can do to help us here if you are seeing jank at the start of the application please file a bug with code that reproduces the problem include a video showing the jank and include a timeline trace showing what your app is actually doing during that video that is by far the most helpful thing you can do because then we can study uh that particular case of jank they are not all

caused by the same problem even if they're caused by shaders they're not necessarily caused by the same shaders uh you know we have some examples of early onset junk that are caused by one particularly uh pathological shader case we have another example that's uh oh we happen to specialize the shader based on the rounded rect radius and so every frame during the animation where you're animating the rounded rect radius we have to compile a new shader and so those those different bugs will be solved with different problems one presumably will be solved by just not

specializing the shader base on the rounded rect radius and the other one might be solved by fixing the code we're writing for that particular shader but we won't know what your specific jank problem is unless you file a bug with code that we can look at yeah i mean performance is sort of it's a i would say it's a multi-variable equation but it's that's not giving it justice right like there's so many variables that go into that and so many special cases so again this is absolutely an area where we can use some great help

from our community awesome um let's see i think we have another question relating to flutter webb how does google plan to use flutter web internally um eric you speak for the team a lot internally talking to other other groups do you want to take this one so i can't you know speak to other teams plans per se but i can say that there are a number of teams who are experimenting with flutter web today flutter web just came to the stable channel today and similarly we've been we've been giving similar guidance to internal teams uh

that we're you know still working on things so there's nothing to announce today but i i do expect to see more usage of flutter web i mean google engineers have similar constraints to any engineers you know listening right we we still have to write for lots of screens and i think i i mean i'm working on this project because i believe that uh it's a better way to develop when we write our code once and then we get to deploy it lots of places and so i suspect that we have seen we have seen a

lot of google teams adopt that strategy already with flutter and i expect that we will see even more as flutter goes to continue to more goes to more places we've also seen flutter for web being used internally for internal tools where there isn't necessarily a big team behind the tool and they need to create something that is useful and productive quickly uh and so for example just on the flutter team for example we use flutter web for some of our internal tools for migrating the public flood of code into our internal repository for teams like

gpa and other teams to use and the the tool that does that is itself written in flutter we also uh to add to ian we also use dart tools is built in flutter web so that's a great example and we're hoping to showcase that as a way of using google technology both internally and externally because those toolings that same tool is available internally as well i actually used flutter for web to build an internal tool myself now that i'm a manager uh i was i made a little tool to help people get github searches to

see what pull requests they've done over the source over the course of six months or so uh and and puff this may be interesting to you i actually deployed it to firebase hosting and the new thing that you all have to that puts like automatic github actions into your project took like five minutes for me to get like from my laptop up online at uh web.app domain so i don't know who works on that but give them two thumbs up for me no definitely one of the popular features we've released last year right it's that

you can from a github action automatically create a url in firebase hosting a preview url or a live url and that's really awesome we see lots of uptake of that yeah and it merges really well with uh uh flutter web of course um awesome okay let's take uh another question this is from uh flu dev perhaps short for flutter dev um can we do mediation with admob in flutter if yes then how will it be implemented and i think i just talked myself into answering your question again uh does anybody else cover this because i'm

i'm the weird oddball former ads person on the call maybe okay um sure uh yeah a little bit of personal history i came from ads developmental mobile ads develop how i i ended up on uh the flutter team because i worked on the admob plugin for flutter that's how i got hooked on it um so yeah uh as you as you saw we had a wonderful announcement about the google mobile ads plugin for flutter today uh mediation is not in its list of supported features i just want to be very clear about that um because

the plug-in uses the same native sdks under the hood as you would use on any other flutter or any other android or ios app mediation is it is in there and you could in theory set up an ad unit and and try to take advantage of it by bundling in the right native sdk and adapter uh i should mention by the way for those of you unfamiliar with mediation um it's a feature where the google mobile ads sdk can load and display ads from another ad networks sdk like the audience network or mopub or another

one um but it's not officially supported and the reason it's not officially supported has to do with testing uh one of the reasons um that the we're being uh taking so much care and putting out the google mobile ads plugin is that if you're going to put out something relating to monetization it has to be right it has to be tested and 100 you're completely confident that it's right because this relates to somebody's livelihood right like if i have a bug in one of my apps it crashes and somebody's sad for a minute if you

have a bug in your ads sdk it could mean that somebody's business is threatened uh or you know somebody can't pay keep the lights on in their office that's a very big responsibility uh and that's um that's why so much testing and so much cooperation with the ads team has gone into the current release of the mobile ads plugin and that's they're going to do with mediation before saying that it too is fully supported and ready for production uh so it is on the roadmap but i wouldn't try it just yet that's my answer there

uh all right let's uh let's take another one this one comes from uh sanam uh sanof kumar you uh when will dart support web assembly ian i'm thinking maybe this might be a good one for you yeah so this could mean a number of different things uh we actually use uh webassembly today as part of flutter for web uh and maybe uh miriam can talk more about this in a minute uh but basically we we have uh two other parts of webassembly that could be relevant for dart one of them is whether you could compile

dart itself to webassembly and the other one is whether you could take code already compiled to webassembly and link to it from dart so for the second one linking to webassembly code from dart i believe there's a package that already exists that uses dart ffi to load up a wasm runtime and therefore let you connect to wasm code uh that's not the most convenient way of doing it but it sort of works today the other option or the other the other way of using webassembly with dart would be to compile dart itself to webassembly uh

that is not possible today that's going to require features in webassembly that aren't really mature yet like webassembly garbage collection webassembly threading and so forth these are things that we're very interested in i think webassembly has the the potential to become really a uniform language interrupt uh technology in a few years and so i'm really hoping that we can adopt that in darp as well uh but we're we're not there yet and it will take some time i think together miriam do you want to add something about how we do webassembly with uh with canvas

kit yeah um so today we have two renderers for flutter web we have our default or what used to be our default html render where we used html and dom backend in our web engine to render your application on the web but we have been experimenting with canvas kit and today we have stabilized it so that you can use canvas kit which uses webassembly and webgl to render your app as a skia in the browser and so with those two different renders we also have something called auto and that's what we've set your all flutter

web apps to run by default and auto basically means that we use canvas kit on desktop browsers and we use html renderer on mobile browsers just to optimize for the benefits and the strengths of both awesome uh well thank you very much um let's see let's uh let's take some live questions we have about 15 minutes left i think in our block uh we are still taking live questions from the chat and on twitter using the ask flutter hashtag um i always like to go back to twitter by the way and see if i can

answer some of the ones that we weren't able to get to live so if we don't get to your question here uh hopefully we'll have some time to to come back and answer it after the fact uh but let's take a look question this is uh from vijay kumar one word about uh in comparison to react and angular um let's see merriam or or ian uh what do you what do you think about that what are some of the differences between the those three things okay uh and did you want to take it or eric

i feel like eric has something to say i think the first thing that comes to my mind is that like flutter web like we just draw to a canvas um you know so we really treat it like we have access to the cpu or the gpu like we do on a native platform which is i think different from how i see angular react working that's the first thing that jumps out to me reluctance to compare flutter to other technologies because we all have valid use cases like all the different technologies are valid use cases and

i don't really want to speak for react and say oh react is good at this but is not good at that that that's really up to to react uh we are very happy to co-exist with these other technologies and uh we hope that the community as a whole can write guides that say you know here's when flutter is good here's when photo for web is good here's when react is good and so on yeah i was going to answer the same way as you again um i don't know if anyone caught caught dion at the

keynote but i think he put it really well that the web platform has opened it up to so many frameworks and flutter is just another one that is taking advantage of all the web that all that the web has to offer um and so we just want to see what you build with it and we're going to try to suit it best for the things that you want to build with it awesome well thank you ian and mary let's go to another live question this comes from uh mdpe uh underscore ir i'm on the beta

channel right now should i go to stable channel i i think the gag here is that the beta channel just became the stable channel earlier this morning do i have that correct that is right um it's it's really hard for me to answer that question because i usually spend most of my time on tip of tree on all the projects i use which of course means that half the time i'm broken uh and the other half of the time i use the absolute latest features so i'm really the wrong person to answer this eric did

you have opinions about what channel people should use i i think that it really comes down to your interest in update frequency and sort of how much testing is received so say stable only updates about once a quarter and many many apps and many many tests have have run before that code has ever pushed to stable beta is updated about once a month um also has a lot of testing you know both in terms of apps and tests uh but less than than stable in part because as ian says right we promote the best uh

beta of the last while to be uh the stable and similarly dev dev is updated i want to say anywhere between about every day uh to at least once a week um and there again we go through a promotion process of picking the best recent dev and making that the the the beta so i i think it's a trade-off but i think most individuals probably want to be on stable or maybe beta but you have a big difference between the others the other big difference between stable and uh beta and the other channels is that

for stable and to a lesser extent beta but certainly for stable we will cherry pick fixes if there's something egregiously bad so if we find a regression that we're like oh we didn't catch that we should have caught that then we will go and cherry-pick a fix onto that stable release and so you'll see over the quarter the stable release gets updates very minor updates but updates for issues that we think are serious enough that they weren't a out-of-band fix that will not happen on dev we just don't we don't check on dev if something

is broken on dev it'll be fixed on on the trunk and then we'll do another dev in a few days time uh and obviously that can't happen on the main line because that's where we're developing um so there's always a risk the the the the more recent to the code the the higher the risk that something is wrong that we haven't caught uh but of course there's also going to be new fixes there so it's a trade-off i assume previously people were using the beta channel because web was not available unstable so that could be

a reason that you could switch to stable now because we do have web and desktop that you could run your app with you know that's very much applies to me maryam indeed i'm switching back to stable yeah and on our samples repo we just had a whole bunch of samples for the web now that we don't have to uh put a special little notice on like by the way if you're going to run this go switch channels because now they're they're running in stable um awesome thank you uh let's let's go to another live question

here um uh alireza he's azade hopefully i pronounced that right when will you add data classes to dart check issue 314 of dart lag dart lang which has a lot of thumbs up um this makes me wish bob we're here uh but ian or eric you might have a take on this miriam as well so bob really covered it in the keynotes um we are uh actively trying to find a good way to do this we want to be really careful in how we do this we don't want to add a syntax that works today

but doesn't work in six months time doesn't work in two years and we don't want to keep adding new syntaxes every few months or every few years just to end up with a lot of kind of obsolete language features that aren't used by anyone so we're looking at meta programming we're looking at ways that we can really handle a large number of use cases that exist today and hopefully in an extensible fashion we have no idea when this will be done it really depends on what kind of ideas we manage to come up with and

how well they work we'll be going through a lot of testing through this i'm sure if you follow the bugs for example the one that's listed here which i'm sure i'll go and check out after this uh talk um i'm sure you'll see our progress there this is this is another area where the fact that the dart language team hasn't yet found the right way to step in and implement something has also allowed other people the chance to explore their own ideas right like uh build value for example can create uh use source generation to

create data classes that have a lot of features like immutability and serialization i know freeze again from remy is a very popular library that a lot of people are using so there are options out there for folks right now um even though the dart language team hasn't settled on what they feel the correct approach is for what they're going to implement yeah and we have a relatively mature code generation mechanism in flutter and dart today but it's code generation so it has all the downsides of code generation um which is why we don't think that's

the final solution to this problem all right well thank you for that um let's see another one um what would be the best way to develop a flutter app that needs to work online and completely offline i'm guessing that's about data accessing network data and maybe storing it locally dealing with connection status puff do you want to talk about this a little bit it's kind of up your alley yeah and i actually think i saw it coming in and this is a really great question it was a bit more it was about gathering data in

an offline scenario right so you gather the data when you don't have a network connection and then you want to synchronize it to the database when you're back online and there's many ways to do this some of them involved in firebase but definitely also some that don't involve firebase i will focus on the firebase ones but the same type of type of model works for for many approaches but what's key here is that essentially when you use one of our firebase databases we have the so-called real-time database or cloud firestore they work in a very

similar way they keep a local cache of any data that you've recently read from the database into your client-side application because keep in mind these are cloud-hosted databases right so they write any data that you've recently read from the database is kept in a local caching that means that we can access the data again if you restart the app while you're offline and so that's one thing that both of them do and that's what you want right you want that local cache and then you get the dealing with local right operations right you're gathering local

data and you want to write them to the database and in both cases right what both databases do is they keep a queue of pending rights right so we essentially just keep track of what have you written locally that we haven't synchronized to the server yet and this doesn't affect your application you still see the data as if it's been modified already on the server but we then on the background actually check it's like hey do we have a network connection and once we have a network connection we start synchronizing all the changes to the

server and that could lead to for example the server rejecting a change if a user is trying to write something that they don't have permission to then we actually locally reconcile those rejections also so we fire events with it the ui can reflect the database state that's actually one of my favorite things i always notice about uh using something like firebase with a flutter application right is the reactive nature of this um i always love when you are connecting to the database and if i then make a change to the database it just snap also

updates on uh on the flitter application i really love that about dealing with a remote database in a reactive way so great question thank you yeah i imagine your favorite widget is stream builder right buff very much it's between uh uh stream builder and future builder indeed yes you go all right cool uh another live question um what is the difference between legacy version and null safety version uh while collaborating flutter fire plug in with flutter that comes from ital origolia um so the difference between i guess the the existing version and then the new

null safety versions of flutter fire do you want to talk a little bit about the migration of those plug-ins maybe and where we are with them i'll completely admit that i haven't checked yet what's in the latest version i know that the team has been working on little safety for sure i don't know what you will need to do yet so this is one where i might have to come back to it on twitter although i'm not sure ian i saw that you also commented on this i'm not sure if you have any more information

already if not i will get back on on twitter for sure i believe the flutifier plugins are uh migrated now but i'm not 100 sure i'ma submit there's a lot of plugins we've been tracking all of the different plugins that we uh release and make sure that they're all updated and there's a lot of them that i've lost track of which ones we've migrated and which ones we haven't we've migrated most of them at this point yeah i saw indeed a lot of like releases coming in i just didn't have time to check what what

as the developer you need to do for them but yeah i think those all went out also today yeah if they're not out today they'll be up very soon cool um well there you go let's uh let's do one more live question this is uh from ayaz hoda um what is a good ide for flutter that's going to have about as many answers as there are people on this stream i think this could be this could be fun i use intellij's idea that is my preferred one uh eric i don't know what what do you

use uh honestly i mostly use vs code i've used android studio some too but i um the coding that i do tends to be more mbs code okay ian i assume you have a favorite right i use emacs and you'll pry it out of my gold dead hands there's always one of those that's right uh miriam what about uh what about you um okay so as a pm i use all possible just to make sure things work um but i did when i joined the flutter team i did start with android studio because a lot

of the tutorials like the app brewery one uh sets you up that way and then i moved on to vs code because that's kind of what i'm used to and then i've recently been testing out intellij making sure our cool new inspector widgets and all that uh work with it awesome because references in the firebase team that leaves me right yeah i mostly use visual studio code for things where i need to integrate with firebase but i actually have a real soft spot for dart pad also i just love tinkering with uh with widgets without

having to open any ide just in my browser it's one of my favorite sort of a more serious answer to this question is that uh we really try and make sure that uh all of the ids can work with flutter we have a open kind of api that you can talk to if you're an ide and that's how all of our plugins talk to the flutter tool so there's very little bespoke code in the ides about running flutter or compiling and so forth and this means that if you have an id that doesn't yet have

a plugin it's possible someone will write or you could write a plugin for that id using the flutter tool and it also means that if you have an ide that you want to use that doesn't really have strong flutter support you can use it from the command line all of the same things that the ides do is are possible from the command line by and large except things like you know auto fixes and refactorings but even for example our analyzer tool has a mode in which it operates at the command line live so it's just

running the analyzer continually in the background and that's actually what i use with emacs for example yeah i know there are some dedicated emax users uh uh i first learned that when i was talking with hans one of the engineers on our design languages team our frameworks team and i referred to his editor as vi and he very quickly corrected me to say that it was emacs uh you know in a nice way god's a total nice guy not uh it was a a learning moment for me uh and speaking of learning moments we have

had one over the past hour and now uh it's the end of our time so uh first let me say thank you to our four panelists here thank you so much for being with us here today thank you thank you pleasure andrew and i want to say thank you to all of our uh stream viewers here um hopefully you've enjoyed what you just saw but we have a lot more coming for you so this is the end of our q a but if you stay on the stream we have four tech talks from the flutter

team coming to you uh these will provide more technical detail on some of the exciting features and announcements that you saw during our keynote and then after those we have 11 more talks from flutters global developer but developer community these are flutter coders uh who have put together tech talks going into uh all sorts of things from navigation to animations deep dives into all sorts of flutter attack those will be up on the website as well there'll be a content drop for those so uh but first up we'll be having uh mariam haznani back with

us again along with john ryan to present from mobile app to progressive web app they're going to go through the process of taking a flutter app that works on mobile and deploying it to the web so stay right here we have a lot more flutter to show you hi i'm john a developer relations engineer on the flutter team and joining me today is someone who also works on flutter miriam hi miriam hi john hi everyone i'm miriam a product manager for flutter so miriam you're actually the product manager for flutter on the web which is

what we're going to talk about today yeah i'm so excited to be here and work with you john to get a flutter app running in a web browser and deploy it as a progressive web app me too actually before we dive in miriam can you explain why we added web support to flutter sure as some of you may know flutter started as a ui framework for building beautiful ios and android mobile apps like the ones you see here but our vision is to provide a portable framework that helps developers build beautiful natively compiled applications for

any platform and since the web already runs on any device targeting the web felt like a natural next step for flutter to achieve our goal enabling you to build high quality high performance experiences across multiple platforms so with today's release of flutter 2.0 we now have production quality support for the web on the stable channel which means you can build apps for ios android and the browser with the same code base that's super exciting so now i can run flutter apps natively on my phone and now in a browser yes and emphasis on apps while

you can do a lot on the web flutter's initial stable release is best fit for building web applications not static content websites okay so maybe i should keep my landing page for my site in html if i want that to play nicely with search engines for example exactly we see flutter being a great fit for apps that can be installable progressive web apps a rich interactive single page app or even an existing flutter mobile app so john what web app should we build today i've been updating the dashcast app which is a podcast app so

first let's walk through some of the features on the iphone so this page loads podcasts using http and json it also uses this custom font here using the google fonts package it as you can see uses material design components like ink splashes right here animations and if i go to a podcast say this one you can see i'm using the url launcher plugin to open links using plugins which operate on the host platform either android or ios that's pretty cool and i'm not just saying that because i like the name of it um it would

be awesome if i could use that on my laptop i think having it run in the browser would actually let me use it on any device yeah that sounds great so uh what do i need to do so with the stable release the web is just another device target now for flutter so like you see iphone or android listed as devices in your ide you should also now see chrome or edge if you're on windows so all you have to do is run flutter create and that's going to generate the web directory then select chrome

as the device and then hit run okay so let's see if we can do that so open my terminal here and i'll run flutter create and i'll pass it the current directory to recreate this project and once that's done i should see a web directory with an index.html file and i can see that right here um so now i'll select the chrome device and hit run all right so running the app for the first time takes a while to load because flutter is launching the application using the dev compiler dart dev c to run in

debug mode the first compilation takes the longest because it needs to compile the entire app cool so yeah on the web dart uses different compilers right yeah so for our mobile apps we have a git compiler and an aot compiler that converts your app into machine code or arm similarly on the web dart uses the dart.c and dart2js compilers which convert your app into javascript so having separate compilers for development and deployment will give you a fast dev cycle and also make sure your production app runs as fast as possible so since the flutter framework

is written in dart the entire framework can be compiled into javascript right yeah just like you said the flutter framework is built using dart and so is your app that sits on top of the framework so all we had to do to add web support was replace the low-level c-plus plus rendering engine that's used by mobile apps and instead map to browser apis dom or web assembly to render your web app either using html or canvas kit so the only real difference between flutter mobile apps and web apps is that underlying engine that they use

yeah our model for the web is not two separate frameworks that look the same and use the same language but actually a shared framework across platforms mobile web desktop etc so when we improve features on the flutter framework all platforms get the benefits okay so that's why i don't have to change any of my apps code the framework apis are the same so i've got the app running now um are we done well there are a few things i like to consider when building a flutter web app so first especially when you're bringing an existing

flutter app to the web you want to check if the plugins are supported for the web flutter plugins allow you to talk to native libraries for the platform you're running on so when you're running your flutter app on the web you can get access to existing javascript libraries through these plugins okay so i'm using url launcher so let's check if url launcher is supported i'll go to pub.dev and i'll just search for the package or plugin i'm interested in and i can see here this label at the bottom it's got the different platforms that are

supported so it's got android ios and it is supported on the web but what do i do if my plugin isn't supported yet so you'll actually want to add web support for that plugin and you can find instructions for upgrading your plugin to include web support on our blog site great so since url launcher already has web support and i already have it in my pub spec for my mobile app i don't actually have to change anything that's right for most google plugins we do all the work behind the scenes such as wiring up to

javascript libraries so the plugin works as you'd expect on both mobile and web right and sometimes a plugin will require some javascript to work if i open up index html here you can see that i imported some javascript to make it work so i have all the plugins working for both mobile and on the web what's next so now i'd like to think about layout web apps can run on many different form factors and it's important for our app to adjust the ui accordingly so i need to think about layout for different screen sizes cool

so the home page needs some work let's uh change the bottom section to use a two-column layout here for this i'm going to use a layout builder and i'm going to check the constraints so i'm going to go to this podcast column here and i'm going to change this podcast list to a layout builder so i'm going to type in layout builder and that takes a builder parameter which is a callback and that callback takes two parameters one of the parameters is the build context and interestingly we get the constraints here and the constraints are

the incoming constraints that the layout system passes to this portion of the widget tree so i can actually check the constraints i've already kind of set up the two-column layout with my podcast list so what i'm going to do is i'm going to just add this back in return this podcast list and i'm gonna use the constraints to set this two column parameter here so i'm gonna set it to a two column layout if the constraints max width is greater than seven hundred so i'm going to reformat and now that i've made that change how

do i restart the app and see the change great question so you can trigger a hot restart for web apps which basically means that you don't have to restart your app and wait for it to recompile everything and load again it's just a fast way for you to see changes so if you make a small change the dev compiler is smart and only recompiles the javascript that was affected and then pushes only the deltas to the browser so this works similarly to the hot reload feature for mobile development the only difference is that hot reload

remembers your state and hot restart does not cool so if i restart my app here and open up the browser i can see that the changes show right away and i can resize the window here manually or i can open up the chrome dev tools and click on this toggle device toolbar button and what that allows me to do is demo this app on different device types in this case it's a pixel 2. wow that looks so much better on every screen by the way there is more info on building responsive ui on flutter.dev docs

so john the next thing to think about is navigation sure i've actually set up deep linking in my app using navigator2 so on the web if i navigate to a specific page the url in the url bar updates i can also navigate to specific pages by updating the path in the url or if i were to click on a link it would update the page this would also work if i were using named routes but i'm using navigator2 here and if i click the back button it takes me back to the previous page that i

visited so i changed the podcast from one to two here if i click the back button it's going to take me back to the first podcast if i click the back button again it takes me back to the home screen and if i were to click on a podcast like this click the back button in the app and then click the back button in the browser it takes me back to the previous page i visited so this looks better already one what other things can i do to make my app feel right in a browser

well since our app can run on the desktop browsers as well as mobile browsers we should also consider adding scroll bars and mouse or keyboard interactions for the desktop sure let's uh let's add a scroll bar to our list view in this page for example so if i go to the the widget for that page the episode list and i wrap this list view in a scroll bar by typing wrap with widget scroll bar and hot restart the app i should be able to see this page reload and now i get this nice uh desktop

style scroll bar on the right hand side and you can also see that my cursor changes from a normal pointer to this clickable pointer this click pointer and that's a piece of the framework that uses the mouse cursor widget so if you want to do this yourself you can use the mouse region widget and provide the mouse cursor that you want to display when you hover over that widget so to add keyboard shortcuts i also used the shortcuts widget here so i can actually play and pause this podcast using the space bar all right that's

looking good so finally you'll need to think about what rendering mode will be best for your app unlike flutter mobile apps that just use kia to render there's actually two renderers for web there's one html which uses dom canvas apis and another one canvaskit which uses webassembly and webgl to render skia paint commands so how do i know which one of those two renderers i should use well by default the renderer mode is set to auto so this means that your app runs with the html render on mobile browsers and canvas kit on desktop browsers

this is our recommended combination to optimize for the characteristics of each platform that's really cool so what if i set the renderer mode to either html or canvas kit how do i know what the difference is between those two so html allows you to optimize for download size and uses less bandwidth that's why we think it's better for mobile browsers on the other hand canvas kit is faster so if you have larger screens with a higher number of widgets showing per frame that's what it's better for gotcha so i i think it makes sense to

use auto in this case since i'm rendering quite a few widgets on desktop screens and on mobile browsers if i were to load this in ios safari i would want to load fast i would want it to load fast so if i'm debugging how do i know which one of these is running so if you inspect the body tag in chrome and spec source code you'll see a class flt-renderer that's going to either show you canvas kit or html and then let you know if it was set automatically or not it looks like something is

wrong with my app here one of the dates is not showing up it's showing null can i set breakpoints while my app is running in the browser yeah you can we connect to chrome's javascript debugger which allows you to set breakpoints evaluate expressions and also use chrome dev tools cool so let's set a breakpoint after we load this json so i'm going to make sure i'm running in debug mode here and i can see i've got my debugger open and i'm going to set a breakpoint after i load the details for this podcast and i'm

going to reload this page by just navigating back and opening it again and you can see that once i'm stopped at a break point i can do all the normal things like evaluate expressions for example i can just type response.body and see the response body so it looks like i'm parsing the json correctly if i scroll through this i just want to check that the episode url here publish date here is the value i would expect and i can see that it's null so i can see the value is coming from the server as null

but let's verify that by opening up the chrome dev tools so if i go back to my app here continue and pop open the chrome dev tools i can see network requests here just like any other web app so if i navigate back to this page i'm still stopped at this break point but i can see the network request here and i can also verify that the value is null if i wanted to so let's work around this issue for now by fixing this widget so it doesn't display the word null i can open up

the inspector here disable this breakpoint and enter select widget mode and i'm just going to select this widget and once i've got that selected i can navigate directly to that widget by double clicking on it in the flutter inspector and i can see that i'm just putting the raw value of tostring into the text widget so if time ago date is null it's going to put the string null into that widget so i can just fix this quickly by doing a quick null check so if the episode time ago date equals null i'm just going

to give it a null widget here otherwise i'll give it the text widget that i was giving it before and i can perform a hot restart and go back to my app and you can see that the null widget is gone now fun fact just like flutter dev tools the inspector is also built using flutter all right i think the app feels ready to me let's ship it let's ship it so in addition to the flutter build ios and flutter build android commands there's now a flutter build web command so if i go to my

terminal and i run this command flutter build web that's going to do a release build of my app and it's going to put the output assets in this build slash web directory and i've already run a build here so i've already got the build web directory filled out with my index.html and my dart.js file yeah and john when you use that build command you can choose which renderer to use just like you did earlier with the run command but since you didn't specify one it's just going to use the auto option cool that makes sense

so it looks like it's done now now that the release bundle is is ready to go what are my options to host this app well there's a lot of options um there is uh firebase hosting google cloud github pages or other similar hosting services okay so i'm familiar with firebase so let's go with that i've actually already installed the firebase cli so i'll just run from my project directory firebase init hosting and that's going to ask me a few questions here so it's going to ask me what to use as my public directory and we'll

use build slash web since that's where the output assets go and i'm going to configure it as a single page app since flutter apps are single page and i'm not going to overwrite the html file and once that's done it writes a firebase configuration file and i can run firebase deploy only hosting for my current project which will upload the assets and it should just take a second here and once that's done i can actually click on this link to load the final version of the app running in release mode wow that was really fast

it looks just like we expected yeah it does so now that it's hosted how do i turn it into a pwa i want my users to be able to install it when they visit the page so it's already a pwa if you look at that icon in the url bar it's a plus icon if you click on it you'll get an option to install it as a progressive web app so when you build your flutter web apps we create a web manifest file for you so that by default your app can use pwa features like

installation offline support or notifications great and now that it's installed i can access it without opening my browser so are we done yeah yeah we're done let's recap all the steps we took sure so we started with our mobile app we ran it in the browser and we changed some things to keep the web platform in mind so we looked at plugin support for our app we tweaked some things for responsive design for desktop screens we looked at navigation and how that works on the browser and we looked at desktop idioms like scroll bars mouse

cursors and keyboard shortcuts and we also looked at the different web renderers like auto and canvas kit and html yep and we also used hot restart to iterate quickly and debug the code using breakpoints evaluation expression inspector and chrome dev tools then we deployed it using firebase and installed it as a pwa yeah and it's all available now in the stable channel so thanks again for joining me today miriam yeah thank you for having me i had so much fun and i encourage everyone to try building their own flutter web apps on the stable channel

now thank you all for watching and check out flutter.dev web to learn more so here's an interesting question does this switch need to have a case to handle null well if theme mode can return null then it does and the switch is broken can it wouldn't it be nice if the compiler could just tell me whether i need to worry about theme mode being null or not well the new null safety feature that we are releasing as part of flutter 2.0 is designed to solve just this kind of problem for our developers null safety lets

the tooling keep track of what things can be null for you making development in flutter easier faster and more reliable so today i'm going to show you what it's like to migrate an app to null safety this isn't an intro to null safety so if you're not familiar with the feature some things will be new to you but don't worry you'll get the basic idea so the app i'm going to migrate is the rally app from the flutter gallery demo app it's a pretty full featured app we can take a look in here we can

click around we see it has a bunch of animations it has a bunch of charts so you know non-trivial app there's about 9000 lines of code in this as i have it currently running the thing i want to point out here is this little message down in the terminal window that says that we are running with unsound null safety so what's that about well basically this app is running a version of the flutter framework that has been ported over to null safety but the app itself is not yet null safe so we're running a mix

of null safe and non-null safe code that's fine we built technology into dart to make this work but it means that the app doesn't get the full benefits of null safety and the framework can't rely on the app not to pass null where it's not allowed to that's what we mean by unsound null safety we can't quite trust it so what we need to do today is to get this app running with full sound null safety and to do this we're going to use a migration tool that the dart team has built to make this

easier so let's give it a try so if we go over here to our terminal window we can run the migration tool directly from our terminal so if we run dart migrate it's going to give us a little print out here which tells us some helpful documentation which is very useful to read and we'll tell you lots of powerful ways to use the tool and tell you more about how to use null safety as well the tool is going off and it is looking at your code and is analyzing it to figure out a bunch

of things that it needs to know about it in order to migrate it to null safety so it's looking at the code up and it's giving us an error so something went wrong what did we do here okay so we're getting a bad state we're getting an error that says that the package has unmigrated dependencies so what's going on with that well this is the first thing that the migration tool is going to do for you we really encourage our developers not to migrate their code before all of their dependencies have been migrated waiting for

your depths to be migrated makes your migration experience much more reliable and helps you have a good experience with it and the migration tool is trying to keep you on the rails by checking this for you so we need to fix this before we get started so how do we fix this well we need to update all of our dependencies we need to change the packages that we depend on to be null safe versions and the tool that we use for this is the tool that understands packages which is pub okay so we have built

into pub a new mode for the pub outdated command so if we run flutter pub outdated with dash dash mode equals null safety we will get a bunch of information that's very useful for knowing whether or not we are ready to migrate to null safety okay so we're running pub outdated and we get some information that tells us a whole bunch of stuff about the status of our dependencies of the packages so so what are we looking at here well on the left side we have a column that says the name of all of the

packages that we are currently using for which the current version is not null safe and you can tell that because if you look under current that column shows us the current version that we are using and there's a little x next to the version that means that it is not yet null safe it has not been migrated that package has not been migrated and you shouldn't be migrating your app unless all of the packages you depend on are null safe well maybe there's a new version of the package which isn't all safe because the dart

team has been out migrating lots of stuff to get it ready and in fact if we look at this if we looked under the resolvable column we see that both of these packages have a version listed with a check mark next to it and that little check mark is telling us that this version that is listed here is null safe the resolvable column is telling us the latest versions that we can get that are mutually compatible that we will actually be able to get a pub solved for there may be a more recent version listed

under latest but for some reason it is not compatible with something else that we have in there okay so resolvable is what we're going to focus on and if we want to migrate because we are apparently able to migrate what we need to do is we need to copy over these latest resolvable versions into our pub spec and update the dependencies on the packages okay so we're starting here with shrine images and we're going to shrine images and update it to point to this latest null safe version and we will do the same for url

launcher here it has dash null safety in its name because it's a null safety pre-release it hasn't been published and stable yet but it is available as a pre-release okay so i've updated my pub spec here and now if i run flutter pub get that will go off and it will get me these new versions of these packages download them and it will and it will get it ready to run again and if we run our outdated command again just to check what we should see is that there is nothing listed anymore among the packages

that are not yet available so we can see here that all of our dependencies both direct dependencies and dev dependencies all of them support null safety so that tells us that we are now ready to migrate so now we can go back and try again okay so this is going off and doing some analysis so what is it going to do so the first thing i'm going to tell you that it's going to do or not going to do is it's not going to change the code that we have on our disk so the migration

tool is designed to make essentially its own virtual copy of your code pretend to migrate it and then it's going to give us a preview of what it will do once we choose to apply the migration so this allows us to look at the choices that it's making and possibly reconsider if we want to to accept those choices directly or do something to change what choices it's making and we'll get into that a little bit more detail in a minute okay so we've made a little further here we're not getting our error anymore about about

seeing missing migrated dependencies it's generating a bunch of suggestions it's it's generating the modified code and then it's spinning up a little web server and giving us locally on our disk here on our own machine and then it's giving us an address that we can hit to actually get a preview of the code the way it will look once we migrate it okay so this is the migration tool so let's take a little look around the migration tool if we look over on the left what we see here is a skeleton view of our code

layout of our app this is the app code over here and there are little check boxes showing which files we're choosing to migrate now by default you're going to migrate everything but if for whatever reason you want to only migrate part of your app so for example you want to split part of it off so you can you can send it off in bite-size chunks to your reviewers and be nice to your reviewers you can choose to deselect certain parts and select other parts again as with packages we recommend that you choose to migrate the

sort of roots of your package first and then move in a waterfall fashion through the dependencies even within your app if you don't migrate it all at once but the migration tool the preview pane here allows you to choose which things you're going to migrate okay and if you click on any one of these files in the middle here in this middle pane we will see a preview of what the code will look like after we run the migration and then there's a little bit of more information over on the right that i'm going to

going to get to in a minute so the first time through this tool i'm going to do a couple things with this but the first time through i want to just see what happens if we just accept the changes as the migration tool proposes them with no modifications and so to do that or at any point if i want to accept the code in its current state i can push the apply migration button okay applying a migration is actually going to edit the code that is on my disk the tool is going to go off

if i click that it's going to say do you really want to do this and if you say ok then you will see down here in your terminal window that it has applied the migrations it is migrated 48 files and if we do a quick get diff we'll see now that there's a whole bunch of um of changes that have been made to our code and if we go over to our ide we can actually see if we go up and we click on one of these files here we might see some changes so for

example some at required things became required and so on we actually also see though that we have a static error okay so this is the first thing i want to point out about this the migration tool is not perfect it's not putting us out of business yet it does a lot of the mechanical work for you but it will sometimes get things wrong or will sometimes make choices that are not exactly what you would have made if you were migrating the code by hand the real strength of the tool is doing sort of the mechanical

data flow work for you where you have something which is nullable assigned to something else which is nullable and chasing that down and here it's gone a little off the rails so let's see we only have one error so let's see how much work is left for us to do if if we were running the migration this way if we go in here we can see that what it's complaining about is that we have a variable match and the inferred type of match is string question and it's being assigned to the parameter of this demo

page constructor and we can see that this demo page constructor it's a field formal and it has been migrated to be non-nullable and yet we are passing a string question as a nullable string we're passing a nullable value and that's not allowed okay so this is somewhere where the tool went a little bit off the rails basically this was already marked as at required and usually the tool assumes that things which are required are not nullable because that's what they usually are if we change our mind and we make this nullable that's fine this is

good so far that fixes the original error we had but it introduces a new error because there are other places that this thing is assigned and now we have to chase through and mark all of the places that this data flows through as also being nullable and this is the work that the migration tool would otherwise be doing for you right it would be doing the work of chasing through all of these places that that that nullable value reaches and marking them nullable for you so that's why using the migration tool in general is going

to save you a lot of work because it does a lot of this mechanical stuff and we can see now that uh that we have actually that we now have have no errors so we can go over to our app here and we can quit out of it and we can restart it that's going to take a minute to start up so let me just point out here a couple more things around here we have a bunch of informationals now that weren't there before so what's going on with that well one thing we can see

is that there are a whole bunch of assertions which are now not necessary right these were assertions that were previously asserting that things that should not be null that are not allowed to be null were not actually past a null value well now that we've migrated this to null safety the static analysis the tooling is sufficient to prevent this from happening so that the system is telling us that these assertions are essentially dead when we were running in unsound mode we might have wanted to keep these assertions around because unmigrated code could violate the guarantees

of null safety and still flow null through here but now that we've migrated this fully to null safety we don't need these assertions anymore another cool thing if we look in here if you remember when i started out i asked the question of whether this case this switch statement here needed to handle null and we can see actually now that the migration tool has figured out for us that we do in fact theme mode can be nullable it has been migrated to be nullable and i looked through this code and actually found that yes null

can flow to this to this location it turns out that won't crash the app because there's some default logic here but it's a latent bug in this code that was found by null safety and if i was editing with this code i would have been told this right up front so that's one of the really nice things about working with null safe code that i hope you find uh valuable okay so we're loading up the the app here it's taking a little bit of time we have to do a full rebuild but if we give

it a minute okay and we are up and running so um so the first thing i want to point out is that we are in fact running with full sound null safety we've got this little message tails here says that we have been successful and now all of the code in our app is soundly null safe and the compiler and ourselves can trust that no null values flow to places where they shouldn't okay and if we click around in the app here we actually can see it's running quite fine that's not always the case it's

possible that you will get new runtime errors maybe you uh you added a null assertion operator in a place that it wasn't supposed to or or any of a various number of small things but um in this case we seem to have ended up in a pretty good spot and the code is is running just fine so that's pretty cool right um we basically just we basically just took an app and with one push of a button plus three small edits we got this entire nine thousand lines of dart code up and migrated and running

with full null safety and it took us you know maybe 10 15 minutes here and i'm not cheating by the way i didn't pull this app down and do a whole bunch of work beforehand to make this easy this is you know i cut out some of the other pieces of the app that i didn't want to work on to get it down to 9000 lines but other than that i just ran this and we're running so this is really a legitimate example of what it can be like to migrate your code but we also

saw that it didn't necessarily do everything right and i also will say that the tool is going to be more conservative than you might choose to be it is trying to get things up and running and it is trying to minimize the number of things that it makes nullable but where it has to make a choice it will sometimes make a choice to make something nullable that you because you know a little bit more about your app would be able to make non-nullable and so if you want to do a careful migration of your code

up front right you might want to audit the the changes that the tool is going to make and guide it to a better result fortunately the tool supports an interactive workflow for doing this um which allows you to tune the output um and this is one of the the the i think the more powerful ways of using the tool so we're gonna go back and try this again using that interactive interactive workflow okay so let's give it a try okay so if we go back over here to our terminal we can reset ourselves back to

clean state so we can try this again using the interactive workflow we tried it once just sort of accepting everything that the migration tool suggested to us and then fixing up anything now i want to walk through it again taking a careful look at the choices that it's going to make so so what i'm going to do is i'm going to go ahead and run that tool again okay and if you recall again this tool is not going to directly change the code that we have on the disk it's going to go off and develop

its own little view of the world and propose it to us in a preview package when we use an interactive workflow we're going to take spend time using the tool in our ide to understand the choices that it's making and to guide the choices that it's making so how do we guide the choices well there's two ways we can do that one is we can actually refactor our code so that it's more compatible with null safety and the other is we can add explicit hints in a way that i'll show you in a minute to

the code to guide the tool to a better result and that's the one i'm going to focus on here okay using hints to guide the output of the tool to get it to produce exactly what we want so let's take a look at that okay so we're it's um it's getting its stuff spun up here and if we take again remember it's got a little web server and we take our take the url it gives us and just open it up in our browser um and we're once again back into this preview tool and we

can look um we can we can start poking around in here so this time i want to focus a little more on using the tool and all of the powerful things that the tool provides for us so i talked about how in the center here we have our our preview pane and this preview pane is again showing us the way the code is going to look after it's migrated on the disk is the code that currently exists unmigrated and in this preview pane is the code as it will exist once we migrate you can see

that because actually it's it's highlighted here the changes that it's proposing to make in the preview pane so if we look at each of these it's adding questions to these type meaning this is becoming a nullable type this is a field that it thinks is potentially going to be is going to be nullable and it's also listing over here in this upper right hand corner it's listing by category each of the changes it's going to make so we can see in this file here it's making quite a few changes it's proposing to add a lot

of non-null assertion operators we can click on them over here and it'll take us there these non-null assertion operators are places where we have a nullable thing that we know by invariant is now not null and we want to extract out the non-null value with a non-null assertion operator a null check operator so there's a whole bunch of those in there i don't want to focus on them right now so what i suggest when you're using the interactive workflow is that you focus on the types that have been made nullable so down here there's a

list of just four types four places where it has taken a type and made it nullable the reason i recommend focusing on this is that the choice of nullability in the types is what drives all of the other changes that it makes all of those null check operators that it's adding it's adding because of the choices that it made about nullability so once you've figured out what the right nullability is for the types all of those null check operators you know you might want to check them but they basically are mechanically added they're mechanical um

and this is you know the power of the tool is that it will do that mechanical work for you so let's take a look at it so if we look here we've got these four fields it is proposing to make them nullable so is that the right choice maybe i know a lot about this code so i can just say right off the hand yes or no that's great in this case i'm actually not that familiar with this code i just pulled this down off of github so i'm using the tool and using my ide

to explore this and the tool gives us some very powerful tools it gives us some very powerful techniques for figuring out why it is making the choices that it's making so if we click on one of these we can see down in this right hand pane down in the bottom right a stack of the reasoning that led the tool to make the decision that it made it's it's essentially telling you what flow of control and data through the program led it to decide that this should be a nullable variable and if we walk back through

that flow we can reconstruct very quickly and without having to do a lot of exploring in the code or debugging why it's made it nullable and whether we agree with its reasoning so let's do that if we go over here to this little pane here and we start clicking on the points in the file well the top of it is just pointing to the actual field and then the second thing is saying well this field is set in the constructor as a field formal parameter and this is the constructor that is set in then if

we walk back one level we get to the call to the constructor that is causing it to believe that this should be nullable okay so it's looking here and it's saying open controller is set by being a parameter to the animations constructor here in this other file and if we walk back one step we can see that it is decided that in this other state file open controller is going to be a nullable parameter okay that seems very reasonable except if we look in this init this is part of the init state it's an init

state sub-method once we get here to this point the assertions tell us that these four fields will always be non-null so in fact the animations constructor even though it looks like it is accepting a nullable value will never get null so here is a place where we would like to change the output of the tool by overriding its behavior we'd like to come in here and say no we don't want you to make this nullable we want you to make this non-nullable okay and the way we can do that one of the simplest ways is

we can actually use these two buttons that the tool gives to us to add a question mark hint which means make it nullable well we don't need that one because this is already nullable or the exclamation point hint which means no make this non-nullable which is what we want because we want to change it we want to override it so we hit that button and what we see is we see a little comment with a bang in it showing up here on the code key point here this is the one point up until the point

that we apply the migration that the tool is actually editing the code on the disk so if we go over to our ide we can see that this ide which is looking at the code on the disk is showing us that this comment has actually been added into the code and in fact if we want to we can add the comments out here i want all four of these to be non-nullable so i can just go ahead and edit it directly in my ide and and uh if i wanted to i could check this code

into uh into github um i could spread out this migration over the spread over the over a long time period by just adding annotations and incrementally working on it and all of these have no effect on the existing code but they guide the migration tool to a better result okay so if we go back to the tool now we can rerun the tool there's this rerun with changes button that we're going to hit and when we hit that it's going to look at the comments that have been added look at any changes to the code

any refactoring you did and it's going to recompute the set of suggested changes that it's going to make to your code so it is doing exactly the same work and our hope here by adding these non-nullability assertions is that we're going to make the rest of this code cleaner right okay so this is the output if you recall when we first came into this file there were a whole bunch of null check operators proposed to be added this and those were all driven by the fact that these four fields were nullable now that we have

made them nullable now that we've overridden the choices of the tool it is not suggesting to add those because they're not needed anymore so by auditing this and making a few small changes to its choices of non-nullability we've ended up in a point where the final emitted code is much cleaner that's what i mean by an interactive work with the tool we work with the tool to help get it to a better point it does all the mechanical work of figuring out what flows from these decisions that we make about what things are nullable okay

one more example here i want to show of a different kind of tool we can use so if we go to feature discovery.dart here we go into a little bit we'll see another example of a code pattern which is very common in flutter which is a state this accompanies a stateful widget and it's a state class there's a very common pattern here where state classes tend to have fields which are not set in the constructors but they are set in the init state method often but not always those fields are never actually intended to be

used as null they just happen to be set a little bit late well dart null safety has a new feature called late fields which is exactly intended to support this kind of pattern where you set something later you don't set it initially to a non-null value but once you set it you never reset it to null so it often we want to look at our state classes to see is this a good place to use a late variable okay so how do we figure that out well i'm going to look at these this animations and

these overlay fields here both of which the tool is choosing to mark as nullable if we look at the reasoning stack here it's actually not that helpful this time because basically it's just telling us this field is not initialized so i don't know what to do with it sometimes that means we may want to refactor the code to initialize the code in the constructor but in this case in this in the state pattern we don't get to do that but what we can do is we can go over here to our ide and we can

actually start looking around a little bit to figure out whether it is it is necessary to make these things nullable there's nothing wrong with making the nullable but let's let's see so if we look at overlay first and we look at all the uses of overlay okay so we use our our our ide here to see all the uses we can see here that actually overlay is almost certainly going to be should be nullable it is set to null in a place it uses null aware operators on it it's checked for null so something about

the logic of this program is requiring overlay to be nullable so we're not going to change anything about that animations though if we look at the uses of animations we can see in once in one place it is set to a non-null value the result of a constructor is definitely non-null and all of the other places that it's used it's passing it into places that have required parameters that are definitely non-null so that's a good sign to this to to for us that this field is never actually really intended to be null and therefore it's

a it's a great candidate to make late okay so how do we make it late well again we use hints and here we can just add it directly we don't have a button in the in the tool for this but this is one of these sort of power user hints that you can actually add directly in your code to again continue guiding the tool i'll add a late hint that's going to come back here and tell the tool that when we rerun this code it should treat animations as a late non-nullable variable and propagate all

of the changes that that follow through from that so we'll get rid of a few more of these non-null assertion operators so that's the basic workflow that we're talking about here when we talk about using the tool in an interactive mode we we look at the changes that the tool is proposing we think about them either using the the the preview pane which gives us information about the reasoning that the tool is made or we look in our id to try and understand whether it's making the choices that we want it to make and we

override any choices that we don't like and then we re-run it until we finally get something that we like and then if we want to we can take all or again some of the code and apply the migration to it so let's go ahead and do that we can say well i just wanna we've just ported this feature discovery directory we haven't looked at any of this code other code yet i want to send this out for review so i'll uncheck everything else okay and then i can go ahead and apply the migration it's going

to ask me if i really want to do this i say yes it's going to go ahead and rewrite just the code that we just audited here on disk so we can see here it said it's migrated a few files it updated our pub spec to say that the whole project is opted in and then it has marked a whole bunch of files as explicitly opted out because we haven't migrated them yet and if we start the tool up again it will tell us hey these are the files that are not migrated these are the

files that are migrated what do you want to uh what do you want to do with this okay okay so so that's the workflow um if i wanted to i could now send feature discovery off uh for review i could start in on the next part i could do the whole thing in one go with a bit of uh help from the migration tool we could have this whole app up and running just without a lot of fuss might take us an hour or two to get something um really tuned and fine okay so a

few things that i'd like you to take away from this first remember that you should only migrate when all of your dependencies are ready we really strongly encourage this and pub outdated mode equals null safety will help you figure out if you're ready or not when pub says you're ready go for it if not you need to wait maybe you can help migrate some of those other packages you depend on while you're waiting and get familiar with null safety second when you are ready to migrate i hope i've convinced you that the migration tool is

a great option for speeding up the process you can try using it in a one-off fashion the way i did at the start but we think you'll probably get a better outcome if you work with it interactively the way we did here at the end finally whether you choose to use the tool or not i hope it's clear that migrating to null safety isn't a terrifying ordeal our experience is that most code is pretty straightforward to migrate whether you're using the migration tool or just using the ide and we've been really quite happy with the

result so thanks for listening thanks for being part of the dart and flutter community and happy coding when you close the door of a modern car chances are that the sound you hear is engineered the latch mechanism is made in a way that makes it sound a little bit more deeper and more vault-like and satisfying old cars didn't have that in this talk i want to show you how you can make your flutter apps more satisfying to use if you want to expand your expertise with some design jobs this talk might be for you there's

an important concept called perceived value this is the value of something as it is perceived by the user a car for example is inherently valuable because it can take you from point a to point b in relative comfort but that's not the whole story is it two cars can both take you from point a to point b in relative comfort but they don't have the same perceived value all it takes is something like the sound that the car makes when you close the door you'll find that the perceived value of a car is often as

important as the functional one similarly your app can be functionally amazing but it could still be if it feels too bland or flimsy then people will just not use it as much the perceived value will be low some people will still use it of course but others will be put off on the other hand just to be clear if your app or if any app is not valuable at all if it doesn't have any functional value then no amount of additional perceived design polish is going to save it so in this talk we are assuming

that the app has some functional actual value it's use useful it just needs a little bit of polish you may be thinking well i'm not a designer how is this relevant i'm a developer you know like i i don't do this kind of thing and you're right you can have a perfectly good career in software engineering without ever really thinking too much about design you can just implement whatever the designer tells you to implement and that's fine and there's nothing wrong about that this talk is for people who would like to meet the designer halfway

or people who would like to even bridge the the gap between development and design or maybe people who want to become the mythical designer dash developer some people call these developers unicorn developers because they're rare and valuable okay so what are some of the things that you can do in flutter to make your app more polished this app for example is not polished it shows the agenda of my talk starting with corridors and ending with animations and it even like tracks my progress and shows a little congrats card at the at the end so let's

pretend it's valuable but its perceived value is pretty low let's try and fix that we'll start with white space white space is the blank space around elements of your app that make those elements stand out whitespace is sometimes perceived by product makers as waste said it's like oh all these precious pixels used just for background what but white space is actually really important and it communicates meaning hierarchy and relatedness between elements of your app so do we have a widget in flutter for white space yes it's called padding that's right sometimes just playing around with

padding in your app will make a big difference in the perceived value of your app and this is something that you can do very early on even if you're just playing with a prototype it's easy to play with using how to reload so you can see immediately what the effect is and again hot jolt will just make it happen you don't need to do anything more a related simple thing to white space is alignment right this is nothing more than making sure that elements on your screen are lining up nicely for example these paragraphs might

look nicer if they line up with the title again this is just padding most of the time and sometimes using the align widget for example if you want to line up to the right aligned elements aren't just nice to look at the alignment also communicates some meaning the paragraphs belong to the title because visually they're in the same group next up typography in most apps text is a big part of the screen some apps are basically a vehicle for a lot of text right so it's it's important so how do we improve typography in our

apps how do we improve the way text looks like you're looking for consistency and delight consistency means that you have only one text theme and then you're using that one text theme throughout the app you try to keep the fonts the styles the sizes to the absolute minimum that still communicates meaning if you find yourself overriding the textile too often then that's a good indication that you might not be consistent enough just extract the styles into text theme and then use that [Music] instead [Music] how do you delight with text though well it depends on

the kind of audience that your app is for some apps can delight by being minimalist others might go for absolute mayhem just crazy things still others and i think the majority of them might delight with just the more classical approach of having a good display font for the headlines and then something subtle but interesting for the body text don't forget about letter spacing and other typographical measurements they are there for you to play with right for example the letter spacing of bigger headlines can be much tighter because the increased size of the letters makes up

for the decreased readability of the squeezed characters and the squeeze characters may look much nicer line heights similarly can be pretty tight in titles but for body tags they need to be more spaced out so that it's easier to read again hot reload is your friend you won't get to the right combination on your first try trust me at least i can't this stuff needs iteration next let's look at colors once again there's a lot you can achieve just by being consistent so find a palette and stick to it finding a good color palette is

actually pretty hard again especially for me it's super hard but there are online resources there are actually online tools that can help you and there are tutorials and articles you can also get inspired by art and fashion and architecture and what have you when you have a palette just use it in your material themes theme data and then use it around your app so you can specify each color in that material theme themes data or you can just specify some of the basic colors and let material theme guess the good complementary colors from that i

recommend using material color swatch which is just a fancy way of saying it's a color and nine of its other shades from a primary color material theme then can guess some of the other little things like for example the color of text selection in your app but of course you can always override to your heart's content and you can make the text selection whatever color you want material theme has also the concept of accent color this is the kind of color that you want to use sparingly but that adds a lot more life to your

design if you don't have that then the app could look a little too bland but again use it sparingly like with red roses in a room that looks great but if you have a room that is completely red that may not be such a good idea if you have a brand or visual to work with then of course use that that's best anyway there's a lot to be learned about color of course but you'll get a long way by just being consistent next iconography a nice well-placed image makes a huge difference in the perceived value

of your app these can be photographs illustrations splats of color what have you don't underestimate the power of adding a single image to your app and placing it prominently on the screen also don't forget to make the image match the rest of the design or vice versa match the rest of the design to the image like here i notice that there is a subtle gradient on the image and so i copied it to the background of my app so first of all there's no discontinuity and it also just looks nicer so so far we looked

at white space typography color and iconography so basically padding text color and image right even with just these very basic simple elements you can make your app look much nicer but let's not stop there one of the coolest things you can do with an app is make it move let's talk about animations well actually first let's talk about the basics of motion you want a car to fly from the top to the center of the screen what do you do well you use something like slide transition or animated position and you're done right wrong you

see by default in flutter these kinds of widgets that move around things default to curves.linear this is an obvious default because flutter can't know what you want but it's also a pretty bad default to keep as is because you almost never want curves.linear to move things around once again you should use hobj load and experimentation to find out what's best for you but most of the time a good subtle ease out or ease in curve will work in our case you can see how curves dot ease out cubic made a huge difference and you can

now see how the linear curve looks really weird and unnatural people when they see movement like that in apps they can't put their finger on what exactly is wrong they just know it's wrong well what's wrong in this case is that we're using the linear curve there's no acceleration it's just starts moving in constant speed and then stops immediately and nothing in the real world moves like that so it feels unnatural okay so now we have this animation there where the card comes from the top and it's not literally animated which is great can we

make it a little cooler a little more satisfying so just sliding is fine but we can also animate in the other stuff like for example we can make the confetti icon show up and then we can check out the text below if we try that and animate everything at once the result is actually terrible i think instead of making the animation look cooler it's just all muddled and confusing there's a concept called staggered introduction when you're introducing new elements to the ui you don't want to show everything at once you stagger their animations you space

them out so how do you do this in flutter well there's a great article on flutter.dev called staggered animations and you should just go check it out it's really good and it has code in it that you can immediately use in short this is done using interval interval is a class that you can use in combination with animation controller and so for the whole introduction using all these elements like for example our sliding card and the icon and the text you use a single animation controller that runs for the whole direction and then for each

of the sub animations you use interval for example an interval like this will will do nothing for the first 50 of the whole animation controllers duration and then between the 50 mark and the 60 mark it will do the whole thing and then it will be at rest for the rest of the animation you can combine this with another sub animation and another part of of the thing will use a different interval that can be overlapping with the first one and in this way you can orchestrate this belay of animations at the end you will

have this ab that comes to life like like things are starting to come up to life so is this great design probably not i i don't think so i'm not a designer but it's better than this right and i spent about three hours doing this including lunch instead of days of back and forth with a designer now i can ask an actual designer about ways to improve what i already have and i have the vocabulary to talk to them about these things by the way i want to say that the code for this app both

before and after will be available on github and i'll make sure it's accessible so you can play around with it and ideally make it even nicer because i would really like that in conclusion here's what you learned today even without being a full-blown designer you can still make your apps more satisfying to use this will increase the perceived value of your app more people will be installing it more people will be keeping using it and research shows people will even think it's more user-friendly just by looking at it as i said before if your app

doesn't have any actual value then no amount of design polish will save it but on the other hand don't let a perfectly functional valuable app be overlooked by the users just because it doesn't have that you know satisfying element this additional perceived value of your app will in turn make you more valuable if you're able to build apps that people value more then that's going to be good for your career so learn about the basics of design color theory typography psychology sociology and and use all that in your flutter development think of yourself as a

maker not just a coder a designer dash developer thanks for watching so hello everyone my name is zoe i am a product manager on the flutter team and i'm andrew from flutters developer relations team thank you for joining our breakout session we're here today to show you how you can monetize your flutter apps if you watched the keynote earlier you probably already knew that we announced open beta for the google mobile ads sdk for flutter and that's what we're going to focus on today but i just want to quickly mention that in addition to ads

there are two other ways to monetize your mobile apps for example you can always charge for your app in the app store another option will be in app purchase you can allow your user to buy extra content or features such as game currency through in-app purchase we also have a plugin for that on pub.dev today we're going to be focusing on ads because we have this new ads integration that we're excited to tell you about during the keynote today we announced the google mobile ads sdk for flutter is now open for beta in this brand

new plugin we now support a wide variety of ad formats for example an overlay banner which is usually a rectangle ad at the top and bottom of the device screen second an inline banner actually it's just another variation of the better ads but the main difference here is that the overlay banner is floating on top of a flutter view but the inline banner allows you to integrate it into the widget tree so the ads can appear in line with ad content next is interstitial these are full screen ads that cover the whole screen of your

app these ads work great when you place them at natural breaks and transitions in your app for example you can place them after the user completes a level in the game we also support rewarded video these are ads that reward users for watching short videos last but not least we're also supporting native ads native ads are highly customizable so you can design them to match the look and feel of your app content this allows you to provide a seamless ad experience with minimal interruptions to the app moreover another highlight of this new plugin is that

we are now unifying support for both ad manager and admob for those of you who are not familiar admob and ad manager are two different ad services generally speaking small to medium-sized publishers prefer admob because it's an easy to use solution google ad manager is an ad management platform for large publishers who have significant direct sales and need more advanced features that being said no matter what size publisher you are our new plugin is able to tailor to your scenarios when it comes to mobile code admob and app manager are very similar in terms of

implementation so for today's demo we will use an admob ad as an example before we get started here's some ads terminology i would like to clarify first add unit add unit represents a single place in your app where you want to show an ad if you have an app with three screens and you want to show a banner on each screen then you need to create three ad units so you can control them independently next add format we already talked about it earlier you can choose between a banner ad an interstitial rewarded video or native

ad add request when your app loads an ad it sends an ad request to the server you can use this object to provide additional information that can be used when selected last but not least test ad once you implement an ad you definitely want to test it but it's important to enable test ads during development so you can click on them as much as you want without the clicks actually being recorded because if you click on too many ads without being in a test mode there's a risk that your account might be flagged for invalid

activity and you don't want that to happen the good thing is that google does provide test ad units these ad units are not associated with your account at all so there's no risk of your account generating invalid traffic when using them okay now you have enough of ads terminology we can get started for today's demo andrew and i are going to show you an app we created in our spare time let me tell you more about it both andrew and i are parents so we created this app called the big list of parenting jokes it

was so much fun that we wanted to share it with the entire world but we soon realized that we have to pay for the maintenance cost the servers etc so we like to monetize the app via ads that way the app can be free to download in order to load an ad in your app the first step is to create an ad unit actually in order to do so you will first need to create an admob account you can follow the link below to create an account to save some time i have already created an

admob account after you log in you will navigate to the left and click apps in the sidebar here we want to create a brand new app so you will now click add app let's first create an android version of our app select android as the platform select no because we haven't published yet let's fill in a name the big list of parenting jokes select add app okay now you see there are two tasks for you to complete the first one is to set up an apps.txt for the app that's a mechanism that lets you leverage

your business website for some extra security it's a good thing to use but since we're focused on mobile app right now i'm going to skip past it now let's move on to create an ad unit for the add format i'm going to pick banner because banner is probably the easiest one to start with later andrew can show you how to display an overlay banner versus an online banner in the code now let's enter a name for this ad unit let's call it a demo ad well you know what the name is kind of boring i'm

just gonna call it a fun ad here we go click create ad unit hooray now you have your first ad unit but don't forget you only create an android version at this point let's repeat the same step to create an ios one let's hit done go to apps in the sidebar add app select ios this time click no hit continue put the app name there click add app create an ad unit select the banner again give it a name click create add unit cool now we have two ad units one for each platform now android

is going to show us how we can load them in our flutter app over to you andrew thanks zoe alright so here i am with my running app it displays a list of jokes that i like to tell my daughter as you can see my design skills aren't that sophisticated but my comedy is pure gold right so that's why philip did the talk and design touches and i'm doing this one let's take a quick look at the code i have a hard-coded list of joke data here in a file called data.dart in main.dart i have

a stateless widget that represents my app and another widget for the screen itself which uses a scaffold and list view to display a row for each joke in the list so i've got my app zoe and i made the decision that these jokes need to be brought to the whole world so i'm going to use ad based monetization from admob to make that possible the first step is to get the ads sdk integrated into my project i can do that by adding a line to my pub spec for the google mobile ads plugin this plugin

has support for ios and android while i'm in here i'm also going to throw in a line for provider which is a package you may already know it makes distributing data down the tree with inherited widgets a little cleaner and easier now i just need to do a pub get and a full rebuild of my app and i'll have those packages and the native code that comes with the plugin now once that native code is initialized some of it's going to look around for an admob application id i just registered two of those yep and

i need to add them to my underlying android and ios projects first let me open the manifest for my android project i just need to add a little xml element within the application tag to hold that id as metadata you'll see there's a particular name for the metadata and don't worry about memorizing that because it's included in the plugin instructions okay so that's android now for ios i need to update the info.plist file that's part of my app's ios runner subproject the flutter plugin for intellij has this handy shortcut for opening xcode which i will

now use then i add a new row to the plist file called gad application identifier and again don't memorize that because it's in the instructions and then i give it a string value and i paste in my ios application id cool so now no matter which platform i'm building for android or ios the sdk will know right where to find the correct id speaking of sdks now is a good moment to point out that the google mobile ads plugin references the same native mobile ads sdks that you use for any other ios or android app

so the two places you just saw me adding id values are the same as you would use for any other ios or android app whether it's built with flutter or not okay so now i need to update my app's dart code to take advantage of these new capabilities let's start right up here in main before i do anything ads related i need to initialize the mobile ads sdk for simplicity's sake i'd like to do that right when my app starts running because that initialization involves dart talking to native code i need to make sure flutter's

method channel service is running and the way to do that is by calling widgetsflutterbinding.insureinitialized you may be looking at that line and thinking i've used plugins before and never in my life if i had to do anything with whatever the heck that method is and you'd be right run app will actually call this for you when it executes but because i want to use a plugin before calling run app i need to do it myself to avoid a runtime error okay so here's the initialization call which returns a future it's important to wait for that

future to complete before doing anything that involves ads sitting and waiting before calling run app isn't a great idea though so instead i'll create a little class to hold data about my ads integration and use provider to make it available to the widgets further down the tree so i'll make a new file called add state.dart and inside i'll create a little model class first thing it'll need is a property for the future and i can take that in via the constructor also i can stick my ad unit ids in this class i register to love

those as well right as we saw earlier zoe created one banner ad unit for android and one for ios since i'm working on my app right now though and you should always always always use test ads when you're working on your app i'm going to use the dedicated test ad units for banners on ios and android there's actually a page in the admob documentation that lists these ad units for each platform and format and they always serve test ads which makes them great when you're coding so i'll add a little platform check here and return

the right ad unit for each one now back in my main method i can create one of these little objects and give it the future from the mobile ads plugin then wrap my application widget with a provider and use the value constructor to make my add state object available to any widget that needs it all right now if i do a rebuild of my application you will see that i have changed absolutely nothing that's visually discernible but that's okay it's up and running with the sdk and now i can load and display an ad there

are lots of ways to make room in an app's ui to display a banner however i am but a humble dad joke author so i'm going to start with one of the simplest just a single banner at the bottom of the screen first i'll wrap my list view in a column then i can add a sized box at the bottom i'll give it a height of 50. there are a bunch of standard sizes for banner ads but 320 by 50 is definitely the most common now i just need to add an expanded widget around the

list view to make sure it fills all the remaining space in the column and now i can hot reload again and you see there's now a little space below my list view for a banner and the list view still scrolls nicely within its viewport all right let's load an ad in order to track the state of an ad as it loads i need a stateful widget so i'll convert joke list screen to be stateful and the plugin helps me here and now i can add a field for a banner ad this object represents a single

banner ad placement within the application the remaining work for me is about loading an ad into this placement and using the aptly named ad widget to integrate it into the widget tree so my users can see it okay first up is loading an ad i need to make sure initialization is complete before i do that so i'll override did change dependencies in the state object this method is called anytime one of the inherited widgets on which a state object depends gets changed it's also run just after in its state the first time a state object

is created but before build so it's a good spot for any non-trivial work you need to do that requires a build context first i need to call the superclass method next i'll grab the add state using provider then i can use then to add a function to be executed when that future completes inside i'll call set state and instantiate a banner ad object it needs an ad unit id which i can also get from add state and a size i'll use add size.banner which is 320x15 next up is an ad request and i'll just need

a plain one but this object allows you to set flags and parameters that are used when the server selects an ad if i were using google ad manager here rather than admob i might want to set keywords to help the server select from several different ad campaigns that i'd set up beforehand the last parameter i need is an add listener object this is a class that exposes a bunch of callbacks that the ads plugin will call in response to events i could define one here but a better place would be back in ad state i

can create a getter for a listener right here and for the actual instance you know how we've all seen those cooking shows on youtube where someone starts a recipe for like a giant roast tart this is okay this is going to take about three hours to cook but i just so happen to have one here that i started three hours ago well consider the following pasted in code to be my giant rose turkey because it's large and easy to understand actually it's only 15 lines so maybe a roast chicken but it is good code this

is a simple ad listener that just logs all the events that can take place there's one for an ad loading for instance and one that's called when someone taps on an ad and leaves the app for a browser you could use that one to stop background work if you happen to be running some anyway i provide that listener from my ad state object right here and that's it now i just need to call load which i'll do using the cascade operator this is a neat little dart trick it calls the method but instead of returning

the result it returns the object on which the method was called cool so now i've got this closure here that will execute once ads are initialized and it's going to create a banner ad and call set state all that's left now is to display that ad so let me go back to my build method and change the bit at the bottom to use an if then ever since dart 2.5 we've been able to use if else statements and for loops inside lists so i can put a null check on banner ad here and return the

size box if the ad hasn't been created or put in a container with the same height if it is then inside the container i'm going to use an add widget to display my banner ad okay let me go ahead and hot restart and there's my test ad i can tap on it and open a browser with the destination url come back and you can see in my log that the listener is receiving and printing out ad events properly awesome so i guess we're done now thanks everyone i hope you've enjoyed this talk wait uh we

haven't gone to the cool part yet okay just kidding please go ahead and be cool thanks and i i wish people would say that to me more as some of you may know there's been an admob plugin for flutter for a while i actually worked on it a bit when i was on the ads team that's how i got hooked on flutter in the first place what's new about this version is that the ads are integrated into the widget tree previously they were displayed with native views that floated on top of whatever flutter rendered they

were two completely different systems so you couldn't put a banner in a column like i just did and you definitely couldn't put them in a scrolling list of widgets now though you can and i'm going to show you how and turn my dad joke business up a notch first up i'll need more than one banner so what i'm going to do is remove the banner ad property and instead keep track of a list of items one for each row in the list and they'll be either a joke or a banner then in in its state

i'll start with a copy of the list of jokes so now i've got a new list and inside did change dependencies instead of creating one banner ad i'll loop through the list back to front and drop in banner ads every so often let's say to start a few from the end make sure i stop at one so there's no chance to have an ad first in the list and i'll put in one banner every 10 items now i just use insert at that index and i keep the same banner at constructor and load method from

before so instead of loading one banner ad i'm loading a few at once and keeping track of where they should be displayed in the list cool so now in my build method i can remove the column and expand it and the fl's and go back to something much simpler first i need to change item count to use that new list and then i change the item builder to check the type of the item and return a joke row if it's a joke or a container and add widget if it's a banner ad okay i made

a bunch of changes to the state object so let's do a hot restart instead of a hot reload and there we go i've got an ad on the screen and it scrolls right along with the rest of my list there's some other ads below and you can see they disappear under the app bar just like any other widget but i can still tap on a banner ad and just like before go to the browser come back no problem this to me is the best feature in this new version of the plugin being able to monetize

with ads in a way that feels more natural and less obtrusive goes a long way to maintaining a good user experience also let me pull up an android emulator and build my app again this is a flutter event which means i'm talking to a multi-platform audience and i know you're curious and so here you can see the same app running on android with no code changes required i'm monetized on both platforms thank you andrew in this breakout session we have shown you how you can implement banner ads in your app but there are a lot

more features we didn't get a chance to cover in this short session and we strongly encourage you to take a look the google mobile ads sdk for flutter is available on pub.dev for you to download and try today please follow the link below for detailed documentation by the way we also design a codelab please give it a try we hope this new plugin will help you unlock more revenue growth for your flutter apps thank you for joining us today bye bye now thanks everybody [Music] you