likes
comments
collection
share

flutter项目从入门到落地

作者站长头像
站长
· 阅读数 55

Flutter作为一个2017年亮相的跨端框架，到现在已经不能算是一个新技术了。而flutter这个框架的使用者，既有原生开发人员，也有我们这种纯前端，本文就将简单介绍一下作为一个前端，如何快速搭建一个flutter项目。

1.环境搭建

flutter环境搭建官方文档比较清晰，分为以下几个步骤：

1. 下载和安装Flutter SDK：

-   访问Flutter官网（[https://flutter.dev）下载最新的Flutter]() SDK。
-   解压下载的文件到合适的位置（例如：`C:\src\flutter`；macOS上推荐：`~/flutter`），并解压到当前目录。

2. 环境变量配置：

-   将 `PUB_HOSTED_URL` 设置为镜像站点。
```
export PUB_HOSTED_URL="https://pub.flutter-io.cn"
```
-   将 `FLUTTER_STORAGE_BASE_URL` 设置为镜像站点
```
export FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
```
-   将 Flutter 添加到你的 `PATH` 环境变量中，以MACOS为例，如果sdk解压到~目录下，下面的配置则不需要修改，否则$PWD要修改成sdk所在目录。
```
export PATH="$PWD/flutter/bin:$PATH"
```
-   在终端运行`flutter doctor`，该命令会检查你的环境并显示可能需要安装的依赖项。
-   需要注意，目前只是在当前打开的终端可以运行flutter命令，如果需要长期生效，需要在shell配置文件(如`*rc` 或 `*profile` 文件)内写入上述三行命令，官方文档下方也有介绍
```
cat <<EOT >> ~/.zprofile
export PUB_HOSTED_URL="https://pub.flutter-io.cn"
export FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
export PATH="$PWD/flutter/bin:$PATH"
EOT
```

3. VSCode插件安装：

  • 作为前端，开发工具我们使用的是vscode,在VSCode中安装Flutter和Dart插件。

flutter项目从入门到落地

flutter项目从入门到落地

插件提供了devtools调试工具，插件提供了以下功能：

  1. 检查 Flutter 应用程序的 UI 组件布局和状态；
  2. 在 Flutter 应用程序中诊断 UI 性能过低的问题；
  3. Flutter 和 Dart 应用的 CPU 性能检测；
  4. 为 Flutter 应用进行网络性能检测和网络请求检测；
  5. 为 Flutter 或 Dart 应用进行源码级的调试；
  6. 在 Flutter 或 Dart 命令行应用中测试内存问题；
  7. 查看正在运行的 Flutter 或 Dart 的命令行应用程序相关的常规日志和诊断信息。
  8. 分析代码和应用的大小 flutter项目从入门到落地

4. 原生开发工具安装和配置：

  • Xcode（仅限macOS）：可在APP store安装，需要注意以下点

    • 最新版xcode区分具体的开发选项，我们开发的是iphone所以选择IOS，其他还有watchOS、visionOS等

      flutter项目从入门到落地

    • 如果你需要连接iphone来做真机调试，那么需要在xcode上登录appleid,而且需要appleid为邮箱格式，通常我们激活iphone注册的账号为手机号，不可以在xcode登录。手机号格式的appleid可以迁移成邮箱格式的appleid，但是这个过程是不可逆的。

    • 如果用虚拟机调试，需要下载虚拟机并安装

      flutter项目从入门到落地

    • 安装xcode过程中会提示安装cocoapods，是ios原生开发的包管理工具，按提示去官网安装即可。

  • Android Studio：

    • 从developer.android.google.cn/studio?hl=z… 下载并安装Android Studio，认准.cn标识

    • 下载对应版本的sdk

      flutter项目从入门到落地

    • 如果基于Gradle搭建的安卓项目，可能还需要配置Gradle版本。gradle为安卓开发环境的构建工具，集合了系统构建、依赖管理等功能。

      flutter项目从入门到落地

上述安装配置都完成后，再次运行flutter doctor，如果没有报错（部分警告可以忽略），那基本大功告成了。

2.Flutter生态

flutter生态会从dart语言、核心widget、包管理等几个方面做一下简单介绍

1. Dart语言：

dart做为flutter框架的开发语言，同样是由谷歌研发，据说flutter之所以选用dart作为开发语言，是因为两个团队办公区离得很近，沟通起来较为方便。以下是dart语言的一些特性

  • 强类型语言：Dart 是一种强类型语言，但它的类型系统设计得既灵活又易用。它支持类型推断，这使得你不必在每处代码中显式声明类型，从而使代码更简洁。
  • 对象导向：Dart 是一种纯面向对象的语言。所有东西都是对象，包括数字、函数和null，它们都继承自 Object 类。
  • 支持 JIT 和 AOT 编译：在开发期间，Dart 使用即时编译（JIT）以实现快速的开发周期（例如，热重载）。在生产环境中，它可以提前编译（AOT）成本地代码，以实现最佳的启动时间和性能。
  • 并发模型：Dart 使用基于 Isolate 的并发模型，避免了传统多线程编程的许多问题。每个 Isolate 有自己的内存堆和事件循环，这意味着状态不是共享的，从而减少了并发执行中的复杂性。

而作为前端开发的我们，最为熟悉的是javascript，从弱类型语言js过渡到强类型语言dart，其中还是有一些学习成本的，以下简要对比一下js与dart的相同点或不同点

  • js是弱类型语言，除了基本数据类型外，有object类型，对应json结构。Dart为强类型语言，语言风格类似于C语言，所有类都继承自Object，包括String等类型类。
  • dart支持mixin，概念类似于vue中的mixin，用于公用类中的逻辑。
  • 异步支持：js中使用Promise async await,dart支持Future async await，语法基本一致
  • 变量声明都支持var、const，dart还支持final关键字，用来定义一个只能赋值一次的变量
  • 运算符：都支持算术运算符、关系运算符、可选链等，语法稍有差异
  • 模块化都使用import

具体细节还有很多，但编程语言大多是相通的，我们在开发中多多熟悉，应该也可以很快上手，想要系统学习，可以移步dart国内官网：www.dartcn.com/guides/lang…

2. Widget：

在前端页面中，html负责页面元素，css负责元素样式，js负责交互逻辑。在flutter框架中，万物皆widget，widget构成了flutter页面。包括样式、事件等，都通过widget实现。widget分为StatelessWidget和StatefulWidget这和前端的react框架类组件是类似的，套用一张官方的widget介绍图片

flutter项目从入门到落地

下面是StatefulWidget的声明周期，是不是看起来似曾相识呢

flutter项目从入门到落地

没有html盒模型，flutter为我们提供了一些简单的容器类组件，如Container、Row、Column等，同时还提供了一些成套的ui类组件，如 Material组件、Cupertino组件（类ios风格组件），下图对核心widget做了一个简单的分类

flutter项目从入门到落地

想做详细了解的，可以访问flutter中文站对widget的介绍，flutter.cn/docs/refere… 部分widget是有视频介绍的，但官方都放在了油管上，有条件的同学建议看一下，或者看国内是否有搬运视频，讲的很清晰。

3. 包管理：

flutter官方维护了pub.dev包管理网站，和前端npm是很类似的

flutter项目从入门到落地 同时在我们创建Flutter项目后，一级目录下会有pubspec.yaml文件，类似前端的package.json文件，可以定义项目名称、版本号、flutter sdk版本、第三方依赖项、静态资源等内容。下面是一个简要的示例配置

name: example_project  # 项目名称，这是你的项目在 pub.dev 上的标识。
version: 1.0.0+1      # 项目版本号，遵循语义化版本控制规范。+1 表示构建号。

environment:          # 定义该项目兼容的 Dart SDK 版本。
  sdk: ">=2.7.0 <3.0.0"  # 项目需要的 Dart SDK 的最低和最高版本。

dependencies:         # 项目运行时依赖的其他 Dart 或 Flutter 库。
  flutter:             # 特定于 Flutter 的依赖项。
    sdk: flutter      
  cupertino_icons: ^1.0.0  # 其他依赖库及版本号。

dev_dependencies:     # 项目开发阶段依赖的库（不包括在发布的应用中）。
  flutter_test:        # 用于 Flutter 的测试框架。
    sdk: flutter

flutter:              # Flutter 特有的配置。
  uses-material-design: true  # 指定项目使用 Material Design 组件库。
  assets:              # 列出项目中需要包含的资源文件，如图片、字体等。
    - images/a_dot_burr.jpeg
    - images/a_dot_ham.jpeg

  fonts:               # 项目使用的自定义字体。
    - family: Roboto   # 字体家族名称。
      fonts:
        - asset: fonts/Roboto-Regular.ttf
        - asset: fonts/Roboto-Italic.ttf
          style: italic

3.项目落地

我们负责的flutter项目主要提供给公司业务人员使用，包含了一些表单录入，图表展示，地图定位等功能。项目是在2021年左右搭建的，所以flutter版本没有更新到最新，目前还停留在2.2.3版本，后续也在规划整体项目的sdk升级，具体会在后边更新相关升级的内容。下面是项目的整体架构图

flutter项目从入门到落地

项目登录页是走原生开发，所以严格的说该项目算是一个混合开发。同时，原生也给flutter提供了一些桥能力，大多是和公司业务相关的内容，例如埋点统计等。

第三方依赖包主要有以下几个，大家如果有需要可以作为参考

最后，当版本需求开发完成后，app通过jenkins平台进行打包，区分android和ios两个平台。由于项目属于toB，只是公司内部使用，所以并没有登录官方商店，而是走企业级应用，打包完成后再公司内部发版平台进行发版即可。

以上就是要介绍的全部内容，如果大家有其他想了解的内容，可以评论区留言，欢迎一起交流技术，感谢阅读。

转载自:https://juejin.cn/post/7361976432249749519
评论
请登录