Flutter Tour——First Application

[soapgu]

• 新建项目

启动 Visual Studio Code 并打开命令面板（使用 F1、Ctrl+Shift+P 或 Shift+Cmd+P）。开始输入“flutter new”。选择 Flutter: New Project 命令。
这里我暂时命名为flutter_helloworld

• 目录结构

项目创建完成后，flutter会自动帮我构建一堆目录。
结构如下

.dart_tool //dart工具

android //安卓平台原生项目

build //编译输出

ios //iOS app 项目

lib //flutter主要dart代码，好低调

linux //图形化linux应用项目

maxos //macOS应用项目

test //测试项目

web //web项目

windows //windows平台项目主要是C++，和C#没有关系

analysis_options.yaml //代码分析配置，暂时还不是太理解

pubspec.yaml //项目配置依赖等感觉和nodejs项目的package.json差不多

可以看出flutter并不是按照你当前本地的环境来构建项目的，一开始创建的项目是全平台

• Android
• iOS
• web
• macOS
• linux
• Windows

我本地环境linux和Windows不具备，但是Android/iOS/Web/macOS应该没问题的

• Android环境运行调试

调试安卓只要选择对应的安卓模拟器就行了

直接点运行就行了

这里可以看到应该直接执行了gradle命令

• 安卓调试异常以及处理
  在第一次运行的时候，出现一个莫名的报错

Launching lib/main.dart on Android SDK built for x86 in debug mode...

FAILURE: Build failed with an exception.                                

* What went wrong:                                                      
java.lang.StackOverflowError (no error message)                         

* Try:                                                                  
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org                              

BUILD FAILED in 1s                                                      
Running Gradle task 'assembleDebug'...                                  
Running Gradle task 'assembleDebug'... Done                         1.6s
Gradle task assembleDebug failed with exit code 1

是gradle生成报错，但是直接StackOverflowError莫名其妙，啥信息都没。
查了StackOverflow是靠flutter clean 命令解决

• java.lang.StackOverflowError (no error message) when I run flutter run

• iOS运行环境运行调试

依样画葫芦选iOS的模拟器

点击运行后

这次很顺利，没啥幺蛾子。

• Web&macOS运行调试

Launching lib/main.dart on Chrome in debug mode...
main.dart:1
This app is linked to the debug service: ws://127.0.0.1:65039/nYv7S9GBE5E=/ws
Debug service listening on ws://127.0.0.1:65039/nYv7S9GBE5E=/ws
Connecting to VM Service at ws://127.0.0.1:65039/nYv7S9GBE5E=/ws

Launching lib/main.dart on macOS in debug mode...
main.dart:1
--- xcodebuild: WARNING: Using the first of multiple matching destinations:
{ platform:macOS, arch:arm64, id:00008103-000850862180801E }
{ platform:macOS, arch:x86_64, id:00008103-000850862180801E }
warning: Run script build phase 'Run Script' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'Flutter Assemble' from project 'Runner')

顺利运行，虽然暂时不知道原理

• 各个平台代码分析

不分析则已，一分析发现是一个大坑～～～

• Android
  先看manifest

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
        android:label="flutter_helloworld"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>

可以发现

1. 并没申请什么权限
2. 只有一个MainActivity

看下源代码更“离谱”了

package com.example.flutter_helloworld

import io.flutter.embedding.android.FlutterActivity

class MainActivity: FlutterActivity() {
}

完全就是一个空壳。
看app到gradle.build的dependencies也几乎是空的，那么FlutterActivity这个基类是怎么来的那？
答案在flutter.gradle里面

 /**
     * Adds the dependencies required by the Flutter project.
     * This includes:
     *    1. The embedding
     *    2. libflutter.so
     */
    void addFlutterDependencies(buildType) 

其中embedding就是安卓的接入层库

FlutterActivity就是从这里来的。

libflutter.so是什么那？就是Engine层

dart相关代码就是Framework层，最后编译成为libapp.so，

• 注意这里是在release模式下才会生成机器码

非常有意思的架构！

原生代码变成最基础架构，上面是Engine层，最上层才是Dart的源码。
习惯原生开发的的软件工程师一定不会适应。