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.

Login to leave a rating/review
Save for later
Share

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!

Covered concepts

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
  • Methods
  • Strings
  • Variables
  • Scope
  • Flutter Widgets
  • App State
  • Fixing bugs
  • Popups
  • Styling

Part 1: Get Started with Flutter

1
Toggle description

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.

2
Toggle description

Learn about the use of Flutter for cross-platform development, and compare Flutter to native app development as well as other cross-platform frameworks.

3
Toggle description

See how to get set up with the Flutter development tools, including the Flutter and Dart SDKs, Xcode, and Android Studio.

4
Toggle description

Create a Flutter project from scratch and get your first introduction to Flutter widgets, in the form of text and button widgets.

5
Toggle description

Discuss the approach Flutter takes to UI development: almost everything you work with in Flutter is in the form of a widget.

6
Toggle description

Learn the basics of object-oriented programming to better understand the Dart code you'll be working with in the course.

7
Toggle description

Learn how to connect a button in the app to some Dart code that prints a message to the console.

8
Toggle description

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.

9
Toggle description

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.

10
Toggle description

In this challenge, practice what you've learned so far by adding a knock-knock joke to your app.

11
Conclusion 0:58
Toggle description

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

Toggle description

Let's check out what you'll be learning in this part, and learn why it's important.

Toggle description

Learn how to convert your app from portrait to landscape mode, and how to configure the simulated devices accordingly.

Toggle description

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.

Toggle description

Practice what you've learned by laying out the final row of the Bull's Eye user interface.

Toggle description

Learn how you can make Bull's Eye look a bit less cramped through the use of containers and padding.

Toggle description

See how to keep the value of the app slider synchronized with a state variable.

Toggle description

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.

Conclusion 0:32
Toggle description

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

Toggle description

This part covers some basics about Dart. Let's go over what you'll learn and why it's important.

Toggle description

Learn about the pre-built data types and functions you can use in your apps to solve a variety of common tasks.

Toggle description

In this episode, you'll learn the syntax to write your own methods in Dart.

Toggle description

See if you can figure out an algorithm to calculate the positive difference between the target value and the slider value.

Toggle description

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.

Toggle description

Finalize the difference algorithm and score calculation, and learn about an important Dart concept: calling methods on number types.

Toggle description

Learn how something called type inference can help make your code more concise and easy to understand.

Toggle description

Learn the difference between local and instance variables, a common point of confusion for beginners.

Conclusion 0:39
Toggle description

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

Toggle description

It's time to build out your app! Let's check out how you'll go about that in this part.

Toggle description

Practice some coding basics by modifying Bull's Eye to display the player's total score.

Fix a Bug 5:05
Toggle description

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.

Toggle description

It's time for an even bigger challenge: modifying Bull's Eye to keep track and report the current round of the game.

Toggle description

In this episode, add some polish to the app by telling the player how well they did each round.

Toggle description

Get some practice with coding basics by giving the user bonus points if they are very close to the target.

Start Over 4:41
Toggle description

Get an introduction to functional programming in Dart by implementing the "Start Over" button in Bull's Eye.

Conclusion 0:29
Toggle description

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

Toggle description

In this final part of the course, you'll make your app look snazzy! Check out how you'll do that.

Toggle description

Learn how Flutter lets you style your app to have an Android or iOS look-and-feel, and see how to choose between them.

Toggle description

In this episode, learn how to add images into your app, and how to name and size images.

Toggle description

Get started with styling individual widgets using named properties that are set when creating the widget.

Toggle description

Learn how to customize the buttons and sliders in the app so they look nice.

Toggle description

Learn how to add multiple screens to your Flutter apps, by adding an About page into Bull's Eye.

Toggle description

Learn how to set up your app icon, and how to change the display name of your app.

Toggle description

Learn how to run your app on your own physical device so you can carry it around and show it off to your friends!

Conclusion 1:45
Toggle description

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.