[MUSIC PLAYING]
MARTIN AGUINIS: Hi, welcome to Mobile World Congress.
I want to introduce you to Flutter, Google's toolkit
for building native apps on iOS and Android
from a single code base.
And, in fact, since MWC last year, we've
seen global brands from all around the world
using Flutter to build their apps.
These challenges all still exist because the current options
out there all involve compromise.
In fact, there are two main ways to build apps today, each
which pose a different set of compromises on these four
priorities.
We call it the dilemma of mobile app development.
Flutter's a third approach, one that
falls for neither of these sets of compromises.
It's fully native.
Everything written in Flutter compiles directly
to native machine code, meaning what you get on your phone
it is exactly what was written.
There's no context switch.
But it's also a single code base.
So you get that straight path to the castle.
But today I'm really excited to officially announce
the release of Flutter 1.2.
[APPLAUSE]
You can go to flutter.dev and download it directly,
or if you already have Flutter, simply update.
We are launching a brand new YouTube channel dedicated only
to Flutter.
So on there you can find videos from technical videos
for your developers to really understand Flutter,
to case study videos like the one we just saw,
to a lot of other things that are
helpful when you're building or going through Flutter.
Secondly, we just launched Flutter Create,
which is a competition for developers
to build an app in Flutter in less than 5 kilobytes of Dart
code.
And we have some really cool prizes,
but it's also a fun way to get quickly involved
in the Flutter community and onboarded with the platform.
And that runs until April.
So, you should go check that out.
So all the apps you saw up there use Flutter
but in different ways.
Now, there are three common ways people are using Flutter today.
The first is to build a brand new app
from scratch using Flutter.
So if you have an idea or an app that you
want for your business, now would be the perfect time
because you develop in one place, ships
natively on all platforms.
The second way is to actually build Flutter for the other OS.
What we mean by that is, if you already
have an iOS or an Android application,
and you want to build the other one to reach more users,
you can build that other one with Flutter
and get it out quickly and eventually merge
the code bases.
And thirdly, add Flutter to your existing app.
I'm sure many of you and your businesses already
have applications.
The good news is you can use Flutter for that.
In fact, that's what Alibaba did in the video you saw earlier.
They incorporated Flutter to re-brand some of their pages
but they didn't lose the 50 million installs they had.
It was simply an update.
Instead of me telling you about these use cases,
I thought it'd be great to show you a firsthand example
and bring up partners as well to talk
about how they've incorporated Flutter
in these different ways.
DOM DRONSKA: Hi, everyone.
I'm Dom.
I'm Head of Digital for Abbey Road Studios, presumably
the most famous and definitely the oldest recording studio
in the world.
And today, I'd like to talk to you how
we're at 87 years of innovation brought us here on this stage
and to build our very first mobile app, created
with Flutter.
So we decided to create Topline, the very first songwriting
up from Abbey Road Studios.
This app allows you to import an instrumental track,
sing your vocals on top of it, jot lyrics,
share very easily with a producer or whoever else
you're working with, and save it all in the Cloud.
We are really inspired by the studio experience.
And this is what we try to kind of reflect within the studios,
within this mobile app.
So most of the musicians out there,
they know what it means when the red light shines.
It means you're on air, you're supposed to start.
So we reflected that in the app.
We reflected the shapes, the shapes of the buttons,
the [INAUDIBLE],, as well, the shapes of the little
knobs there-- those are things which
are usually known to musicians and they
know what to do with it.
And all of that was only possible
with a high customization of the natively available elements.
So we had to use customizable widgets from Flutter
and that really made that beautiful UI shining through.
We were able to actually build the Android app in record
10 weeks.
10 weeks, guys.
And this is with just three developers--
two front end and one Android developer.
It was not only used by musicians around the world
and in the studios, but also it was picked up by the media--
by Forbes, Music Radar, MusicAlly,
Sky News, Pocket-lint, Metro, what have you.
Lots of lots of titles got really interested
and were really complimentary about our app.
Last year, we won two really, really prestigious awards--
Best Music UK App of the Year and Best UX of the Year
VARUN MENGHANI: Hi, everyone.
I'm Varun Menghani and I lead the merchant product management
team at Groupon.
So our journey with Flutter started almost a year ago where
we were tasked with building functionality for merchants
on Groupon's new program, called Groupon+.
At that time, we evaluated multiple options.
Should we build a brand new app for the new program?
Should we extend our native functionality
for this new program?
Should we take a cross-platform approach
to build once and deploy it twice?
And that's the time we came across Flutter.
When we looked at it, we are very
excited by its capabilities of being
able to build cross-device and also the speed of application
development.
However, we also wanted to make sure
that whatever we build integrates
well into our existing functionality,
and it is stable, and it's also [? performing-- ?]
so there's no performance degradation when merchants
used the app for business.
We ran a POC and we were pleasantly surprised
by the results.
And that's the point at which we built all the screens
and the functionality of our new Groupon+ program for merchants,
using Flutter, and integrated that with the existing screens.
We were happy with the overall implementation of the project
and the success of that.
We also continue to use Flutter in other new features that we
built. A prime example being when we revamped the app
support for all our merchants, not only the Groupon+ ones,
but also the regular ones.
CARL PERRY: So as Martin said, my name's Carl.
I'm the lead for Square's developer platform.
I'm thrilled to be here today to talk about our partnership
with Flutter.
To date, actually-- we found out about Flutter
and got engaged really early in the beta.
And we've been incredibly excited
and amazed at the passionate engagement
that we see in the developer Flutter
community on a daily basis.
Since launch, what we've seen with Flutter
is incredible adoption.
In fact, over 30% of active developers building
applications using our in-app payments
SDK are Flutter developers.
Every one of us is building an application for Flutter.
And on the left here, what you see,
this is the actual product experience
you will get inside of your application on Flutter.
And this is in about five lines of code.
This guided experience is provided
to every single developer and they're
able to customize many different aspects of this
as they see and need to in their application.
As you can see, it's easy to build applications that
take payments using Flutter.
We're incredibly excited to continue to work with Google
and see what people build with our SDKs.
MARTIN JERET: Thanks, Martin.
And hello, everybody.
At Nevercode, we believe that the businesses
should be able to test and deliver
mobile apps seamlessly throughout the development
process.
You should be able to focus on making a great product
and have the testing and delivery process automated.
Before Codemagic, we've been building our automated testing
and delivery product with mobile developers
in companies like Toyota, Sainsbury's, and Walmart.
And we made a dedicated service specifically designed
for Flutter.
That service is Codemagic.
And we automate all the manual work
to get your app to the users.
Codemagic is a free service, and businesses
can use it to test and deliver their app seamlessly,
and developers can focus on building a great product
and making users happy.
CHRIS SELLS: My name is Chris, and I
am the product manager for the Flutter developer experience.
Of course, any architecture we want, we want it to be layered,
we don't want it to be intermixed,
we want it to be easy.
If there's anything that we want to do to extend Flutter,
either on top by building our apps or in the middle,
by forking it or adding functionality in between,
that you can do that.
So at the bottom of the architecture is the engine.
And this is built in C++ code.
It's meant to be the fastest possible thing it can be.
So it's built at the low level to do drawing
and low-level rendering and we also
have the Dart runtime and [? jitter ?]
at that bottom level.
Now, on top of that, everything else is built with Dart.
When it comes to features of a modern UI framework,
first and foremost, we want something to be declarative.
This is something that what we have from the web.
Traditionally, before the web, when
we wanted to, say, layout something like what
we have on the right there, we'd say, OK, we have a image
and it starts in the upper left, and it
has a certain amount of width, and it has a certain height.
And then the thing that comes under it, we offset it,
and we layout that, and we calculate all those numbers,
and we lay it out ourselves.
That's not how I want to spend my day.
Now, that platform channel idea has
led to a whole ecosystem of plugins.
Because the idea of a plugin is Dart code
plus platform-specific code for one or more platforms.
A package, a regular old Dart package, is just Dart code.
But a plugin is a piece of Flutter code
that can target the native platform using those platform
channels.
And so if you want to write that native code, you can.
But if you don't want to, you can just go to that URL right
there and type in a search word and see
if one of the 1,400 components that's already there
serves your needs.
And the Flutter team has put a bunch up there,
and other members of Google have put a bunch there,
and there's some great ones from the Flutter community--
and Square has built one.
I mentioned a couple of times Flutter 1.2, which
comes with a number of framework features,
including animation easing functions and Android app
bundle support.
And, as I mentioned, those are from third parties.
Those don't come from the Flutter team.
Two big features.
MATT SULLIVAN: So I'm going to see
if I can, in the next 19 and 1/2 minutes or less,
put together a phone dialer.
So what I'm going to do, I'm going
to create my first widget.
So I'm going to go and I'm going to create a stateless widget,
and I'm going to call it my MyDialer,
because I'm going to be building a dialer.
I'm going to take my digit button,
and I'm going to replicate it.
And then I'm going to put in a two.
And now I have two buttons, great!
And let's have a look.
This is a whole bunch of things.
I can do borders, and I can do box shapes and shadows,
but I'm going to play with a gradient.
So let's stick in a gradient.
And I'm going to give this a linear gradient.
This is going to require a couple of colors.
And I'm going to stick with that dark blue that we had earlier.
And I'm then going to make a hideous design choice
and blend it into green, because why not.
And there we go.
OK, so now we've got a color.
And this is a American phone with a UK SIM,
sitting in Spain, so it takes a few seconds to go through.
Did I get your number right?
[PHONE RINGING]
CHRIS SELLS: Hello, Mobile World Congress?
[? PHONE PLAYBACK: ?] Mobile World Congress?
MATT SULLIVAN: There we go, I think that's working.
CHRIS SELLS: Excellent.
MATT SULLIVAN: And there we go.
So there you go.
So that was a dialer in Flutter, mostly written from scratch
with a few bits and pieces in 16 minutes and 52 seconds.
CHRIS SELLS: Thank you very much, Matt.
[APPLAUSE]
WILL LARCHE: Right now, good design is expensive--
it's true.
Especially on mobile.
It takes extra engineering resources to execute,
and what you want is rarely what you get.
The designer hands us something detailed and beautiful,
but we push back on what makes it special.
But what gets me excited about Flutter
is that we can break that cycle.
We can ship the app we really want with detail
and polish and fewer of those painful compromises.
Flutter's architecture is designed
for building beautiful, custom UI.
Flutter's main goal is to make building polished custom app
experiences easier for developers and designers.
JACOB KRISTENSEN: Hello, everyone.
My name is Jacob.
I am a co-founder it Reflectly, where I do UX/UI design
but I also do front-end development.
Now, I'm here today to tell you a bit about Reflectly,
but also to tell you how Flutter actually
enables us to push our product visions
into the hands of millions of end users all around the world.
Now, Reflectly is what we call a conversation-based journal.
What this means is that everyday users open up the app
and go through a series of questions.
However, instead of just giving a blank page and they have
to fill it with text, we actually
prompt them with very specific UI interactions.
So they might rate their day with a little smiley face
slider, or they'll select an icon that best represented
how their day actually went.
Now, we're zooming back to the start of 2018,
where we built Reflectly in a completely different
multi-platform framework.
And if you're an eagle-eyed audience member,
you'll see that there are some, let's
call them minor discrepancies, between the two views.
And we were unfortunately seeing this time and time again.
We would push our new features and the consistency simply
wouldn't be there.
We would see that they were lacking, for example,
here half the screen is missing.
So we were really, really frustrated with this.
So we started looking at the market again.
And we found Flutter.
And it was extremely promising.
However, we had to make a very conscious business decision
to invest the time in actually building out
in this new framework or do we go native and actually build
two code bases?
Well, we took a leap of faith.
And from the first line of Flutter code,
was written in March 2013, with the learning curve of Dart
and building out all these new features underway,
we were done in just two and a half months, which
was incredible because we're rebuilding our entire front end
and our back end, just two engineers.
WILL LARCHE: Instead of passively watching
the construction, designers could be a part of it,
carving out a role after the dev has
been done as the arbiters of fine detail,
supporting their engineers and eliminating
unnecessary feedback tickets and effort.
Flutter, I believe, is the platform where
that can finally really happen.
Designers can really learn to support engineers
by sharing the code base to quickly pick up
the skills necessary to feel useful and connected
to the development.
MARTIN AGUINIS: flutter.dev is your go-to link for everything.
We hope you go and try Flutter and give our team feedback.
And I hope you enjoy the rest of our talks
here at Mobile World Congress.
Muchas gracias.
[MUSIC PLAYING]