Hi everyone, my name is Khanh,
I'm a new Developer Relations Engineer on the Dart and Flutter team.
Welcome to the first episode of
♪ [music] ♪
So you might be wondering, what is this "Learning to fly" series?
Well, it's a vlog series where you can follow along with me
on my journey learning to fly with Flutter
as I try to build out a Dash Fan Club application.
More info on that in a little bit,
but first, let me give you a little bit more information about myself.
I was drawn to Flutter because it looked like a fun way
to build beautiful UIs across platforms,
but I don't actually have any existing Flutter or Dart experience.
So my goal with this project
is to learn how to build cool things with Flutter.
I do have a coding background primarly in web development,
but, again, not with Flutter or Dart.
So probably that's similar to many of you who are watching this video
and are also just getting started with Flutter.
This is a really great opportunity
because, one, I get to learn Flutter alongside all of you,
and two, as a part of the Dart and Flutter team here at Google
I'll get to advocate for you and your experience.
So on top of that, many of my teammates
many of whom you already met on this channel
already have an amazing amount of Flutter experience,
which means that I can always ask them for help
and share it with you in these videos.
So, what is this Dash Fan Club app?
A lot of celebrities these days have fan clubs and dedicated apps.
A celebrity who's near and dear to our hearts, Dash,
does have a group of dedicated fans,
but no app.
I've decided for my first big Flutter app
it will be an app dedicated to Dash's adoring fans.
So individual features for this app haven't been hammered down yet,
so if you have any cool ideas for me, drop in the comments.
Ultimately the goal is that in each episode
we'll walk through my process for building out a specific feature.
In short, what better way to learn Flutter
than by building an app with it?
Let's talk about my dev enviroment.
So some of you all noticed on other videos
that the team is split between VS Code and Android Studio.
In my case I'll be using VS Code.
This is primarily because I have more recent experience with VS Code,
the last time that I used Android Studio
I was probably in my freshman year of college,
so I'm probably a little bit out of date on that.
As far as plugins go, I have the Dart and Flutter plugins
if you have one that you love, let me know.
And of course, dark mode is a must.
In terms of devices that I have for testing,
I have an iPhone as my personal phone
and a Pixel as my work phone.
So you can see why I'm such a big fan of Flutter.
So let's jump into the app skeleton
that I've built out for this app.
We'll go more in dept in future episodes,
but for this inaugural episode
I just want to build out a basic structure for the application.
I sat down with my iPad and drew this work of art for you on iMock-Up here.
And then this is the actual coded version of the app.
So you can see that I set a light blue color
to somewhat match the Dash colors.
For our next episode, we'll go ahead and set up a Dash specific theme.
You can also see I populated my home screen with a cute photo of Dash
that I generated using the Dashatar app,
and I also added a must-have menu bar in the top left corner,
with a drawer that's yet to be populated.
And also at the bottom,
I have the bottom navigation bar with some placeholder icons.
Also, public service announcement:
did you all know that there's in fact a Dash icon that is in existence?
It's available as a part of the icons class,
it's called
In terms of my experience learning Flutter so far,
I really like that it's fun to write.
If I wanted a particular UI element, I want to Google search something like
"bottom navigation bar Flutter",
and got the exact docs that I wanted.
The widget nesting, however, I realized is harder to read at a glance
and I'll have to go back
to break things down into smaller widgets and components.
A lot of my learning thus far has come from...
surprise: googling things.
So I was able to create a custom icon for my app
by using the
but one of the issues I ran into was:
why didn't my bottom navigation bar labels take effect?
So I had an
set the color and everything,
but it wasn't taking effect.
So after a Google search,
turns out I needed to use
and set that value to
In preparation for our next episode I was thinking,
beyond just setting the color for the top bar,
what's the best way to build a Dash theme?
I'm not sure, but I think I know someone who might.
Hey, Fitz, can you help me out with this?
Oh, hi, Khanh!
I heard you had a question, what was your question again?
I missed it, I was working on something.
What do you got for me?
Oh yeah, sure thing.
So, Fitz, thanks for joining me by the way,
I have a question about themes
and how I would set up a theme for my, you know, Dash Fan Club app.
So the idea is, I want to set up a theme that is truly reflective of Dash,
and, you know, her personality,
so beyond just setting the color for the top bar like I have right now,
what's the best way to build out a theme for that?
Well, I think a Dash theme is awesome,
and Dash should definitely have her own app theme,
it should be like default into a material app, right?
You could just say, like
-That would be great. -That would be great.
We need to add that to our list of things to do.
Oh yes, absolutely.
What have you tried already?
What have you gone and done to figure out...?
I know there's a couple of different questions there
in terms of what colors there are,
as well as how to actually apply them into the app.
So what have you done so far?
Yeah, so the two things I've looked at has primarily just been the colors,
as well as text styling.
So I think the primary part for, when I think of a Dash theme
is it has to match up with the Dash blue colors.
So I went out, I tracked down Dash's color codes,
and so I have that in a doc somewhere,
and so I'm going to turn that into a theme,
but in terms of setting the swatches, and picking colors,
is there anything else that I need to do?
Or anything I need to watch out for there?
I mean, really, you can do anything you want, right?
But I think there's a lot of resources online
for generating these color palettes.
One thing that I would definitely want to recommend
is trying to find things that are high contrast
where they need to be high contrast.
So if you have any text,
that should be high contrast with its background,
if you have any buttons,
those should be high contrast with their background,
and just making sure
that you are accounting for those usability and accessibility concerns
as you go trough choosing the colors.
But really, from that perspective then, any colors are fine,
and I think Dash has some of these good high contrast blues, right?
We have the light blue
or the white almost of the chest, of the front,
and then some of the darker blues around.
I think you've got some of that already,
it's just trying to figure out what the right combination is.
And that's really up to you as the app designer.
Yeah. I guess Dash just picked her colors correctly,
so she's just already ready for accessibility themes.
Okay. So I guess in addition to that, I mentioned text before,
so in terms of text, is there any place where you--
any fonts that you have-- go to fonts that you like to use?
How should I think about approaching setting fonts for my app?
Can I just use Comic Sans there?
I probably shouldn't, right?
Maybe not Comic Sans, but there is a mono spaced Comic Sans
where all of the characters are fixed width.
You should use that one.
Okay, then mono spaced Comic Sans.
-Okay. -Yes, exactly.
Well, let me put in the mono spaced Comic Sans.
Okay, I'll come back to you about that then.
I'll put in Comic Sans,
then in the next episode you can review it with me,
-and see how that looks. -Absolutely.
Otherwise, assuming we're not going to actually do Comic Sans,
but we could,
the standard recommendation there
is to have very few fonts,
ideally one font, but absolutely no more than two or three.
And be really consistent and really thematic
with where you use those fonts.
And you don't want to see a header or an app bar
with Comic Sans in one window,
and have it be Times New Roman in another window.
They're still the header, they have the same meaning,
so you really want to try to make sure
that your font has purpose
and that's consistent throughout the whole app.
-Whatever font it is. -Gotcha!
Okay. I guess in terms of UI design I've always heard that you can even--
you mix type faces, two at most,
you know, have one for the header and then, you know--
let's say like a Serif font, a nice and prettier font,
and then for maybe even the regular text
you can have something like Sans Serif or vice versa.
Okay, I'll try to keep that in mind.
So I'll also add that Comic Sans to the list.
I'm trying to think, I think that's all I had.
I just wanted to bounce ideas off of you, so that's been super helpful.
Thank you so much, Fitz.
Yeah, you're very welcome.
And I'll look forward to following along with the rest of your journey,
I think it's been really fun to watch so far,
and I'm really excited for the rest of it.
Thanks, Fitz.
So that about does it for this episode of
I think that just gave me a bunch of awesome action items
that I can work on for our next episode.
But for this episode, before we close off,
I do want to ask you,
do you have any app feature recommendations for me
and anything that I could implement in the Dash Fan Club app?
In addition to that, bonus question:
what is something that you wish you knew
when you were starting out with Flutter?
I'd really love to hear about your experiences
with learning to build things with Flutter.
So, again, that about does it for this episode of
Thank you all so much for watching,
and, well, I'm going to go back to learning to fly now.
I'll see you in the next episode. Bye!
♪ [music] ♪