Your First Flutter App
If you're a complete beginner to Flutter development and wondering how to get started, this is the course for you. By Joe Howard.
Who is this for?
Both total beginners and native iOS and Android developers — no Flutter, Dart, or previous developer knowledge required! This course walks you through building an app from start to finish.
If you're already an experienced iOS or Android developer, but have zero knowledge of Flutter and Dart, this course will get you up to speed fast.
You'll start by learning the basics of Flutter, an increasingly popular way for mobile developers to build apps that target both iOS and Android, and even desktop and web. Then, you’ll master Flutter fundamentals like widgets, variables, and app state. You’ll even learn how to fix bugs! You’ll get a primer on coding basics to level-up your app-development skills. You’ll add more cool functionality to your app and practice your new coding skills.
Finally, you’ll amp up the flair by learning how to style your app!
This course is the first course in our Flutter Beginner Learning Path. While the course will cover Dart concepts as needed, you may also want to check out the second course in the learning path, Programming with Dart, to supplement your work in this course.
If you're an intermediate or advanced developer that is brand new to Flutter, you can zoom through this course at 2X speed and build the sample app. Then you'll be ready to dive even deeper into Flutter!
This course covers all the concepts you’ll need to build your first app! Here are some of the topics you’ll conquer along the way:
- OO Programming
- Dart Basics
- Flutter Widgets
- App State
- Fixing bugs
Part 1: Get Started with Flutter
Welcome to the course! Learn about the first Flutter app you'll build - a simple but fun game called Bull's Eye - and get a preview of all the things you'll learn throughout this part.
What Is Flutter?
Learn about the use of Flutter for cross-platform development, and compare Flutter to native app development as well as other cross-platform frameworks.
See how to get set up with the Flutter development tools, including the Flutter and Dart SDKs, Xcode, and Android Studio.
Get Started with Flutter
Create a Flutter project from scratch and get your first introduction to Flutter widgets, in the form of text and button widgets.
Discuss the approach Flutter takes to UI development: almost everything you work with in Flutter is in the form of a widget.
Learn the basics of object-oriented programming to better understand the Dart code you'll be working with in the course.
Learn how to connect a button in the app to some Dart code that prints a message to the console.
Use Widget State
Learn more about the important Stateless and Stateful Widgets, which help keep your UI performant and in-sync with the state of your app data.
See Flutter's Hot Reload in action, and learn how to solve problems beginners frequently run into, such as what to do when your code has an error.
In this challenge, practice what you've learned so far by adding a knock-knock joke to your app.
You've made a great start! Let's review where you are with the app to-do list, and discuss what's next.
Part 2: Create UI with Flutter
Let's check out what you'll be learning in this part, and learn why it's important.
Set an Orientation
Learn how to convert your app from portrait to landscape mode, and how to configure the simulated devices accordingly.
Learn how to control the layout of widgets in the UI, and discuss the general plan for the widgets you will use in Bull's Eye.
Practice what you've learned by laying out the final row of the Bull's Eye user interface.
Spacing and Padding
Learn how you can make Bull's Eye look a bit less cramped through the use of containers and padding.
Model and Set State
See how to keep the value of the app slider synchronized with a state variable.
Work with Strings
Learn about a very important Dart data type you'll use in your Flutter apps, which you can use to store a sequence of characters.
You're doing awesome! Let's review where you are with the app to-do list, and discuss what's next.
Part 3: Dart Basics
This part covers some basics about Dart. Let's go over what you'll learn and why it's important.
Dart Core Libraries
Learn about the pre-built data types and functions you can use in your apps to solve a variety of common tasks.
In this episode, you'll learn the syntax to write your own methods in Dart.
See if you can figure out an algorithm to calculate the positive difference between the target value and the slider value.
Learn how to write if/else statements in Dart, and how you can use them to implement the algorithm.
Try improving the algorithm to calculate the difference so it is written in fewer lines of code.
Use Number Methods
Finalize the difference algorithm and score calculation, and learn about an important Dart concept: calling methods on number types.
Learn how something called type inference can help make your code more concise and easy to understand.
Learn the difference between local and instance variables, a common point of confusion for beginners.
Three parts down, two to go! Let's review where you are with the app to-do list, and discuss what's next.
Part 4: Build Out the App
It's time to build out your app! Let's check out how you'll go about that in this part.
Practice some coding basics by modifying Bull's Eye to display the player's total score.
Fix a Bug
There's a subtle bug where Bull's Eye doesn't calculate the correct score. Learn why this is happening, and how to fix it.
It's time for an even bigger challenge: modifying Bull's Eye to keep track and report the current round of the game.
In this episode, add some polish to the app by telling the player how well they did each round.
Get some practice with coding basics by giving the user bonus points if they are very close to the target.
Get an introduction to functional programming in Dart by implementing the "Start Over" button in Bull's Eye.
Only one part left! Let's review where you are with the app to-do list, and discuss what's next.
Part 5: Style the App
In this final part of the course, you'll make your app look snazzy! Check out how you'll do that.
Learn how Flutter lets you style your app to have an Android or iOS look-and-feel, and see how to choose between them.
In this episode, learn how to add images into your app, and how to name and size images.
Style a Widget
Get started with styling individual widgets using named properties that are set when creating the widget.
Learn how to customize the buttons and sliders in the app so they look nice.
Add an About Page
Learn how to add multiple screens to your Flutter apps, by adding an About page into Bull's Eye.
Learn how to set up your app icon, and how to change the display name of your app.
Learn how to run your app on your own physical device so you can carry it around and show it off to your friends!
Congrats on finishing the course! Let's review what you learned and discuss where to go from here to continue your Flutter and Dart learning journey.