In Mobile App Development
Building my first Flutter app | Learning to Fly - read the full article about flutter app development, Mobile App Development and Native and cross-platform solutions from Flutter on Qualified.One
Youtube Blogger
Hi everyone, my name is Khanh, Im a new Developer Relations Engineer on the Dart and Flutter team.
Welcome to the first episode of Leaning to fly.
♪ [music] ♪ So you might be wondering, what is this "Learning to fly" series? Well, its 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 dont 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 thats 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 Ill 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 whos near and dear to our hearts, Dash, does have a group of dedicated fans, but no app.
Ive decided for my first big Flutter app it will be an app dedicated to Dashs adoring fans.
So individual features for this app havent 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 well 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? Lets 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 Ill 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 Im 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 Im such a big fan of Flutter.
So lets jump into the app skeleton that Ive built out for this app.
Well 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, well 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 thats 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 theres in fact a Dash icon that is in existence? Its available as a part of the icons class, its called flutter_dash.
In terms of my experience learning Flutter so far, I really like that its 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 Ill 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 flutter_launcher_icons but one of the issues I ran into was: why didnt my bottom navigation bar labels take effect? So I had an unselectedLabelStyle set with a TestStyle, set the color and everything, but it wasnt taking effect.
So after a Google search, turns out I needed to use showUnselectedLabels and set that value to true for the labels to actually appear.
In preparation for our next episode I was thinking, beyond just setting the color for the top bar, whats the best way to build a Dash theme? Im 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, whats 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 ThemeData.Dash.
-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 theres 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 Ive 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 Dashs color codes, and so I have that in a doc somewhere, and so Im 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 theres 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 youve got some of that already, its just trying to figure out what the right combination is.
And thats really up to you as the app designer.
Yeah. I guess Dash just picked her colors correctly, so shes 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 shouldnt, 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, Ill come back to you about that then.
Ill put in Comic Sans, then in the next episode you can review it with me, -and see how that looks. -Absolutely.
Otherwise, assuming were 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 dont 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.
Theyre still the header, they have the same meaning, so you really want to try to make sure that your font has purpose and thats consistent throughout the whole app.
-Whatever font it is. -Gotcha! Okay. I guess in terms of UI design Ive always heard that you can even-- you mix type faces, two at most, you know, have one for the header and then, you know-- lets 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, Ill try to keep that in mind.
So Ill also add that Comic Sans to the list.
Im trying to think, I think thats all I had.
I just wanted to bounce ideas off of you, so thats been super helpful.
Thank you so much, Fitz.
Yeah, youre very welcome.
And Ill look forward to following along with the rest of your journey, I think its been really fun to watch so far, and Im really excited for the rest of it.
Thanks, Fitz.
So that about does it for this episode of Learning to fly, 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? Id really love to hear about your experiences with learning to build things with Flutter.
So, again, that about does it for this episode of Learning to fly.
Thank you all so much for watching, and, well, Im going to go back to learning to fly now.
Ill see you in the next episode. Bye! ♪ [music] ♪
Flutter: Building my first Flutter app | Learning to Fly - Mobile App Development