Single Codebase, Two Apps with Flutter and Firebase (Google I/O ’17)

Single Codebase, Two Apps with Flutter and Firebase (Google I/O ’17)

EMILY FORTUNA: Good morning. I am Emily Fortuna. This is yet another
Emily, Emily Shack, and we are both software
engineers here at Google. We think Flutter’s
a fantastic way to easily develop
beautiful mobile apps, and we’d like to show
you how that’s done. So let’s say you’re a startup,
and you have the next amazing, world changing idea. You want to get your app out
to market as soon as possible. Throughout this talk,
we’ll be following one such hypothetical startup
in that very situation. The founders of our startup– they looked at the wide array
of chat apps available to them, and they felt like
there just need to be one more on the market. I mean, really, what
their lives were missing was the ability to
memeify moments of their lives. If we could take a
picture and put text superimposed in
impact style on top. Because it’s clearly
insufficient to be able to take a picture and
put text above it or below it. No, you’ve got to put
it image macro style, share it with your friends. That will truly elevate
the level of communication in the world. So, what we will see here–
let’s switch to the device screen– and we have our startup’s
flagship chat app, Memechat. What you see here, if you
want to be old fashioned and just send a text
message, you do that. It sends. And it’s the first time
you’re sending a message, you get a request– your Google
authentication credentials are requested, because you don’t
want anyone impersonating you when you’re sending memes. That is very important. And of course, talking to
yourself only gets you so far. So we have this running on
another device, an iOS device. And you can see it has
the same functionality, but it looks a
little bit different. It’s appropriate to the
device that it’s running on. So we got the nice silver
screen, a top bar for iOS. We’ve got the material
design app for Android. We have slightly
different fonts. And we have slightly
different behavior for the bottom of the scroll. We’ve got the end over
scroll glow for Android, and the end of scroll
bounce for Apple. But so far, everything I’ve
shown you is pretty standard. This is just a regular chat app. Where’s the secret sauce? Well. And we’re going to
hit the Image button. She’s going to take a
selfie with all of you in the background. Say, “Cheese!” And now we can add
our text for the meme. And there you have it. You can share it
with your friends. [APPLAUSE] So over the course of
this talk, would you believe that this
entire app is written with under 400 lines of code? With multiple views,
Firebase integration, Google sign-in
integration, everything. And we will be live
coding this very app. And you can see how
easy it is to get from nothing to a
beautiful Flutter app, just like you see here. So let’s jump back
to the slides. And so whether you’re a
startup with a harebrained idea or you just are a
developer that wants to be efficient with
your code or your time, Flutter is a [INAUDIBLE]
way to easily develop beautiful mobile apps. Our startup founders did some
research, some market research. And they found that the target
demographic for their meme chat app were iOS users. So, they heard about this
cool Flutter technology. They’re like, eh,
let’s check it out. They started coding. It seemed like a pretty nice way
to easily start developing apps and get their app
up and running. Good news, everyone! We have a venture
capitalist who’s interested in
funding our startup. The hitch, though,
is our VC, is– aside from being a cat– an Android user. And we want our VC to be
able to dog food our app as soon as possible. But this means that our
workload has just doubled. Because now we have to write
an iOS app, and an Android app, and we’re just a small startup. We want to spend time on
adding cool new meme features. We don’t want to spend
time writing our app twice. But fortunately, because we
are already writing in Flutter, this is an easily
solvable problem and it’s not doubling
our workload. EMILY SHACK: So
Flutter allows you to write your code once
and have a natural feeling app on both Android and iOS. All in all, Flutter’s
development experience is fast and easy, letting
you spend less time developing more cool
features for your app. Flutter also has an
incredible development process with hot reload, which lets
you update your code on the fly without having to
restart your entire app. This means you can get up
and running from nothing extremely quickly, and
also lets you literally see your app come to
life, piece by piece. And of course, we
integrate with Firebase. Now, we both know we are
on the Firebase stage. You probably have already heard
about Firebase here at I/O. But for anyone who
hasn’t, Firebase is a mobile platform
that helps you quickly develop high quality apps. With our Firebase plugin,
you can painlessly integrate with a remote database
that uses real time sync, you can get usage analytics,
and you can easily scale up as needed. We’re going to get into the
specifics of how we do this a little bit later
on in the talk. But for now, let’s take
a look at how easy it is to get started writing
your very first Flutter app. EMILY FORTUNA: So
getting your system ready to develop Flutter
is actually really easy. Just clone the Git
repository, and then you add Flutter your path. Once that’s set up, there’s
a really cool tool called Flutter Doctor that you run. And it will check your
system for dependencies to see if there are any
remaining dependencies you need to install. Examples of this are if
you’re doing iOS development, you want to install
developer tools, or you want make sure that
you have Java installed for Android development. Of course, you don’t have to
have both of these installed, but you probably
want to have one, because you are developing
mobile app in some capacity. All right, let’s jump
over to the code. The code screen, plus our app. Yes, there we go. So we have IntelliJ
up and running. And this is where we’re going
to be doing our development. IntelliJ has really nice
plugins for Flutter and Dart. It gives you auto completion,
nice debugging support, and you can run your
devices from IntelliJ. So if you’re doing
cross-platform development, gone are the days where you need
to have Xcode up and running, and Android Studio, and
switch between them. Now you can make your
changes in IntelliJ and just run either device,
or both, from IntelliJ. So we took the
liberty of writing out the skeleton of our app,
because no one wants to watch us type class definitions. That’s boring. But I’ll give you a little
tour of how this is set up. So first we have our main
method, our main function. That calls MyApp, which
is the top level widget it for our app. MyApp then has a
chat screen, which is going to be
controlling the view and what’s displayed–
your chat history, taking chats, all those things. Chat screens has
a state, which– that’s the real
meat and potatoes where all the interesting
stuff is going to be happening. ChatUser and ChatMessage
are two glorified structs. They basically are holding
the actual information that we want to store
for the chat message. So the texts you’re sending, in
the case of who’s sending it, what their profile picture
looks like, all those things those are in there. ChatMessageListItem
and ChatMessageContent are the last two widgets
that are controlling how they display on your screen. So ChatMessageContent
says, that message content that you want
to send, how should it display on the screen,
how big should it be? And the ChatMessageListItem
holds a chat message content, and also controls
how to display, say, your profile picture,
and your name, all that laid out on the screen. So you see the name widget
in a couple places here. What are widgets? Widgets, your
entire app is going to be made out of widgets. Your app is one
huge widget, which has sub-widgets, which has
sub-widgets, all the way down. If you’re familiar
with Reacts, widgets are just like components. But if you’re not familiar
with Reacts, don’t worry. Flutter is a functional
reactive framework. And the key idea is you’re
using your model data to describe templates
for how your view should look at all sorts of
different situations. The framework itself
is the one that controls how to change
between these different views. So it’s a slightly
different paradigm for how you think
about programming UIs. And so rather than your more
typical model view controller set up, where you have
a controller that’s running back and forth and
syncing these two things, you’ve got your
model data describing how your view should look. This means that in
practice, it gives you are really nice things
like hot reload, which we’ll demonstrate. But under the covers,
while the developer doesn’t have to
worry about this, this means that the
widgets that are created are immutable and ephemeral. And again, while you
don’t have to worry about how to change a view
with an immutable widget, it helps save the developer from
avoiding a lot of common bugs. Like if you have persistent,
long-running UI objects, they could get into inconsistent
states, and it’s hard to debug. This way, it makes programming
dynamic UIs much easier. Your code ends up being
very modular, reusable. And like I said, it gives
you awesome features like hot reload,
because you could just swap out that little
widget for the new piece. All right. I’ve talked a lot. Emily’s been very
patiently waiting for me. Let’s actually
dive into the code. So we’re going to open up MyApp. And inside the build
method, you see, we have a material app,
which is a widget itself, and material app
has a container, which is, incidentally,
also a widget. So right now, we have our
app running on the screen. It’s not very exciting looking. It’s black because we
have a black container. To demonstrate hot
reload, Emily’s going to update
that black to white. Because if you
remember from our demo, we did not have a
black chat screen. We’ll hit the Hot Reload
button at the top. And you’ll see very
quickly, didn’t have to do a full rebuild. It updated the app. [APPLAUSE] OK. But we can use hot reload to
do much more interesting things that change the colors
of your widgets. So let’s change container
to be our chat screen, and we’ll update again. And once it’s
updated, you’ll see we have a menu bar at the top so
we know what app we’re running. And then we’ve got a
little space in the middle to have our chat history. So let’s dive into actually
being able to send messages. We’re going to do that
inside Chat Screen state. And there’s the
Build Text Composer. Inside that, we’re going
to add a text field that will accept text input. And as you can see,
Emily’s putting this inside of a Flexible. Flexible is another
widget that in this case is controlling the layout. So it’s saying, hey,
take this text field. And I want it to expand to take
all of the horizontal space that’s available in the layout. Text field is taking a
couple of name parameters you see on submitted
and on changed. These are going to
be callbacks that are called when the text
is, incidentally, submitted and changed. Now, we’ve been
looking at this code, it looks kind of C style-esque. But we’ve got name parameters
and first name functions. You may be wondering what
are we programming in? And the answer is Dart. Dart is a modern, concise
dynamic programming language. But it has a lot of
really cool features that allow you to
develop your code quickly without sacrificing
quality and safety. So we have a
statically typed mode so you could be sure that your
app is doing what you want. And it has a lot of cool
features much more interesting the name parameters,
one of which is the nice asynchronous
support that we’ll be exploring later in the talk. All right. So now when Emily
hits Hot Reload, we should see the text screen
come down at the bottom. And she should be able
to send a message. Nothing happens! That’s because we haven’t
actually implemented our handle submitted function. So let’s go jump to
the handle submitted function, which is currently
nothing, and we’ll update that. So first, we will
clear our text message so that we can add more
messages in the future. And then we’re just going
to call Add Message, which adds our text to
the list of messages that we’ll be displaying
in our history. Now when we hit Hot
Reload, which I will note– so we’re doing more
interesting things. We’re actually changing some
functionality in this case. We hit Send. It’s gone forever! No, actually not. We just haven’t
updated our view yet. So we restore the
message, but we haven’t told the view to update. So if you’re like
me and you like to use your chat app
for writing novels, it’s kind of disappointing,
because you can’t see anything right now. But let’s go update the view
tell it to redraw that piece. So in here, we’re saying
when that message is added, we’re telling the view,
hey, my state has changed. You should go
redraw this widget. And so we’re doing that
by calling set state. And then we add that message
to our list of messages. So now when we
hit Hot Reload, we should be able to
see our messages. And you can use your chat app
as a novel writing app as well. All right. We’re good. [APPLAUSE] So, users, man. Our startup did some
testing because they were really excited,
but they were not impressed with this app. They were complaining it looked
the same on every platform. And they weren’t too thrilled
about talking to themselves. So let’s make a couple changes
to make it look prettier. So we’ll go up to the top
and we’ll add theming. This is going to
allow us to look a little more specific to the
platform that were running on. So a theme is another
top level widget that controls the behavior
of its child widgets. And in this case
we’re saying, what platform are we running on? And so now when
we hit Hot Reload, you can see the
message bar colors updating with silver for iOS. We’ve got our nice
material style for Android. And then we have the scrolling
behavior that you would expect, and so on. There you go. And so why do I keep harping
on natural look and feel? Well, the interesting
thing about Flutter is Flutter is drawing every
single pixel to screen. So there are no crazy
native OEM widgets that are going to interfere
with your app and interact in weird ways. There’s no web view
you have to deal with. Flutter has spent a lot of
time in making the view feel appropriate to the user. And this gives a lot of
really nice features. So if you’re trying to debug,
you can step through your code and look all the way in, and
also customize things as needed if the look is not
quite what you want. Oh, and we need to
add some animation to make this look
a little prettier. So we add our animation
controller, reinstantiate it. And we’re going to pass
in a duration, which basically tells how long
we’re adding our animation. In this case, we’re
making a little bit longer so that you can see
it on the video screen. So one more thing to do. When these messages
are being built, we are going to create
the animation that will then build this into view. So we do that by creating
this ease out animation. It will ease it out of
the bottom into the view. And then its child is going to
be the original chat message item object. There’s a lot of really
nice animation support. There’s flinging. They’ve got lots of things
to make it feel natural. And it is very customizable. So once we hit Hot
Reload, we should be able to send a message,
and it will animate in. No! What happened? So we have a bug in our code. We can look at our console,
which– there we go. There’s our stack trace. We see that chat message
has no instance getter animationController. In this case, it’s
supposed to be a capital C for
animationController, camelcase. And I want to also
kind of point out, it’s cool that the rest
of your app that’s running is still showing. It’s just the part that
when we hit that animation, it showed you the
red screen of death. So Emily’s updated the C
for animationController. We can hit Hot Reload this time. And now when she
sends a message, you should see the messages
beautifully glide into view. Look at it go. [APPLAUSE] All right. So this is good, but we’re
still talking to ourselves. So I’m going to hop over
on the computer green, don the hat of coding plus
two, and let Emily talk you through how to add
some plugins and let you do these cool meme features
that I know you are all dying to learn about how to do. EMILY SHACK: So we have
our basic chat app, but we really want to
extend its functionality to add things like communication
with multiple people. We want to add things that
make it look a little bit more official, maybe Google sign-in. So in order to do that, we’re
going to use us some plugins. And Flutter makes
it really, really easy to add plugins to our app. So in order to do
that, we’re going to take a look at our
pubSpec.yaml file. Now that’s a file that is
inside your Flutter project. And that’s where all of your
dependencies are declared. As you can see, we’ve
got Flutter there. That’s going to be in
every Flutter project. But we’re also going to
use five different plugins. We’re using Image Picker,
Google Sign In, Firebase Auth, Firebase Database, and the Cloud
Storage for Firebase plugin. So each of these plugins
does something a little bit different for our app. And we’re going to get into what
all of those functionalities are a little bit later on. But suffice it to say
that for now, this is the file that you have to
declare your dependencies in. And that takes care of
pulling in all of that code so you can reference it
in the body of your app just like any
other Flutter code. So let’s go back to
our main.dart function. The first thing that we’re
going to add is Google Sign In. Google Sign In is
going to enable us to go through an
authorization workflow with your Google account. So here we’ve added a call
to GoogleSignIn.SignIn. What that’s doing is
making sure that we go through that work flow. Once that is
complete, we’re going to incorporate the Google
user name and profile photo from the Google sign in
information in our message. Then, once we add our message
with that information, we have one more step, which
is that we have to have a way to display that profile photo. Right now in our
ChatMessageListContent class, we’re using the circle
avatar widget in order to display our profile photo. We’re going to switch that out
and use the Google user circle avatar widget, which comes
for free with the Google sign in plugin. And that’s just going to make it
easy to incorporate that image from our Google profile. So now, once we hit
Hot Reload, we’re going to go through
that workflow. And just a disclaimer. We are already logged in
on both of these devices, so we won’t see
that workflow now. But you did see it at the
beginning of the talk. And you can see that we don’t
have to sign in more than once. And once we’re
signed in, now we’re seeing our name and
profile picture. And we can really tell
who’s sending that message. Unfortunately, this information
isn’t super helpful yet, because we’re still only
talking to ourselves. So let’s add some more people to
the conversation with Firebase Database. To use the Firebase
Database plugin, we’re going to have
to add two components. We’re going to have to
make sure that we’re writing our messages to
the Firebase Database, and we’re going to
have to make sure that we’re reading in our
messages from the database. The database is going
to make it so that we can store our messages
on a remote database rather than locally
on the device so that anyone who’s
authenticated to that database can read in those messages
and write messages to it, and everyone can see
that message list. Here you can see we’re
referencing Firebase Auth. That’s where the Firebase
Auth plugin comes into play. That’s just making sure
that we’re authenticated to our database, so
that not just anybody can see those messages. Once we’re signed in, now
we’re going to add a listener. That’s that messages reference
.OnChildAdded.listen call. What that’s doing is
while our app is running, its checking the
Firebase Database synchronously to
make sure that all of the messages in the database
are also reflected in our app. When we see any new
messages pop up, we’re going to then add
them to our message list. And now you can see we
have restarted our app. We’ve seen the whole database
populating in our app. And that restart, by the way,
was a hot restart, rather than a full app restart, which is
sort of similar to hot reload, but just making sure
that we’re pulling in all of those messages
from the Firebase Database as though we were just
starting up our app. So we have one more
step, which is to push our messages to the database. We’re doing that in a simple
MessagesReference.push call. That’s how we’re referencing
our Firebase instance. So now if we hot
reload, then we should be able to send
messages back and forth. And as you can see, almost
instantaneously, those messages appear on both devices. [APPLAUSE] We felt pretty
good about it, too. We have a working chat app. We can send messages. We can talk to each other. We’re feeling great
at this point. We’re getting really
close to our goal. Unfortunately, we
still haven’t quite reached the status
quo of chat apps, because we’re still
only sending text. What we’d really like to do
is be able to send images. To do that, we’re going to use
the Image Picker and Storage plugins. The first thing that
we’re going to do is add a button to
make sure that we are referencing those plugins
when we want to add a photo. So that button is going
to be an icon button that looks like a little photo. And when the user
presses it, it’s going to kick off
that photo workflow. When we go into that
workflow, that’s going to incorporate
Image Picker in order to select an image,
either from the device camera itself by taking an image,
or from the photo gallery. That image is then
going to be sent to storage, where we get back
a download URL to display the image in our app. So let’s go ahead and write
that Handle Photo Button Pressed function. Because right now, that
photo button we’re seeing isn’t actually doing anything. The Handle Photo Button Pressed
function is asynchronous. Now, we said we were
going to get back to this later in this
talk, and now is the time. Asynchronous functions are
very, very cool in Dart. They’re marked by
that Async keyword. And they’re always
going to return a future, which is basically
the same thing as a promise. And the idea is
that this function is going to return immediately. But sometime in the future,
its actual return value is going to get there. So asynchronous functions
can use the Await keyword. As you can see here, we have
three different calls to Await. And that’s a way of treating
another asynchronous function as though it were synchronous. So we have a single
line of code. We’re not passing
in any callbacks. We don’t have any nested code. And were able to get the
results of that future before moving on to the
next line of our code. So this function is really,
really easy to read. We don’t have a
bunch of nested code where we’re not sure when we’re
getting back that future value. Now we’ve called our image
picker and our storage plugin code. And now let’s see what happens
when we try and send our image. This time, we’re going to select
an image rather than taking one from the device camera. Pretty good! [APPLAUSE] So we have a chat app that can
send text and can send images, and we get really
excited about this. So we go to our VC. Unfortunately, our VC
is not very impressed. They say, you haven’t innovated
at all in the chat space. This is exactly what we’ve
seen before in other chat apps. How can we make this better? Our VC threatens to pull funding
unless we can pull it together in the next hour to come up
with a special innovation. This is where our memeification
is going to come into play. How do we memeify our app? It’s really just going to
be a few lines of code, if you can believe it. We’re going to add something
else to our Handle Photo Button Pressed function, which is
a call to the Navigator. Now, the Navigator is a
handy widget in Flutter that handles switching
off between views. So we have multiple
screens in our app, and we don’t want
to have to write ourselves that back button or
a close button of a dialog. So we’re going to let the
Navigator handle that. We’re just going to push a
new page onto the screen. It’s going to be a dialog
in this case, a full screen dialog. It’s going to be called
the Type Meme Route. That is just another widget. We have written it
before the talk. It’s about 90 lines of code. And you’ll be able to check
it out later on our GitHub if you’re interested. But it’s basically
just another widget that’s going to let us
write text on top of images. So we’re pushing that
widget onto the Navigator, and then we’re
getting back from it our text overlay
that we’re going to write on top of our memes. Then we’re going to incorporate
that into our message, so that when we see our
message in our messages list, it has that text
overlay written on top. So let’s take a
look at Memechat. I think the hat of
coding might be getting a little bit in the way. EMILY FORTUNA: Oh, sorry. EMILY SHACK: And now
once we send that meme, it’s going to appear
on both devices. There it goes. And we have memeified our life. [APPLAUSE] And finally, just to make
sure we didn’t cheat anywhere, we still can take pictures as
well with our device camera. So let’s see if we can
go ahead and do that. We’re going to take one
more audience selfie, just to prove we’re legit. So everyone smile. All right. Now we’ve sent that meme. [APPLAUSE] So let’s take this
back to our VC. We’re feeling really, really
good about it this time. I don’t know about
you, but I think our VC is going to like it. So let’s go back to the slides,
just to see how our VC reacts. [APPLAUSE] We have a great
success on our hands. We get to take the month off. We get millions more dollars
of funding to develop the latest, greatest chat app. We’re feeling great. And we used Flutter
to get there. So how did we do that? Using Flutter, we were
able to get a natural look and feel for both
iOS and Android, just by using one code base. That gave us more time to
develop our extra cool meme feature. We also used Hot
Reload the entire time. If you noticed, we did not
fully restart our app once during this talk. That’s pretty cool. Also, Memechat was
pretty simple to write. It took less than 400 lines. That includes everything
we didn’t get to show you and everything we
did get to show you. So we got a fully
functioning chat app. And I haven’t seen that done
in under 400 lines before. We also integrated Firebase
and a few other great plugins to let our app
talk to the world. Now, Flutter is in alpha. And there are real, shipped
apps out there in the wild. So shown here are two
great examples of Flutter apps, both internally
and external to Google on Android and iOS. If you’d like to learn
more about Flutter, you can visit our
website at That’ll get you
everything you need to know about Flutter,
documentation, getting up and running. We also have two codelabs
here on campus at Google I/O, so we encourage you to
participate in those. Those are basically
going to create Memechat without the memes,
from start to finish, everything we didn’t
get to show you. And those will be available
after I/O on Google’s codelab website as well. Finally, there was
another talk on Flutter here at I/O. Unfortunately, it
happened a couple hours ago. So if you missed
that, do not worry. It’ll be on YouTube
in a couple days, and we really encourage
you to check that out. That’s about Flutter from
the perspective of a designer developer workflow. Now, if you want to delve into
our code a little bit more than we were able
to show you today, you can visit our GitHub
at the following link. And don’t worry. This link will be
on the next slide. Thank you so much. [APPLAUSE] We hope that you enjoy
Flutter as much as we do, and that you find a great use
for it in your everyday work. We will be in the Firebase
sandbox following our talk. So if any of you
have questions for us or want to chat about
anything Flutter related, we would love to meet you
there and talk about how Flutter can work for you. So please, please,
come talk to us. We’d love to meet you. EMILY FORTUNA:
Thank you so much. EMILY SHACK: Thank you. [APPLAUSE] [MUSIC PLAYING]

77 thoughts on “Single Codebase, Two Apps with Flutter and Firebase (Google I/O ’17)

  1. Really interesting project, but with so many languages and frameworks that support Android/ iOS developer, it's really hard to chose where to start as begginer Android developer: Java, Kotlin, React Native, Xamarin and now Dart..

  2. This project has a great potential but it's too hard to choose between react native and flutter. I hope both projects will be soon "ready for production". When I tested react-native, some basic components were missing, I guess it's the same for flutter. Anyway, another battle between Google and Facebook.

  3. Services like Firebase make me worried. Look what happened with Parse! What if Google decides they want to get rid of it one day? There are some good alternatives around that you can set up and host.

  4. Looks very nice – May try converting one of my simple apps today.

  5. Instead of getting behind the react-native project which is way more mature and has a huge following, Google had to pull another lame one and do a me-too project just cuz they can because they're so huge. What exactly does flutter offer that RN doesn't? It's not like Google doesn't like JS and with ES6 it is even more attractive. Then Google has an awesome JS implementation and Closure. Despite all this, they fucking go and start this Dart/Flutter bullshit just to stroke their egos. IO few years ago was about google glass and GoLang now Dart is the fad of the month, a year later, Google would have moved on to some other lame wanna be project that everyone including google will forget by the nest I/O … this is ADHD behaviour at an organizational level is really lame and disappointing! 🙁 shut up and support RN you know flutter is gonna be in the dustbin by I/O 18

  6. This is the first cross platform development system I'm excited about and it's come on along way over the past couple of years. I wonder how long it will be before it reaches Beta stage.

  7. I've an windows xp machine which cannot be upgraded as I've other licensed software.

    Does flutter work on windows xp?

  8. My money is on Dart / Flutter for the future of UI apps. Only gap right now is targeting desktop apps and from what I see there is no technical limitations to tooling Dart /Flutter to work there also. Just need to point resources to tightening and refactoring Dartium and maybe bridging with projects like Electron.

  9. is it possible to port over an already existing android app into the flutter dev environment or do i need to recreate it in flutter?

  10. Every tool/framework so far that promises "cross platform" development has been a disappointment. Resource hogs, doesn't really feel native, difficult if not impossible to actually use platform specific features, doesn't play well with native tools / frameworks.

    In my experience if you care about your customers and want a quality first class application then the only way is to use proper native tools. Your customers will feel the difference.

  11. I for one find it refreshing to not have to learn an entire stack of languages to lay out an UI (no HTML, no CSS, no XAML), looking forward to trying it out

  12. damn it google, flutter started 2 years ago and it just looks like java swing for UI, yuck , dump android, build a new platform with flutter as primary framework

  13. Okay, i understand that this is a very clean framework. But, I'm sticking to RN. I like the level of UI control RN offers and more over, i don't need another programming language 🙂

  14. I see a notification from @pouip zxvzxc that they have replied to my message. I click on it and it plays the video for me. I can't find the comment despite looking for it up and down the expanded comments list. If it was deleted by user, why do I still have notification for it? If it still has notification in my notification drop down, why doesn't it tell me it has been deleted?

    These are the number of f*cks google product developers give about User Experience! (hint: 0) … This is why Google will NEVER beat any serious effort in language and UI design. This is why Wave failed. This is why Glass failed. This is why no one uses Google Plus.

    Most google activities are essentially self absorbed masturbation to high technology. They are far removed from the concerns of the actual users. This is just one example of a terrible culture of shining the chrome and not giving a shit about the end user.

    Stick to search. You're good at it.

  15. Looks promising but there's no way it'll succeed if it only supports Dart. Please please please add support for Kotlin!

  16. I have seen almost 15+ Google IO sessions and in none of them have the audience been this enthusiastic but it was a great demo 😉

  17. What happened to the other session at IO? Apparently about Flutter and designers – it was mentioned in this session.

  18. it would be great not to check style at runtime but rather compile two different apps with two different targets from the same code-base

  19. Interesting idea overall. But, actually, this would look much more readable in Kotlin than Dart. By writing a simple DSL (similar to Anko), you could get rid of large amount of boilerplate that's present in Dart's code. So what's the point of introducing Dart here?

  20. Hey Google or Firebase. Please do some Flutter documentation for Firebase like you have for iOS and Android?! If there's something out there already please let me know.

  21. Super excited to dust off the Dart skills. I thought that horse was dead ?
    Also great talk. Loved the quirky insiders like "all the way down" 😀

  22. Dart? Damn still another language to learn. Why can't they use Kotlin, C#, Java, or even Swift? So many languages to learn…

  23. Now, you want us to learn Dart? Why don't u use common languages like C# , Java or TypeScript? Go, Kotlin and now Dart!!! Dart??? Are you serious? Is it productive for us to learn a new programming language every 1 month?

  24. Far too complicated. Theres only linking to google products shown like google sign in and firebase. What about other http requests?we would have to make widgets for each? all techs shown are already here long time back…hot reloading, auth plugins, animation, native views. Why would one shift from react native to flutter?

  25. Flutter installation simply isn't working with windows 7..I tried cloning beta branch and followed instructions on but every time it throws the same exception, tried various suggestions on github issues still the sdk configuration doesn't work. Same issue is with master branch, can you release some document or some configuration to resolve known issues with sdk installation.

  26. I have been using it and my company is now wanting to develop all future apps in flutter thanks to the record dev time!

  27. As a RN developer, I'm super excited for the potential of flutter. But I'm sorry, this whole talk was useless in my opinion.

  28. It's really good concept to develop Mobo developers….. I'm really exciting about flutter and dart also….I think it's a first platform where we can easily write our codes in flutter for both android and iOS….so i really thankful from Google to make us easier

  29. Great talk, but this sounds almost exactly like React Native, Metro Bundler, Hot Reload, Functional Component, yada yada thingy we already see in the wild and works.

  30. Hi All. Question about Flutter: can I create non web-based applications? I my case clients using our App will be disconnected to Internet so the database we will use must be installed on the Device no matter if it is Tablet or Phone. Thanks for clarification.

  31. Can someone please explain the second line after the git clone command ? What do I need to do with $PATH in Linux ?

  32. I have tested intellij with flutter and it's ok with an android emulator but I can't find a way to try the app in an IOs emulator, is it possible with a pluging or something else ?

  33. Now get your hands dirty and grab the source code!
    It is available from github:

  34. in case anyone would like to follow while having the whole code ,,, this link is in the end of the video (should been in the description too but meh ;p)

Leave a Reply

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