Flutter-原理介绍篇

Some simply introduction, include Dart、Flutter Framwork

Posted by Egbert on September 10, 2019

More detail about flutter you can refer to these articles.
https://css-tricks.com/flutter-googles-take-on-cross-platform
https://flutter.dev/docs/resources/technical-overview

Dart

Dart is a programming language created by Google and was used to write Flutter.
Dart was created, more or less, because Google wanted a language that was "better" than JavaScript to write server side and front-end code. From what I understand, the main issue they had with JavaScript is how slowly it updates with new features since it relies on a huge committee for approvals and several browser vendors to implement it.

  • Dart supports both Just In Time (JIT) compiling and Ahead of Time (AOT)compiling.

  • Dart is a productive and predictable language. It’s easy to learn and it feels familiar. The lanuage is similar with JS and react
  • It can run in different platform ,not only Android, Ios, such as web.
  • Rich underlying libraries for every platform.

Dart development API Site
https://dart.dev/guides/language/language-tour

Flutter

  • Flutter is a mobile SDK that, at its core, is about empowering everyone to build beautiful mobile apps. Whether you come from the world of web development or native mobile development, Flutter makes it easier to create mobile apps in a familiar, simplified way, without ever giving up control to the framework.

Flutter VS Dart

  • Dart is a kind of programming language,support multiple platform.
  • Flutter just is a framework for app. was written by Dart language.

Flutter Framework

This is Flutter Framework by Google official development site.

Project architecture

flutter project base file

  • pubspec.yaml
  • main.dart

platform project configuare a flutter project must be binded a root platform project

  • Android
  • IOS

depended library

  • Dart Package(Flutter Framwork and Plugins)
  • Dart SDK

project build process

  • coding the mart code and configure the yaml file
  • run this command flutter create to create the project,then will generate the Android and ios project framework(Android use gradle to create) and package the mart file to build directory.
  • run this command flutter run will install to the device
    1
    2
    3
    4
    5
    6
    7
    
    Launching lib/main.dart on MI 8 in debug mode...
    Initializing gradle...
    Resolving dependencies...
    Running Gradle task 'assembleDebug'...
    Built build/app/outputs/apk/debug/app-debug.apk.
    Installing build/app/outputs/apk/app.apk...
    Syncing files to device MI 8...
    

    project runtime on device

  • debug mode — JIT(Just in time) use JIT runtime mode, flutter can be hotload to project
  • debug mode — AOT(ahead of time)

DartVM VS DalvikVM

  • Dart language use DartVM to load, Compare with the Android traditional DalvikVM, there are some common poiots.
  • You can look up the article to see some details,incluing some run process and garbage collection.

https://zhuanlan.zhihu.com/p/36488644

Flutter Performance Research

As for the Flutter performance, these are so many opinions in the network. this is very normal.
Flutter is still in the early peroid, some many places can be optimized. But in Alibaba, XianYu is first team to use Flutter, and also show some data about the performace.
We can see the picture to research it. about more details you can check this article https://www.infoq.cn/article/xianyu-cross-platform-based-on-flutter

Dart devTools

DevTools is a suite of performance and debugging tools for Dart and Flutter. It’s currently in preview release, but is under active development.

Here are some of the things you can do with DevTools:

  • Inspect the UI layout and state of a Flutter app.
  • Diagnose UI jank performance issues in a Flutter app.
  • Source-level debugging of a Flutter or Dart command-line app.
  • Debug memory issues in a Flutter or Dart command-line app.
  • View general log and diagnostics information about a running Flutter or Dart command-line app.

about more details, you can refer to the Flutter official Site about the dev tools chapter

https://flutter.dev/docs/development/tools/devtools/overview