[MUSIC PLAYING]
ABEL MENGISTU: What up, Nairobi?
How we feeling?
ALEX GREAVES: Hi.
I'm Alex.
ABEL MENGISTU: I'm Abel.
ALEX GREAVES: And we're the co-founders of FlutterFlow.
We're so excited to be back at a Flutter event.
ABEL MENGISTU: And for me personally, I
grew up just next door in Addis Ababa, Ethiopia,
and to be presenting here at Flutter's conference,
live in Nairobi, is so special.
So a huge thank you to the Flutter team for having us.
I hope you're ready.
We have some exciting stuff to show you.
So with FlutterFlow, what you see is what you code.
FlutterFlow is an online platform
that helps you build and deploy Flutter apps faster than ever
before.
It comes pre-integrated with Firebase, Google Maps,
RESTful APIs, and more.
We will show you what we mean.
We're going to build a very simple two-page application
live, using the NASA APIs, and Alex will explain
what's going on as I build.
ALEX GREAVES: All right.
So we're going to get set up here.
And as you can see, we've already
built the UI for one of our pages.
And you can see the layout over here
on the left hand side in the widget tree.
But right now this is just UI, and we
want to connect this to some real, live data.
And that's going to come from the NASA Astronomy
Picture of the Day API, which you
can see we've already configured here, along with the NASA Image
Search API.
And we've also predefined some outputs from our API responses.
So going back to the UI Builder, the first thing we need to do
is add a backend query to our page.
And that's going to be an API call
and specifically from the NASA Picture of the Day API.
Cool.
So now all we need to do is set various widgets from our data
in our response.
So Abel is going to set the title, date, description,
and background image on this page.
And the cool thing about FlutterFlow
is that, as we're making these changes,
we're actually producing clean Flutter code, which
you can always view or export.
All right.
So now, we're just going to set the background
image of this container.
Right now, it's an asset.
But we're going to make it a network,
and we'll make it come from the URL of the response.
Sweet.
ABEL MENGISTU: That's it.
ALEX GREAVES: So now we're down to check it out.
So this is the current state of our app before our changes,
and we're just going to hot restart here.
And, yeah, what we have here is a live Flutter debug session
hosted in FlutterFlow.
ABEL MENGISTU: So while it's loading here, quick fun fact,
there are over 200 million lines of code
exported to GitHub straight from FlutterFlow.
[APPLAUSE]
And there you have it.
ALEX GREAVES: And there we have it, the Pillars of Creation.
[APPLAUSE]
ABEL MENGISTU: Cool.
ALEX GREAVES: All right.
So back in our UI Builder, it's time
to build our second page, which is
going to be a search page using the NASA Image Search API.
So we'll start by copying over the content of our first page,
and then just removing all the stuff
that we don't really need.
Next, we'll add a nifty little search bar
from one of many prebuilt FlutterFlow templates.
And let's actually add a little gradient here just for fun.
Nice, nice.
OK.
Next we'll add a staggered view, which
is going to display our images from the API
in a nice cool layout.
And then from there, we'll add an image
which will serve as our template image for our images.
And we'll stylize this a little bit,
and then we'll just add a quick little animation,
little fade in, just to make it pop.
There we go.
Now we need to add a backend query to our staggered view,
and this time it will come from the NASA Image Search API.
But this time we need to set a parameter, which
is the search term.
So in FlutterFlow, you can set values from a variable.
And in this case, we'll set the variable
from the Text Fields value.
In this case, this text field, what we've done here
is actually configured it so that it
updates the page on every time the user types,
but with a one second delay, so it's not
on every single keystroke.
Next, Abel is going to generate the children
of this staggered view dynamically
from the image URL's response, which we can see here.
And now we just need to set the image URL of this
from its respective item in the results.
Nice.
So we're ready to check out our app.
So we can go back here and hot restart.
ABEL MENGISTU: Cool.
Another fun fact while this is loading,
there have been over 5,000 apps deployed to the App Store
and Play Store, thanks to our integration with Codemagic,
so shout out to Codemagic, too.
ALEX GREAVES: Shout out to Codemagic.
[APPLAUSE]
All right.
So we're ready to go to our search page,
and let's search for something cool
and visual like a supernova.
And there you have it.
[APPLAUSE]
So just like that, we get to witness
the second most powerful force of nature
in the known universe, after my grandma.
[LAUGHTER]
So back in the UI Builder, you'll
notice that our first page is actually just in English.
But often, we want to serve an international audience.
So we'll go to our Languages tab,
and we'll add a few different languages.
So we'll start with English because that's
what it's based in, but of course, we have to add Swahili.
[APPLAUSE]
And Abel's going to add a few different languages as well.
ABEL MENGISTU: OK.
Let's do one more.
ALEX GREAVES: Yeah.
ABEL MENGISTU: All right.
ALEX GREAVES: All right.
So we'll set our base language, which is English,
and then we'll hit the Google Translate button, which
will use the Google Translate API to automatically translate
all of the text within our application
in just a few seconds.
Hopefully, just a few seconds.
[LAUGHTER]
And so we can see our translations here and obviously
modify them to our liking later on.
So now back in the UI Builder, let's see
what it looks like in some different languages.
ABEL MENGISTU: Hey, let's try Hindi here.
ALEX GREAVES: We got Hindi.
ABEL MENGISTU: Let's try Swahili.
ALEX GREAVES: Swahili.
And then, yeah, we can see it in Arabic as well.
And you'll notice that we use Flutter's built-in capabilities
to render this app in the appropriate way for a right
to left language.
ABEL MENGISTU: Cool.
[APPLAUSE]
At this point, now if we wanted to,
it's very easy to go here in FlutterFlow
and just go to Mobile Deployment and just
ship it to the App Store or Play Store,
straight from here or by Publish.
So that's our demo.
[APPLAUSE]
ALEX GREAVES: Thank you.
ABEL MENGISTU: Hope you enjoyed it.
So everything you saw here today was built completely
with Flutter.
It's widgets all the way down.
That made it super easy for us to launch the desktop app
that you saw here, even though we started with online only
at first.
We want to also mention before we leave,
in case you didn't know, all of our premium
features in FlutterFlow are free for students and educators.
[APPLAUSE]
Yes.
All you need is your email address
from your educational institution,
and you're good to go.
Go to flutterflow.io.
Thank you so much.
ALEX GREAVES: Thank you.
[MUSIC PLAYING]