我带你体验了一下flutter，赶紧来试试！

备注：如标题所示，本文只做大概介绍，目的是快速掌握flutter开发流程和原理 本文环境说明：window ,vscode，Flutter 3.3.2，dart 2.18.1

环境搭建

1. 下载flutter sdk
2. 将flutter/bin的目录 添加到环境变量
3. 执行 flutter doctor 测试是否生效
4. 安装Android studio,并通过AVD Manager 添加安卓模拟器
5. 执行flutter doctor 确保flutter 定位到Android studio 目录，如未定位到，则 执行 flutter config --android-studio-dir 设置你的 Android Studio 的安装目录。
6. 设置vscode编辑器，Android studio 同理
   1. 安装flutter插件 （安装flutter 插件默认安装dart插件）
7. 下载安装 windows 开发工具 visualstudio ，如不需要生成exe可执行程序，可忽略
8. 最后执行flutter doctor，如有红色提示，可按提示修改，如没问题，应如下图所示
   1. 
9. 环境优化项
   1. Android 新建的模拟器有些卡顿，可使用夜神模拟器代替，如果编辑器未能识别夜神模拟器，可在夜神模拟器安装目录下，执行adb connect 127.0.0.1:62001，如果还未发现设备，可在进程里面查看野生模拟器的监听端口，不一定是62001
   2. 配置flutter 依赖包代理地址：新建环境变量FLUTTER_STORAGE_BASE_URL，设置为 storage.flutter-io.cn

项目创建

1. 命令行方式
   1. flutter create projectName -a java -i swift ,-a 参数指定Android 语言，默认是kotlin，-i 参数指定ios语言，默认swift
2. vscode 方式新建
   1. 查看->命令面板->输入flutter，如下，或者直接 ctrl + shift +p ，快速打开命令面板
   2. 
3. 搭建好的项目结构如下：
   1. 

来吧！hello world走起！

项目入口文件为lib/main.dart,编写如下代码，然后用你颤抖的小手 按下f5，看看 hello world

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home:  MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: Text('hello world'),
      ),
    );
  }
}

调式过程显示组件的布局边界线，可以为开发者在调试界面的时候提供很大的便利，可以按照以下方法打开

• 如果是使用flutter run 运行的程序，可以在控制台按下p键，另外还支持一下按键
• 
• 如果是使用的f5，会默认使用编辑器自己的调式窗口,可按如下图示打开
• 

note: 1. flutter中一切皆组件，包括居中，样式之类的东西 2. flutter 包含两种类型组件，有状态和无状态，有状态是指需要跟随变量改变界面显示的组件，无状态则指界面不会更新的组件

运行到各个平台

可切换运行到的环境，分别查看不同平台终端的效果

打包发布

输入flutter build -h ，查看打包方式，支持如下参数 比如：flutter build apk ,flutter build windows,flutter build web 在打包apk的时候，可以选择具体的cpu架构，从来减少包的体积 flutter build apk --split-per-abi 可以使用 flutter build apk --analyze-size --target-platform=android-arm64 ，查看打包结果的详细信息，如下： 打包的结果都在build目录下： 比如 android、windows、web 如下： 打包android发布版应用的时候，需要使用自己的签名，可使用jdk 自带的keytool 生成

比如：keytool -genkey -v -keystore F:/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

运行原理分析

1. dart的运行方式，有以下三种
   1. 使用Dart2js编译成JavaScript代码，运行在常规浏览器中
   2. 使用DartVM直接在命令行中运行Dart代码
   3. AOT方式编译成机器码，例如Flutter App框架
2. dart 支持 JIT、AOT 两种运行模式，debug模式使用JIT，所以才能支持热更新，release模式使用AOT，所以才更快
3. 在不同的平台下，flutter使用不同平台下的原生画布展示渲染结果，比如web 使用canvas，android 使用 surfaceView
4. 不同平台下，flutter 使用不同平台下的页面元素作为项目的入口，比如 web，就是一个html，android 就是一个activity
5. 来认识一下打包后的apk是什么样的，
   • 先看debug.apk,解压后如下：flutter 代码被放到了flutter_assets目录下的文件中
   • 
   • assets
   • 
   • lib
   • 
   • 再来看release.apk,解压后如下：flutter 代码被放到了lib目录下的libapp.so中
   • 
   • assets
   • 
   • lib
   • 
6. app启动后，会通过入口文件，启动flutter 引擎，然后把flutter_assets 加载到运行目录，然后加载dart二进制代码到dart VM中执行

框架介绍

作为有经验的程序员，下面这张图足够了吧

项目模板

作者结合自己的经验，并通过查看多个开源实战项目，去其糟普，取其精华，整理了一个项目通用的flutter模板，有需要的可以拿去，大概介绍一下模板优势：

1. 集成了通用的三方库
2. 支持主题设置
3. 支持i18n国际化
4. 统一处理的网络请求
5. 采用mvc 将业务和界面分离
6. 包含通用splash启动图和首页等一些通用页面结构
7. ”良好“的项目结构划分
8. 项目引入getx：响应式、依赖注入、状态管理、路由管理、通用工具、通用提示弹窗等一系列易用的东西
9. 该有的有，不该有的没有

备注资源

1. 中文文档
2. flutter 实战 第二版
3. flutter 布局理解 如果你遇到了类似疑惑：明明设置了宽 100 高 100，为什么显示出来不是呢？可以看看这个