Skip to main content

Flutter

Foreword​

All the source code for this workshop is available on GitHub - here.

You can find out more about me here.

What is Flutter?​

Flutter is an open source framework developed by Google that allows you to build mobile applications for Android and iOS (as well as Web and Desktop apps) using a single codebase. It is written in Dart.

Market position of Flutter​

source​

Flutter has garnered massive global attention from developers and businesses alike. According to recent surveys, over 2 million developers have used Flutter to create applications. Major players such as Alibaba, Google Ads, and Reflectly have used Flutter to create stunning and functional applications.

As we look ahead, Flutter's trajectory seems promising. With Google's continuous investment in the framework and its increasing popularity among developers, it's anticipated that Flutter will continue to evolve and gain even more prominence in the coming years.

Today's workshop​

Today's workshop will focus on the basics of Flutter, and we will build a simple mobile application together. We will cover the following topics:

  • Introduction to Flutter
  • Setting up the development environment
  • Creating a new Flutter project
  • Using Git and GitHub to manage the project
  • Building a simple todo mobile application
  • Running the application on an emulator or a physical device

Introduction to Flutter​

Flutter is a UI toolkit that allows you to create natively compiled applications for mobile, web, and desktop from a single codebase. It uses the Dart programming language, which is also developed by Google.

How does Flutter work?​

Flutter uses its own rendering engine to draw widgets. It doesn't use the native components of the platform, which means that it can provide a consistent experience across all platforms. This also means that it can be more performant than other frameworks, such as React Native that use a bridge to communicate with the native components.

alt text alt text

What problems does Flutter solve?​

  • Single codebase: You can use the same codebase to build applications for Android, iOS, Web, and Desktop.
  • Fast development: Flutter has a hot reload feature that allows you to see the changes you make to the code in real time, without having to restart the application.
  • Same experience on all platforms: Flutter provides a consistent experience across all platforms, which means that your application will look and feel the same on all devices.

Setting up the development environment​

Installing Flutter​

To install Flutter, you should follow the instructions from the official documentation here.

To be able to develop for iOS, you will also need to install Xcode from the App Store and have a Mac computer.

In general, you will write your flutter code in one of those editors:

  • Android Studio
  • Visual Studio Code
  • IntelliJ IDEA

For each of them, you should install the Flutter and Dart plugins.

Checking the installation​

After you have installed Flutter, you can check if everything is set up correctly by running the following command in your terminal:

flutter doctor

Creating a new Flutter project​

To create a new Flutter project, you can run the following command in your terminal:

flutter create my_app

Then, you can navigate to the newly created directory and open it in your preferred editor.

For example, if you use Visual Studio Code, you can run the following command in your terminal:

code .

or for IntelliJ IDEA:

idea .

Using Git and GitHub to manage the project​

You can find more about Git and GitHub in this webinar or you can read about it here.

Building a simple todo mobile application​

We will build a simple todo mobile application that will allow the user to add, remove, and mark items as done. For the backend, we will use this quick NestJs API.