Flutter is an important indicator of an engineer’s skill breadth and sensitivity to new technologies. Flutter is one of the hottest hybrid development frameworks currently being embraced by more and more developers. In this article, I will share with you how to learn Flutter efficiently and quickly as a beginner.

To learn Flutter efficiently and quickly, a beginner can follow these steps:

  • Walk into it and know it
  • Master its language
  • Master its widgets
  • Be familiar with its state mechanism
  • Debugging technique
  • In-depth principle
  • Use tools wisely

Know the Flutter

Flutter is a cross-platform UI development kit developed by Google; It is called THE UI development kit mainly because it mainly focuses on the UI construction and rendering layer. For some functions of the console itself, such as calling Bluetooth and camera, it generally needs native code to operate. But now there are third-party libraries to help us solve these problems.

A brief history of Flutter development

Since 2018, Flutter has been gaining popularity, which has led many students to misunderstand Flutter as a recently emerging development framework. There is nothing wrong with Flutter being the most popular framework, but it is not a recent development framework. Why? Here’s a brief history of Flutter:

  • Oct 2014 – Sky, the predecessor of Flutter, opened source on GitHub
  • Oct 2015 – After one year of open source, Sky officially changed its name to Flutter
  • 2017.5 – Google I/O officially announced Flutter to the outside world, and this is when Flutter officially came into our attention
  • 2018.6 – one month before Google I/O in May, Flutter1.0 preview
  • 2018.12 – The release of Flutter1.0 pushed the study and research of Flutter to a new starting point
  • 2019.2 – Flutter1.2 release adds support for the Web
  • May 2020 – Flutter1.17 is the first stable release of 2020. This release includes Metal support for iOS (faster performance), new Material components, new Network tracking tools, and more.

This tells us that Flutter is gradually maturing and growing, and its ecosystem is also developing, so now is the time to learn about Flutter!!

Flutter architecture

A Flutter has three main components:

  • The Framework layer: The Framework of Flutter is based on the Dart language. Everything in Flutter is a Widget. There are two different styles of Widget libraries in Flutter. One is based on cupertino’s iOS design style component library.
  • Engine layer: the Flutter engine uses a 2D graphics library (called Skia) based on C++. In this layer, the Dart VM is provided to provide an execution environment for converting Dart code into native platform executable code. The Flutter engine runs on Android and iOS. It presents widgets with their appearance and communicates with them via channels depending on the platform.
  • Platform layer: Flutter provides its specific shell (Android shell and iOS shell) depending on the platform. These shells are used to host the Dart VM to provide access to the platform specific API.

The development language for Flutter

Flutter is developed based on the Dart language, so we must first understand the Dart language.

Dart is a strongly typed, statically typed language

Dart has been strongly typed since Dart2 and is statically typed, similar to Java and C#.

How do you understand that? Statically type the language if the type of the variable is known at compile time. For some languages, this means that as a developer you must specify the type of each variable (e.g. Java, C#);

The main advantage is that all types of checking can be done by the compiler, so many trivial errors can be found early.

For mobile students, because Java and Kotlin are strongly typed statically typed languages, this will be easier to use; However, for students of front-end development, most of the programming languages they are exposed to are JavaScript, and JS is a weakly typed and dynamically typed language. Therefore, students should distinguish between these two concepts when learning Dart.

Dart is an object-oriented language

Dart is an object-oriented language. In addition to Dart, here are some other object-oriented programming languages: Python, C++, Objective-C, Java, Kotlin, Swift, C#, Ruby, and PHP.

Dart is easy to learn if you have experience with OOP, or object-oriented programming.

Dart is easier for mobile users because Java and Kotlin are class-based object-oriented languages; But for the front-end students, although the core of JavaScript is to support object-oriented, but JavaScript’s prototype-based programming style is weak class and traditional class-based object-oriented style is still very different. So Dart is a bit of an adaptation, so Dart is your first class-based object-oriented programming language.

The Dart JIT&AOT

  • JIT: Just-in-time compilation, during development, faster compilation, faster reloading
  • AOT: Pre-compile, during release, faster and smoother

Dart supports BOTH JIT and AOT. JIT was used during development of Flutter to enable faster compilation and faster code reloading. But the disadvantages of JIT are also obvious. JIT needs to compile the code into machine code at run time, which gives users the direct experience of being slow. You will notice that the Flutter package will get a bit sluggish during development and get better after release, partly because of AOT;

AOT stands for Ahead Of Time. A typical example is C/C++, which can be directly compiled into machine code, that is, binary code. The advantage Of AOT is also obvious. AOT is used when your Flutter APP is released. This allows your APP to run faster and smoothly.

Learn the tools that Flutter can use

Ancient prose in xun zi · gakumon has a famous saying: the gentleman gave birth to the different also, good fake in also. So learning a new knowledge quickly and efficiently is good at faking things. Here are some tips for learning Flutter:

  • Learning about Flutter: If you have never learned about Flutter before or have learned about Flutter only piecemically, you can learn about Flutter quickly and systematically by using this tutorial. This will save you a lot of time and missteps.
    • Optional learning course: Flutter from Entry to Advanced Practice
  • The official documentation of Flutter is also a good way to learn about Flutter, but the information is more sporadicThe tutorialComplement each other:
    • flutter.dev
  • The Library of Flutter plugins: Some of the features that Flutter does not implement can be implemented with some plugins:
    • pub.dev
  • Common problems: Learning Flutter will inevitably encounter various problems. There are several ways to solve these problems:
    • The Flutter section of StackOverflow
    • Q&a section of Mobile Architect Development System Class
    • Question and Answer section of Flutter from Beginning to Advanced