Flutter- Google’s latest innovation for mobile, web, and desktop apps

Flutter- Google’s latest innovation for mobile, web, and desktop apps


[MUSIC PLAYING] MARTIN AGUINIS: How’s it going? I’m Martin, and I lead
marketing for Flutter. It’s an honor to be here. Thank you for welcoming
us to this keynote stage. Let’s see if the slides go up. There we go. All right. So Flutter is Google’s portable
UI tool kit for building apps on Android, iOS, and the
web, among other places. But before we get
started, I’m really curious, who here is
a mobile developer? OK. About 50%. What about web developer? Very nice. Who here has already
heard of Flutter? Wow. About half the room. Who’s actually used Flutter,
built something with Flutter already? Nice. OK. So it seems like we
have a difference in terms of exposure to Flutter
and knowledge of Flutter. So this is how we’re going
to structure the talk. We’re going to start with just
a very quick overview of what Flutter is and why it really
matters at Google and beyond. Then we’re actually going
to hack on some Flutter code live on stage, so hopefully the
demo gods are with us today. And then we’re actually going to
have some partners talk to you and show you some other
really cool demos. So I mentioned what Flutter is. But a lot of times when
we talk about Flutter, we do it with four pillars. So we say that Flutter is
beautiful, Flutter is fast, Flutter is productive,
in Flutter is open. So let me dive into each one
of these for a little bit. The reason Flutters
is beautiful is because Flutter
allows you to paint every pixel to the screen. Everything in Flutter is a
widget, which is customizable, which means that
you as a developer have full control
over your application. We also have some
widgets that we give you, such as the material design
in Cupertino widgets, so you can make your app
look to certain platforms but you can also
customize them to make it a very brand-driven
app, as you can see in the
example behind me, and I’ll show you a
few more examples. Secondly, Flutter is fast. We use Skia, a graphics
rendering engine, and Flutter apps render
over 60 frames per second, as you can see in this animation
built by two dimensions. And that’s actually
overlaid, as you’ve seen, by text and other custom things. So you can create these
highly powered animations that are jank free. Because we’ve all been in that
situation where you have an app and it’s a little bit
laggy, but obviously we expect our apps to have
really good performance. So as soon as it lags, all the
investment you put into the app can go away. Thirdly, productive. So something we love at
Flutter, that we created because our developers
love, is called stateful hot reload, which
allows you to make changes to your code, and
literally in real time, see them appear on
the application, as you can see what’s
happening right here. So we’re tapping, we’re
changing the click to tap and hot reloading it
but we’re also changing some of the business logic. So we’re actually making
it count downwards instead of upwards, and you can see
it reloads that in half a second or so. So finally, Flutter is open. And this is something that’s
really exciting to us. Which is, Flutter is entirely
free and open source. In fact, a ton of
our community members are probably here in
person and watching online, and they’ve contributed a lot
of code, packages, and plugins to Flutter itself. And because it’s open source,
we keep that nature with us as well. So a lot of things, you
can go in and actually see all the code to it, as well as
the demo we’ll show you later. We’ll actually share all
the code there as well, so you can see how it was built. So these are our four pillars. And we’ve seen an incredible
amount of momentum this past year with Flutter. So I want to show
you a quick video of some examples of apps that
have been built this past year. [MUSIC PLAYING] All right. [APPLAUSE] So those are cool apps. But obviously, at the We
Are Developers Conference, we want to show you
the code behind it and actually do
some of this live. So I want to bring
up to stage now my colleague, Matt
Sullivan, who’s going to hack on some
of Flutter code for you. Matt? [APPLAUSE] There he is. [APPLAUSE CONTINUES] MATT SULLIVAN: Hello. This is the part
of the talk where things go horribly
wrong, which is why Martin asked me to do it. So we’ll see where we get to. So I’ve got my
Visual Studio Code. I have my iOS
simulator, which is what I’ve decided to use today. And notice that my simulator
is set for a German locale. So let’s start this up. So I was trying to think,
what would I do for 10 minutes on stage to show, when
typically I kind of build simple things from scratch. So I had to look
around at some APIs, and I found that there was
an open API for the Berlin Transportation System. And I thought, that’s cool. I’ll hack on that, and
then two weeks pass by and I realized that I’d
gone a little overboard. So what we’re going
to today is look at some of the
handiwork I’ve done and tinker around
with a few pieces. So every app needs
a splash screen. Splash screen. And what we see here is,
as I work through it– for those of you who are
not familiar with Flutter, just keep one thing in mind,
that everything is a widget. So I have my splash
screen widget here, which is my entire page, and
then I have my build method. And what this does is,
I take a scaffold, which is a widget, and that gives
me some basics around theming the page, which I have made
this Berlin bright yellow. And then inside my
page, I have a column because widgets are not only
UI components that you see. It also controls your layout. So what I have in
here on my column is I have a couple of widgets, two
of them, which are flexible. And one of them holds a
transportation animation, and the other holds a flat
button down the bottom. So let’s take a look at this
page and see what I can do. Well, let’s say that I wanted
to give my button more space. I could change my flex to 2. OK. So that’s given
me sort of 50/50. I could even go back,
and I could give my piece at the top more space. And so you can play
around with it, and this is hot
reload in action. So moving things around
is all well and good. What we can also
do is we can take a look at our
transportation animation. This is using the Flare
plugin built by 2Dimensions. And I see here that I have
an animation of a bus, and I have my box fit. Well, this is nice, but maybe I
want to play with this a little differently. Instead of containing
it, why don’t I try and cover the whole of the
area with my bus animation? So there we go. I can blow it up a bit. That looks kind of cool. Well maybe I actually want
to fill the whole thing and not lose anything
on the sides, and that stretches it a bit. And so what you can see here is,
as I play around with Flutter, I can see in the real
time what’s happening. So maybe I don’t want a bus. Maybe I want a train. So that’s a cool
train animation. That’s nice. What else do I have? I have metro animation. And this metro animation
is kind of cool. It doesn’t quite fit
in with the yellow. So maybe I could come up here,
and I could instead make this colors .Black and see
what that looks like. And that looks a little better. And I get this cool
tunnel effect going on. And so, again, I
can play around. So it’s completely hidden my
button, so let’s undo that. Let’s go back to bus
for the time being. And that’s great. So down the bottom, I
have this flat button which doesn’t pop very much. It’s not very exciting. And how can I make it better? One thing to notice is that
my text widget is actually using localization because I’ve
localized this both for English and for German. And we can check that
out in a little bit. But let’s say, oh, this
is a boring button. Let’s make this button
a little more exciting. So I’m going to make
this a raised button. And now it looks ugly. But at least you can
see it, so that’s nice. What we can also do is
maybe we can make it the same color as my app page. OK. Fits in a little better, but
it’s kind of hard to see. So let’s elevate that a bit. Let’s give it 10. OK. It’s a bit much but I can
see it a little better now. And so that’s nice. But it’d be nice– I don’t like squares
particularly much. Let’s make our button
a little more shaped. So let’s put in a shape,
and I have a handy– I cannot spell, which is fine. I have a handy
rectangle border here. Let’s get rid of
this because people can’t see what I’m doing. I have a rectangle
border widget, which seems to give some
sort of circular radius. That’s cool. And I can play around
with what this looks like. Let’s keep it a 20. And finally, I kind of
want this to pop a bit. So let’s stick a little border. Let’s make that actually a
little bigger and do that. And so you go. This is a typical workflow
for building UI in Flutter. I change my code, it hot
reloads and pushes the code over in real time– near real time– and it
makes it pop and change. So this is cool. Now let’s move on and actually
look at what the app does. But before I do that, I want
to make an announcement. And the one thing that
developers absolutely love or hate is a new feature. So for the first
time here, we’re going to announce a brand new
feature– and Martin, come on. Come up. Come up. We’re going to announce a
brand new feature for Flutter, which I have dubbed– and I cannot spell. Oh, god. The Martin widget. There we go. Our big release. Who wants to see that again? You want to see that again? I’ll do a hot restart
here and hopefully we’re going to get this again. There we go. Are we going to have it? There we go. We have the Martin
widget, which is now going to be available for
everyone to play with. And you are now
immortalized in Flutter. So there you go, Martin. Thanks, Matt. You’re welcome. OK. So I’m going to
pay for that later. Let’s move on. Here we go. I have my app. This is nice. I can give it a start, and I
can give it a final destination. And it’s going to work out
what routes I can take. Now I’ve got this
preferences area. And as I said before,
I have translated this. We’ve got some nice ways of
handling internationalization in Flutter. And one thing I’m using is I’m
using the open transportation API for the Berlin
Transportation System. And occasionally,
it kind of fires me 502 errors, which it does
irregularly, but I was like, this is going to
happen on stage, so I’m going to put
it in offline mode. And I’m going to activate
this now while I build things, but I’ll switch
it off at the end and we’ll just see how we do. OK. So let’s go back. Let’s keep this in German. There we go. So here I have my search page. And this search page is
actually entirely built using what we call a
search delegate, which is another feature in Flutter. And you’ll find that if you
dig through the Flutter API, there are a lot
of things in there that can make your lives easier. So this search
delegate gives me a lot of things like, it
will build suggestions or I can give
suggestions in real time. I can build results, I can
build some actions at the top. And so what I’ve done
is I’ve created this, and I can search for
something, and I’m going to use Bob because that’s
the standard search term I use. And it’s going to say,
where are my places? Why does it does that? Because I haven’t actually
implemented building the places list yet because I
wanted to show you what it was like
building something a little more complicated,
like a list, in Flutter. So first off, how do you
build a list in Flutter? Well, it’s simply a case
of using a list view. And you ask, well, what about
like recycling your views when they’re off screen? How does it handle thousands? Flutter takes care of that
under the hood for you. You can create a
list view, and you can let the platform handle
all those complexities for you. So list view takes
some children. And what do I want to show here? Well, I’ve got a list of stops. And so that’s not going to work. And why is that? That’s because
everything is a widget. So we need to give it a widget. So I can do some slightly
fancy, functional piece here. And I’m going to map my
stops to a text widget. And for the time being, I’m
just going to show the name, and this gives me an iterable,
so I go back to .toList, and there we go. I have the world’s
ugliest, most boring list. There’s a list. See, and it moves. Doesn’t click, it
doesn’t do anything. So this is clearly unacceptable. So let us use some more
out-of-the-box widgets with Flutter. We’re going to
create a list tile. And a list tile, we can
give it a title, which I’m going to keep as my Text. And I’m going to
balance my braces. I’m going to do that
to make it readable. And there we go. OK. So it’s added some spacing. That’s OK. Let’s put in a leading. And you’re like, well, where’s
he coming up with all these. Well, what I can do
is I can hover over and I can see what’s there. What’s really cool
is I can actually go to the source
code for a list tile. And I can see how the
whole thing is implemented because all of the
UI code in Flutter is written in Dart, all the
sources available and compiles into your app when you
actually compile it. So you can actually dig in and
you can learn and customize and do all sorts of things
that you want with the existing out of the box. So I’ll go back to
creating my leading. And I’m going to make this an
icon just ’cause quickness. Icons.train. And OK. There we go. It’s looking a little better. Let’s– I want to know,
is it going to be a bus? Is it going to be a train? Is it going to be
the underground? So in a subtitle
here, I know that we have the stop types of strings. This gives me a list of
strings, not very useful. So let’s join them together. That’s also not very useful
’cause everything is a widget. And so I can make this
text, and I can do that. And then, notice
that it’s actually styling the text for me based
on where it is in the list tile. So this is great. Still doesn’t do anything. That’s not very useful. So finally, I can
give it a gesture. And because– this
takes a closure. And because I’ve used
the search delegate, that gives me a
handy close function, which returns my value, which
in this case is my star. So now, theoretically,
hopefully, if I haven’t messed any
of this up, I can go and I can click here. OK. So it’s passed it back. Here I’m going to
say, well, we want to go to where we currently are,
and I think that’s the stop. And then that goes, and
that pulls the data, and then now this
is all of our stops. Now this is cached data,
so the times are wrong. So as I wrap up, let’s just
see if this behaves itself over the internet. Now just to show you, he’s doing
behind the scenes API stuff. It’s probably very
complicated and whatnot. How do I make an API call? Well, let’s take a list–
this is how I pull back my list of locations. And all I’m doing in
here is super boring. I’m creating a URL string. I’m calling this
Fetch Data function. And notice that this
returns a future. And Dart is asynchronous,
like JavaScript, by nature, which means
you can do the whole make a call in I/O. It’s
going to be non-blocking, so I don’t have to worry about
threads, processes, new tasks. I can just make it,
and the platform should continue to behave itself
in terms of its rendering time. So I’m going to get
the body, and then I do some JSON
decoding magic where I map them into the
appropriate data types. And then to make the actual
call itself is one line of code. And that’s it. That’s how you make a
HTTP call in Flutter. You can either
return the future– I’m awaiting here–
so I can handle that. And I do a little bit of error
handling, which you hopefully won’t see. And let’s see now if
this actually works. Let’s go back here. I’m going to switch this off. I’m going to pull this down. So hang on, am I on now? Yes, I am. And so I am going
to search for– what did I test earlier– Brandenburg. Yay! There we go. OK. We have internet access,
and it’s working, so I can go to Brandenburg,
and I can click on this. And it updates, and there we go. So that is actually
working through our Wi-Fi here over that. And I know it’s
not super amazing but this took me a few days of
hacking together and playing around with it. So hopefully what you
take away from this is the developer
experience with Flutter because Flutter’s great. You can do all these
cool UI things. But I enjoy, when it
works, standing up here, showing you all
this because this is how I wrote this Flutter app. This is how I played
around with it. I am also the world’s worst
person for styling and UI and everything else. And you may think
this is terrible but you should see
what I typically build. And with Flutter, I
actually produce something that’s vaguely useful. So with that, I will
hand it back to Martin. [APPLAUSE] MARTIN AGUINIS: Thanks, Matt. Never thought this job would
come with my own widget. That was pretty interesting. So I want to show you
this slide really quick, just to show you the actual tech
of behind what Matt was just using. So everything Matt
was building is part of the Flutter framework. And Flutter is
written completely using Dart, the
programming language, so that gives Matt and
Flutter developers control over a lot of things
within the frameworks, like the widgets,
animations, and gestures. Now, all that sits on top of an
engine made with C++ that uses Skia. And this allows us to have
runners to go to iOS, Android, and we also have a JavaScript
implementation for the web, which I’ll touch upon. Now I mentioned Dart, and
the Dart team actually is at Google as well. So they sit right with
us in the Flutter team. And we worked, in
the last few years, very hard to re-engineer Dart to
really work well with Flutter. So you can actually
go to Dart.dev to see the new site and
some of the new features, but here are some
of the pillars that make Dart a really
great programming language for Flutter. So I want to talk
briefly about momentum. Just a year ago, if I asked
who knew about Flutter here, probably most people
wouldn’t raise their hands. But we’ve seen a lot of
momentum within Google and outside of
Google with Flutter. Here are just a few
stats that I found. I don’t have to read them. But also, Stack
Overflow, which I know we just heard
from the CEO, said that Flutter was ranked number
three most loved toolkit. And the reason I’m
saying this is not to convince you to use Flutter. It’s just to encourage
you to just check it out, do some of our code labs. It’s free and open
source, so within an hour you can be doing some
of that hot reloading that Matt has done. So I mentioned some
apps that use Flutter. It started within Google, and
we used it a lot internally. Some examples are
our Google Ads app. We just announced assistance
support for Flutter at Google I/O. There are
few examples here as well. MACIF, for example, a
French insurance company, which over 5 million users– I believe they’re here
somewhere as well– just built their app Flutter. And we have one up there that’s
relevant to where we are today. So instead of me
telling you about them, I wanted to bring
up Josef from BMW to give you his perspective
on using Flutter. Welcome. [APPLAUSE] SPEAKER 1: Thank
you for having me. Over the last couple of
years, the complexity of building and operating an
app for premium brand like BMW kind of exploded. Multiple platforms, a
lot of form factors, and the need to
maintain multiple apps over different brands means
that keeping the quality high isn’t easy anymore. On top of that, BMW is operating
in a highly regulated market and is convinced that we
always have to deliver the best quality to our users. All of that together
means that the efforts of building, and maintaining,
and testing, and running an application in the BMW group
is actually quite significant. So our teams are constantly on
the lookout for technologies that help us to both improve
the quality and the throughput of our work. All of those technologies fell
short in one way or another until we looked at Flutter. So what got us
interested in Flutter was the integration
and [INAUDIBLE] code, the quality of the
application that comes out, and the performance of
the application that we see at the end. What got us really
excited was the support of the community out there and,
of course, the amazing team at Google. And on top of that,
coding in Dart and Flutter was actually quite
fun again, compared to everything we did before. So after a very thorough
evaluation period, our teams decided to
go up to management and highly recommend Flutter
for future development. So after playing with
Flutter with himself, Mr. Guy Duncan that you
see on the slides here, CTO of the Connected Company
within the BMW group, had to say the following, “by
combining Dart and Flutter, we have the first true cross
platform mobile tool kit, and we feel it’s a
game changer to ensure feature parity for digital
touchpoints and IoT. By moving forward with a world
class tooling, automation and modern functional
programming patterns, we can improve feature
cycle time, security, and cost of delivery of
features for the business.” So for our teams, Flutter is
sheer development pleasure. We can deliver features
quicker and with higher quality to the business. We really enjoy the theming
capabilities of Flutter. And we’re interested
to see what we can do with Flutter for the
web and desktop in the future. The open source
nature of Flutter was a big reason for
us to commit to it, and that means we also
want to give back. So over the next
couple of months, we will open source a couple
of libraries we’ve built internally to the community. In fact, there is already
a couple out there. You might have
seen them already. BMW is the ultimate
driving machine. And we believe that Flutter
is the ultimate front end developed machine. Thank you very much. [APPLAUSE] MARTIN AGUINIS:
Thank you, Josef. So one of the pillars
I mentioned earlier was beautiful. And as you can see
behind me, the pattern in apps today–
award-winning apps– are really about beautiful
animations and design. Right? That’s why we have all these
custom components to it. And that’s something that we,
as Flutter from the beginning, knew. So that’s why I
mentioned, we provide ways to make it look like
iOS and Android applications but we also want you to be
able to customize everything. And so what I want to do today
is actually preview a video that we made for this
conference of a company based in Europe that created
their app using Flutter because of the fact that it allows them
to really express themselves in this brand-driven design. So let me show you
Reflectly’s story. [VIDEO PLAYBACK] [MUSIC PLAYING] – Beautiful design was the
critical success factor for Reflectly. Reflectly is a journaling
app that we created to counteract the stress
that comes with social media and technology. Digital well-being is
important now more than ever. So our goal for this app
is to provide a safe space and break from the stress
that technology can bring. Therefore, this app must
be personalized, safe, and beautiful, so all
users can open up and feel they have a unique
relationship with Reflectly. – The beginnings of Reflectly
surely was very humble. We were a very small team
and only two engineers. However, we wanted to reach
users on both iOS and Android. So we built the first
version of Reflectly using a traditional
cross-platform framework. But given that Reflectly is all
about beautiful design and user experience, we felt
restricted in our ability to deliver a
consistent personalized design for both platforms. For example, frequently
shadows were cut off, and animation were
always sluggish. And so it became
clear to us that we needed to find a new solution. And luckily, we found Flutter. – And it just worked. So out of the box we got
an extreme amount of value we could then use, and we knew
we had to use in Reflectly. And that was a key
deciding moment. And from the first line of
Flutter code was written, we were done in only
2 and 1/2 months. That included some
large new features, like our entire premium
subscription implementation. Flutter paints every pixel
on the screen directly. So now we don’t have
to worry anymore about differences between
how iOS and Android render our content. Yet it still adapts to
the unique characteristics of each platform. We can keep a common
code base and still build iOS and Android-specific
UI where it’s appropriate. It was a revelation for
us that we’re actually able to move so fast while still
not compromising our visions. – So Flutter is great
because it gives you control every single
pixel on the screen. But it also allows you
to actually structure your code in a way that’s
maintainable and refactorable. For example, to create the
elegant and informative new [INAUDIBLE],, we used
the Hero widget. And because we were able
to nest basic widgets across the Flutter framework,
our initial build of the UI was quick and effective,
while still maintaining a great performance. – So we deployed the
app to millions of users all around the world,
and they loved it. – After we launched
Reflectly 2.0, one thing that made
us particularly happy was how well the
design was received. We thought it was
beautiful but it was great to hear that
from our users as well. – Overall, we’re very satisfied
with how Flutter is performing. It has enabled us to
build the beautiful UI that we envisioned. We’ve got a featured in
Apple’s New Apps We Love. It has cut our build
in time in half and we can release new
features simultaneously on Android and iOS. – And now with
Flutter for the web, we can deploy our
existing code base for Android, iOS, and the web. – With Flutter,
we’re able to deliver this beautiful experience
to millions of users. And month over month, we’re
seeing double-digit growth. [MUSIC PLAYING] [END PLAYBACK] MARTIN AGUINIS: Cool. [APPLAUSE] So at I/O a month ago, we
announced Flutter was already in 1.0, but we announced 1.5. And Flutter’s main
focus was mobile. But our vision statement
is to expand beyond phones. And we actually announced a
technical preview of Flutter for the web. And as you see in Reflectly’s
example, a lot of people are already playing
around with that. So you, today, can
go and actually build things on the web
using Flutter, which compiles Dart code to JavaScript. We’re also experimenting
with other places you can use letters, such as
desktop and other embedded form factors. And here’s one example, which
is New York Times’ KenKen Puzzle app. Now, the New York Times,
as you know famously for the crosswords
and other games, needed to build this so
that it runs everywhere. And they actually
built the whole thing using Flutter, which runs
on mobile, web, and desktop. And using that link behind
me, you can actually go to it and play with it right now. It’s also in our booth here,
if you want to check it out. Now I want to bring Matt
back on because I thought it’d be fun to take
his transportation app and actually put it on the web. So let’s bring that back on and
see if he’s ready to do this. Matt? There he is. [APPLAUSE] MATT SULLIVAN:
It’s gone to sleep. There we go. So doing live demos,
things can always go wrong. And then Martin said,
why did you come up and demo a technical preview? And I’m like, oh, that
sounds like really fun. Let’s see what happens. So Flutter for web is
in technical preview. And I’m going to undo my changes
here because what I have done is I’ve hacked on this
code a little bit, and I have ported it
to Flutter for web. So I’m going to do
some git stuff here. And you can say,
well, why do you have two different versions? Well, we’re in
technical preview. So we have a lot of things
implemented for the web, and there’s a couple of
things not quite there yet. I’ve taken out the
animations to start with. And I’ve also disabled
the internationalization for the moment
because we’re still working on getting the material
pieces of internationalization for those widgets in as well. But the rest of it
is pretty unchanged. So we don’t need
you running anymore. As you can see over
here, like the code is pretty much the same. I’ve tweaked a couple
of things but it’s still pretty much the same code base. So how do you actually get
this compiling and running on the web? Well, ultimately, you’re
going to use the Flutter tool. It’s going to do
everything for you. At the moment in
technical preview we have given people a web
server, web dev, and that will go through the whole
compilation process, and then start to serve– if I’m lucky– my
application locally. So at the moment,
it’s just going through the build process. What else are we going to need? Well, we’re going to
need a web browser. And what I’m going
to do here is I am going to switch on developer,
just so we have the console. And I also want to show this as
it would look like in a phone because I did no
optimization for landscape. It looks terrible. But it looks OK in portrait, so
we’re going to stick with that. So let’s take a look here. It looks like it’s still doing
a little bit of building. So it’s going on there. Maybe I should have
cached this beforehand. But because I was
doing it live, I thought I’d empty
all the caches. And there we go. So this is now built.
Essentially what you saw is the same app with
a couple of differences. You’ll see now that I
now have a web folder. And the web folder
has indexed out HTML. And I could do a
bunch of things here but, basically, all I’m
doing is I’m serving up the app from JavaScript. And then I have a new main. And all this is doing
is saying, let’s initialize the web
componentry and then serve the app as usual, so
the only two things I’ve had to add to get this to work. So moment of truth. Let’s go here, and we’re
going to go [INAUDIBLE].. 80.80, and fingers crossed. Still crossed. There we go. So here is the app. Remember, the animations
are switched off and I’ve replaced
it with an icon. But here is the app
running in the web. So I can tap here,
and you can see I have essentially the same styling. We see we have the shading. I haven’t changed anything here. I have my pop up,
which is smoother the second time around–
again, technical preview. And you notice I’ve
taken this out. I’m going to put this
back into offline mode just to quickly demonstrate
that this works. I’ll try it again at the end. So I’ll search for there,
and I chose this at random. And we’ll search for
Messe, and it just renders. So without any real
change in my code, I have a web app,
which behaves thusly. Now, you’re like, OK, well
that’s all well and good. You’re using cached data. Let’s see what happens
if you actually try to use the HTTP libraries
and the asynchronicity and everything else. Well, I wouldn’t try this if
I didn’t think it would work, so let’s switch off offline. And let’s go back here and
let’s change our start to– well, I came from the airport,
so let’s put in airport. There we go. So that has pulled everything
from the internet using the same code as we
did in the app, which I think is kind of cool. And then for the last thing,
let’s see if this works. There we go. And we have our route
and destinations. Can anyone spot the bug? It’s not– that
was two hours ago. Somebody kept this in UTC. We’re plus 2. I’ll fix that. I noticed that last
night and I’m like, I’m not going to
break everything now. So yeah, my app has bugs. So there we go. Very little work. I stripped out some of the
more complex pieces of it, but we are working
hard to get them in. Literally, you can
pull down master, and there will be fixes
in there on a daily basis. We’re working hard on it. So hopefully that’s
giving you a flavor for Flutter compiling
to JavaScript and running on the web. Thank you. [APPLAUSE] MARTIN AGUINIS: Cool. Thanks, Matt. I want to close with
something that you guys built with the community. So we recently finished a test
called Flutter Create, which challenged developers
all over the world to build apps with Flutter in
under five kilobytes of Dart code. Now most of you know
what five kilobytes is. It’s less than half a
second in an MP3 file. It’s absolutely very,
very minimal code. So when we launched
this, we were curious to see how
creative people can be. So I’m actually
going to show you a video we put together
that demonstrates a lot of the submissions
we’ve received in over 60 different countries
from this competition. [MUSIC PLAYING] [APPLAUSE] This was awesome. And here are some of the winning
apps from the competition. The piano one actually
code-labbed their entire entry before it finished, so you can
see how they wrote everything. I mean, all of these are
actually open source, so you can go to
Flutter.dev/create and check them all out. But besides just the
winners, this competition was really not just
for winning but it was to allow people to
experiment with Flutter and have fun with it. So we got some really cool
stories out of it too. Someone told me that
their submission turned into a full-time job. Someone else said that their
whole team asked for a week vacation just to work on it. So it was really cool to see
the impact that this had. So I want to thank
you for being here. We have a booth in Hall
A. Please come talk to us. We’ll be here all of
today and tomorrow. Again, I mentioned the
demos we did on stage. There’s the repo,
the link to it, so if you want to
check it out on GitHub. And our website is
Flutter.dev, and come find us. Thank you very much. [APPLAUSE]

Danny Hutson

Leave a Reply

Your email address will not be published. Required fields are marked *