Sign in

Brief Introduction to Flutter — Flutter Tutorial Part 1

Dart is a multi-platform language developed by Google and based on it, Google has developed Flutter.

It is a UI toolkit developed for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Why Flutter

Paint your app to life in milliseconds with Stateful Hot Reload. Use a rich set of fully-customizable widgets to build native interfaces in minutes.

Quickly ship features with a focus on native end-user experiences. The layered architecture allows for full customization, which results in incredibly fast rendering and expressive and flexible designs.

Flutter’s widgets incorporate all critical platform differences such as scrolling, navigation, icons and fonts, and your Flutter code is compiled to native ARM machine code using Dart's native compilers.

Compared to Kotlin or Java in Android, you are not required to use dozens of code to make a new widget, and you're not required to implement all kinds of implementations and xml files declarations.

With its simple widget annotation, you can simply mix up different kinds of widgets for example:

And you can even draw your own widget in a canvas in just a few lines like:

Compared to SwiftUI, Flutter is not so sticky and it is a lot more customizable which means you can easily separate your code between the presentation layer and others. You are not required to mix your UI widgets with other non-UI code, and you can recreate your own widget with the original dart files in the folder $FLUTTER_BASE_URL/packages/flutter/lib/src.

But what's the most attractive feature of Flutter? Thanks to Flutter/Dart's multi-platform support, you can even build the application across Windows, Linux, macOS, Chrome OS, iOS / iPadOS, Android, even Fuchsia at the same time just with the same code! Yet, it's time for paying attention to the backend. Well, you can use Dart to build your server-side application, isn't that right?

The only thing you need to enable all these features is to run flutter config in your terminal. Let's have a quick look at the usages:

So we will just need to run:

In this tutorial, you will learn to create a simple Flutter application. You are not required to have any Dart or any platform development experience, but to have some basic object-oriented programming experience (such as variables, control statements). Let's start coding.

How to set up the environment

You would need to install Flutter and Dart to your computer before anything else you should do. It supports macOS, Windows, Linux, and also ChromeOS. Please follow the instruction via visiting Install - Flutter.

If you’re in China, visit Install - Flutter for additional support.

You can build apps with Flutter using any text editor combined with our command-line tools. However, we recommend using one of our editor plugins for an even better experience. These plugins provide you with code completion, syntax highlighting, widget editing assists, run & debug support, and more.

In this part, we will add the editor plugins for Android Studio.

Add the plugins for Android Studio

Android Studio offers a complete, integrated IDE experience for Flutter.

  • Android Studio, version 3.0 or later

Alternatively, you can also use IntelliJ:

  • IntelliJ IDEA Community, version 2017.1 or later
  • IntelliJ IDEA Ultimate, version 2017.1 or later

To install the plugins:

  • Start Android Studio.
  • Open plugin panel (Configure > Plugins as of v3.6.3.0 or later).
Android Studio Plugins
Android Studio Plugins
Android Studio Plugins
  • Select the Flutter plugin and click Install.
Search for Flutter
  • Click Yes when prompted to install the Dart plugin. If you are required to install the Dart plugin, click Yes.
Install Required Plugins
  • Click Restart when prompted.

How to use Flutter

To create a new Flutter project, you would need to open your Android Studio.

  • Open the IDE and select Create new Flutter project.
Create new Flutter Project
  • Select Flutter Application as the project type. Then click Next.
Flutter Project Type
  • Verify the Flutter SDK path specifies the SDK’s location (select Install SDK… if the text field is blank).
  • Enter project information. Then click Next.
Flutter Project Information
  • Click Finish.
  • Wait for Android Studio to install the SDK and create the project.

As soon as Flutter finish creating the project, you will have these generated files: (with macOS, Android, and web-enabled)

Generated Flutter Project Structure

You can also open a terminal and run the flutter create <project name> command to create a starter project, Here is an example:

How to add Flutter to existing app

It’s sometimes not practical to rewrite your entire application in Flutter all at once. For those situations, You can integrate Flutter into your existing application piecemeal as a library or module. That module can then be imported into your Android or iOS (currently supported platforms) app to render a part of your app’s UI in Flutter. Or just to run shared Dart logic.

In a few steps, you can bring the productivity and the expressiveness of Flutter into your app.

As of Flutter v1.12, add-to-app is supported for the basic scenario of integrating one full-screen Flutter instance at a time per app. It currently has the following limitations:

  • Running multiple Flutter instances or running in partial screen views may have undefined behavior.
  • Using Flutter in background mode is still a WIP.
  • Packing multiple Flutter libraries into an application isn’t supported.
  • Plugins used in add-to-app on Android should migrate to the new Android plugin APIs, based on FlutterPlugin.
  • Plugins that are not supported by FlutterPlugin might have unexpected behaviors if they make assumptions that are untenable in add-to-app (such as assuming that a Flutter Activity is always present).

As of v1.17, the Flutter module only supports AndroidX applications on Android.

Running your Flutter app

Use the flutter run command to run your Flutter app on a connected device or simulator.

Open a terminal and change directories to the root of your app (the same directory that contains the pubspec.yaml file for your project).

Run the following command. Once the flutter tool is running, if you change the app’s source code, you can hit r to hot-reload your application (updating the source on the fly without actually restarting the entire app).

If more than one device is connected, use the flutter devices command to get their IDs, and then flutter run -d deviceID to run your app.

Alternatively, if you are using the Android Studio with the Flutter plugins, you can start your Flutter app from there:

In Android Studio, click the Run icon in the toolbar, or invoke the menu item Run > Run.

Main Toolbar — Main Toolbar With Debugging Application — Main Toolbar With Running Application

If everything works, you should see your starter app on your device or simulator.

Hot Reload

Flutter offers a fast development cycle with hot reload, the ability to reload the code of a live running app without restarting or losing app state. Simply make a change to your source code, tell your IDE or command-line tool that you want to hot reload, and see the change in your simulator, emulator, or device.

This could be extremely useful while building up the layouts, and you can even apply hot-reload on your physical devices like your desktop, your iPhone and your Android Phone.

Flutter Hot Reload in Android Studio

To edit your code and hot reload changes:

  • Run your app with ‘Run’ or ‘Debug’.
  • Make desired changes in your source code (without stopping the app).
  • Simply save the file or click the Hot Reload Button in the toolbar (the button with the lightning bolt and the green run triangle).

Conclusion

Flutter is a multi-platform UI toolkit developed by Google based on Dart. You can easily install and set up environment for flutter developments. Flutter is fast, full-customizable and its widgets can incorporate all critical platform differences.

Just Go and check Flutter right now!

Thanks for your reading~

Cheers ψ(`∇´)ψ~ 这里是苏苏的企鹅~

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store