This is part of the "Flutter Fundamentals" learning path. View Path

Your First Flutter App: An App From Scratch

Feb 22 2022 · Video Course (1 hr, 59 mins) · Beginner

Updated for 2022. If you’re a complete beginner to Flutter development and wondering how to get started, this is the course for you.

Version

  • Dart 2.14.1, Flutter 2.5, Visual Studio Code 1.6

Get Started with Flutter

Introduction

3:51 Free

Welcome to the Your First Flutter App course! With this kickoff episode, you’ll learn about the Flutter framework, what it can do, and learn about the breakdown of the course.

1

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

2

Install Flutter

2:20 Free

Understand the various components necessary to install Flutter as well as the various integrated development environments that you can use.

3

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

4

See how to get set up with the Flutter development tools, including the Flutter and Dart SDKs, Android Studio, and Visual Studio Code on Windows.

5

In this first challenge of the course, you’ll make a development plan for the app that you will make.

6

Create a Flutter project from scratch and learn about all the various aspects of it.

7

Add a Widget

7:11 Free

In this episode, you’ll be introduced to the Widget - your building block for creating Flutter apps.

8

Conclusion

1:11 Free

Congratulations on getting started with Flutter! Review what you accomplished and learn what you’ll be doing next.

9

Understand Flutter Widgets

Introduction

0:50 Free

Learn about how Flutter uses widgets to create app behavior and user interfaces. After which, you’ll get an overview of this part.

10

Understand Widgets

2:01 Free

In this episode, you’ll learn how Flutter uses widgets throughout its framework build your interface and react to user behavior.

11

Build an Interface

7:23 Free

Now that you have an idea of how widgets function, we’ll build our game interface using several of the Flutter’s provided widgets.

12

Write Dart Code

7:31 Free

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

13

Add a TextButton widget to the app and then add some Dart code that prints a message to the console.

14

Understand the difference between Stateless and Stateful Widgets, which help keep your UI performant and in-sync with the state of your app data.

15

Solve Problems

5:39 Free

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.

16

Conclusion

0:57 Free

You’ve made a great start! Let’s review where you are with the app to-do list, and discuss what’s next.

17

Create UI with Flutter

Introduction

1:02 Free

Learn the concepts of laying out widgets in flutter and then what concepts will be covered in this part.

18

Set an Orientation

4:20 Free

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

19

Layout Widgets

7:40 Free

Learn how to control the layout of widgets in the UI, and understand the general plan for the widgets you will use in Bull’s Eye.

20

Add a Slider

3:49 Free

In this episode, you’ll learn about Slider widget and its various properties and methods. Then you’ll add one to your game.

21

In this challenge, you’ll practice what you’ve learned by laying out the final row of the Bull’s Eye user interface.

22

In this episode, you’ll learn how to make your game’s interface look a bit less cramped through the use of containers and padding.

23

Learn how to keep the value of the app slider synchronized with a state variable when using a stateful widget.

24

Work with Strings

2:36 Free

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.

25

Conclusion

2:08 Free

In this final episode, you’ll get an understanding of what you accomplished in this course and where to go next.

26

Next course in this Learning Path

Version history

Flutter 2.5, Dart 2.14.1, Visual Studio Code 1.6 (Selected)

Feb 22 2022

Flutter 1.17.5, Dart 2.8.4, VS Code 1.48

Sep 8 2020

Who is this for?

This course is for people getting started with Flutter and that have completed the Your First Flutter App and Programming with Dart: Fundamentals courses, or have the equivalent knowledge.

Covered concepts

  • Flutter Framework
  • Widgets
  • Projects
  • User Interaction
  • Orientation
  • Widget Layout
  • Widget State
  • Strings

Contributors

Comments