(epic music) (upbeat 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 announcing 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're going to learn more about how our work on Dart 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 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 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 favorites. (upbeat dance music) So let's talk about what's in Flutter 2. You can think of Flutter 2 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 2, your app can target four
additional platforms: Windows, macOS, 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 gskinner, 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 Flutter Folio. (upbeat 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 focused the
small screen experience around capturing content. Let's say you're 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 via 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've 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're able to
build an app that runs great and feels at home on three
form factors, five OSs, and the web while reusing
over 95% of our code. We built Flutter Folio with
best practices in mind. You can 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 Filip Hráček that we're posting live today. Of course, there are hundreds
of other new features in Flutter 2. 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 scrollbars, 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 Peeyush Ranjan, 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, Peeyush. Timothy here. Ever since Google Pay moved to Flutter, we've gotten some questions
from our developers. Was it an effective move for you, and would you recommend it to other teams? - Hi Timothy, thanks for asking. In a nutshell, I'll say, yes,
it was absolutely effective. You might have heard of Google Pay, but let me first tell you
the scale of the problem. You know, we are trying
to 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 codebases, right, iOS and Android, and a
total of 1.7 million lines. We also had feature disparity. The features being implemented in each was happening at different rate. Also, tech debt that was building up, and we needed more and more engineers to keep up on development
of these codebases. So we started looking at Flutter and after weighing the pros and cons of a rewrite and migration, we decided to rewrite everything. The good thing was, we ended
up with a 35% smaller codebase, 1.1 million lines 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 features implemented
because of the rewrite. We were also able to merge all the duplicate release
process, experimentation, the launch process, security reviews, because now everything was
done on the Flutter codebase. Plus, the best part was,
with every engineer working on the same codebase, 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'd recommend it to any team that builds
on multiple platforms. - Okay, thanks for
joining us today, Peeyush. - 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
tool screen design patterns, such as the list-detail
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're happy to announce
that we're 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 enabling it on other devices, like from manufacturers
like Samsung and others. Let's see a demo now. The best way to demo anything on Flutter is by using that 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 find it across both screens now. As you can see the app reacts
natively to the screens and repositions to
assets across both panes. This is typically the first
step that you would 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 dialogue, it will now be hinge-aware
and it will display according to your choice on the right or left pane. We've also modified other module routes, pop-up menus, and other widgets. Let's move on. We've added a new widget
to help you position assets on two screens. We call it the TwoPane 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 TwoPane 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 MediaQuery. You can use it to query the type of displays you have and
the position of the hinge. when you're using the TwoPane 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 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're at, and today, we're super excited
to share this 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 support for the web platform has
hit the stable milestone. This is a huge leap forward for Flutter, building on the portability of Dart, 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 is 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 webpage
makes sense in Flutter, but we think that Flutter
is particularly suited for app-centric experiences, things like progressive
web apps that integrate to the 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 Almaer, 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 broad tent 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 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 goes
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 performant 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. And we've seen this at work
as Flutter's web support was transitioned from tech preview to beta to now production. The Flutter team were able to try different rendering
approaches, you know, starting with the DOM, but then CanvasKit, taking advantage of new APIs to help with ergonomics and speed up performance. This is where WebAssembly
and WebGL opened 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 I 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. I 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 CanvasKit
renderer that combined Skia 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 Blaska, who's
a developer in Germany who's been experimenting with
Flutter graphics on the web. (glass shattering) (upbeat 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. (glass shattering) (upbeat 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 auto-fill, 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 scrollbars 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. - [Narrator] Your 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. 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 that 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.com. Of course, we're using
Flutter's web support ourselves. One example that will be
familiar to most of you is DartPad, 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 inline 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
Hasnany and John Ryan walkthrough 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 Skia 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: macOS,
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 VanDine,
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 broaden 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 it 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 Yaru, which is a community-led
effort within Ubuntu. We have worked with the Yaru
team to bring Yaru 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 preloaded 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, macOS, 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 are building Flutter
right into the heart of their core product. 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 in the 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 gave 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 leverage 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 of 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 Embedder 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 with in-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 Dart's 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 in-vehicle use cases. At Toyota, we see working
with open-source software as a positive investment towards our in-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 Dart as the secret
sauce 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 an 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 that 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 shift null safety without breaking your code. Instead, we allow null
safe code to co-exist 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 in 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 some
operation isn't needed and eliminating it, but that
optimization is only safe to perform if the compiler can prove that the operation has 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 of
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 attendance structure and
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, 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-altering
some parts in x64 and ARM assembly to take
advantage of vector instructions. The result is anywhere from two to 20 times faster than before. When you want to access features unique to a hardware platform, you need some kind of inter-op 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, a quality hashcode, 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 dead
weight 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 has 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 2. The first new feature we'll look at is one we call Flutter Fix. As part of Flutter 2,
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 2 is created
a tool called Flutter Fix that does all the heavy lifting for you to migrate deprecated
APIs in your codebase. 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've updated the Flutter 2, there's some analysis errors to address. You can see that it's using
a couple of 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 breaking changes
in future versions, we'll add new quick fixes to
help you migrate your code. Flutter fix 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 2 let's move on to the second feature I'll be showing off today:
null safety in 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-nullable 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 apps 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 RenderFlex overflowed by
282 pixels on the bottom. Now looking at this error 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 open turns 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's 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 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 DevTools 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 DevTools. 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
and 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 2 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 2 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 Leaf Peterson. Okay, 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 Dart 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 Century 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 Zoey Fan to tell you all about it. - Thanks Tim. Hello, everyone. My name is Zoey. I am a product manager
on the Flutter team. There are many ways that mobile developers get paid for their work. Monetizing apps by 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 banner?
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 Ads 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. Sua Música is one of them. Today, it is a great
pleasure to have Alan, the CTO of Sua Música to share
his experience with us all. Let's welcome Alan. - Hi, I'm Alan, and as Zoey told you, I'm the CTO of Sua Música. Sua Música 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. (upbeat music) Since we're a free platform
and we need to monetize it using the best way possible, we must have a great UX, 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 banners in the widget tree 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. Okay, let me show you 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 a unit
name and a list of sizes. Then we will define our banner
as the publisher banner ad that receives our sizes adUnit listener and the publisher ad request. We can never forget to load the banner. On our listeners, we're going
to 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 Ad widget that receives
our defined banner. Now we just need to add
our newly-created widget to that part of the page,
the SMBanner adUnit. I'm going to put the adUnit defined before the admobBannerApp with the sizes. I will put the large banner. It's the 220 by 100. Just need to save, hot reload, and it should appear right now. Okay, we forgot to save the widget. Okay, hot reloading, and then there's the banner. It should also appear in every page. As you can see, it scrolls together with all the widgets as we want it. That's it. You don't have to only take my word. We've had the amazing metrics showing an increase of performance
since we made the change. When we launched the new app with the Google Mobile
Ads SDK for Flutter, we saw a 350% increase on impressions, with a 43% increase on CTR and 13% increase on our eCPM. That's it. Hope you guys liked and saw how easy it is to insert ads in our
apps with the new Ads plugin. - Thank you, Alan, 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, Zoey. 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. - I'm a Flutter developer
from Lagos, Nigeria. - A software engineer from Ghana. - Mombasa, Kenya. - Port Harcourt, Nigeria. - Luanda, 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 Flutter in 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, by spending a while building
a few CSS-inspired effects for web using Flutter. 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 (inaudible), you can
basically sit side by side with the designer and change
themes, colors, designs, and preview it as you're doing it. And I've worked on five
different real-life applications using Flutter. - Flutter 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 and then designs from
Drupal, from other people, and looking at existing
native applications, I can be able to say, "Okay, what if I try "to do this in Flutter." - I love design and it's always exciting to bring designs to life. I love how I'm able to build
constant UIs across platforms, and I love how my apps run very fast. - So Flutter has opened doors for me. - I have gotten a couple
of jobs from Flutter. - I had the opportunity to earn 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 US. This is my Flutter story. - That's my story. (upbeat music) - So we've 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 & 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 the brand-new projects we've been working on
for the last 18 months. It's a new storytelling
experience featuring the lovable Wallace & Gromit, and it's called Wallace
& Gromit: The Big Fix-Up. 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 realtime. 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 and its
plugin community enabled us to quickly navigate a
complex maze of 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 projects, which is available for developers now. - In just one week, we were
able to ensure compatibility with our Unity AR tech stack
such as ARCore, AR Foundation, and other libraries, and we
were 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 AI interactions provided by Unity. Moving forward, Flutter
Target API made it easy to maintain interaction, MethodChannel API easy to understand, and allows us make
bi-directional communications between Flutter and Unity while maintaining that beautiful and high-performance
Flutter rendering engine that just makes our app
look and feel great. - Thanks to Flutter's animation support, we were able to quickly
create a unique look and feel for our Wallace & Gromit app through animations and user interface. In particular, the pre-designed
behavior made it easier for us to achieve our goals. From that, we then customized the effects to suit our Wallace & Gromit style. We're also able to implement
drawing-based animations using Adobe After Effects,
Bodymovin, and Lottie. 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 libraries, we were able to quickly
bring together components that built the backbone
of our application. Iterating on our wireframe app to bring in custom high-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 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. (epic music)
