咸鱼

咸鱼是以盐腌渍后，晒干的鱼

0%

Windows10 下搭建 Flutter 开发环境

发表于 更新于 分类于

一、 参考文档

二、 下载和安装

  1. 在 https://flutter.cn/docs/get-started/install/windows 找到最新版本的下载连接，比如 https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_3.29.2-stable.zip
  2. 解压到D盘根目录  ( 避免使用C盘，有权限问题 )
  3. 设置环境变量 , 添加
    1
    2
    3
    flutter='D://flutter/bin'  ( 这个要添加到 Path )
    FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
    PUB_HOSTED_URL="https://pub.flutter-io.cn"

备注：还有其他源可以选择。

三、检查Flutter环境

  1. 用Git Bash MinGW32 窗口执行命令
  2. 执行 ‘$ where flutter dart’ 看环境变量配置是否可以被识别
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $ where flutter dart
    D:\flutter\bin\flutter
    D:\flutter\bin\flutter.bat
    D:\flutter\bin\dart
    D:\flutter\bin\dart.bat

    $ flutter --version
    Flutter 3.29.2 • channel stable • [https://github.com/flutter/flutter.git](https://github.com/flutter/flutter.git)
    Framework • revision c236373904 (4 weeks ago) • 2025-03-13 16:17:06 -0400
    Engine • revision 18b71d647a
    Tools • Dart 3.7.2 • DevTools 2.42.3

运行探测，检查Flutter环境是否正常

1
2
3
$ flutter doctor

// 省略失败日志

3.1 修改maven仓库

默认情况下，网络是不同的，因为仓库 “https://maven.google.com/“ 有网络问题。
修改 D:\public_share\flutter\packages\flutter_tools\lib\src\http_host_validator.dart 文件解决：

3.2 修改依赖仓库

默认依赖源，网络是访问不同的，这个问题要通过设置镜像站点解决 https://docs.flutter.dev/community/china#configuring-flutter-to-use-a-mirror-site

这个地址是文档上提供的，速度也不错，就是每次都会提示你要信任这个源

1
2
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
$ export PUB_HOSTED_URL=https://pub.flutter-io.cn

再次检查Flutter环境

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$ flutter doctor
Flutter assets will be downloaded from [https://storage.flutter-io.cn](https://storage.flutter-io.cn). Make sure you trust this source!

Doctor summary (to see all details, run flutter doctor -v):

[√] Flutter (Channel stable, 3.13.9, on Microsoft Windows [版本 10.0.19045.3324], locale zh-CN)

[√] Windows Version (Installed version of Windows is version 10 or higher)

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)

    X cmdline-tools component is missing

      Run `path/to/sdkmanager --install "cmdline-tools;latest"`

      See [https://developer.android.com/studio/command-line](https://developer.android.com/studio/command-line) for more details.

    X Android license status unknown.

      Run `flutter doctor --android-licenses` to accept the SDK licenses.

      See [https://flutter.dev/docs/get-started/install/windows#android-setup](https://flutter.dev/docs/get-started/install/windows#android-setup) for more details.

[√] Chrome - develop for the web

[X] Visual Studio - develop Windows apps

    X Visual Studio not installed; this is necessary to develop Windows apps.

      Download at [https://visualstudio.microsoft.com/downloads/](https://visualstudio.microsoft.com/downloads/).

      Please install the "Desktop development with C++" workload, including all of its default components

[√] Android Studio (version 2022.3)

[√] VS Code (version 1.84.0)

[√] Connected device (3 available)

[√] Network resources

! Doctor found issues in 2 categories.
# 这样就是正常的了

另外还有一些由社区运营的依赖源镜像站点，也可以使用，比如：
上海交通大学Linux用户组
FLUTTER_STORAGE_BASE_URL ： https://mirror.sjtu.edu.cn/
PUB_HOSTED_URL ： https://mirror.sjtu.edu.cn/dart-pub/

1
2
$ export FLUTTER_STORAGE_BASE_URL=https://mirror.sjtu.edu.cn
$ export PUB_HOSTED_URL=https://mirror.sjtu.edu.cn/dart-pub

四、安装Android Studio 插件

  • 打开 Android Studio。
  • 打开插件设置。
  • 然后选择 Flutter 插件并点击 安装。
  • 当弹出安装 Dart 插件提示时，点击 Yes。
  • 当弹出重新启动提示时，点击 Restart。

五、创建项目

1
2
3
4
$ flutter create flutter_demo
$ cd flutter_demo
$ flutter run
Your application code is in flutter_demo\lib\main.dart.

这样创建的项目是包含所有平台：Linux、Windows、macOS、Web、Android、iOS，运行 flutter run会下载依赖。

移动端的项目，还是通过Android Studio创建项目，可以选择平台。

注意：创建项目，选择离线模式才成功。在线创建的项目依赖报错，运行也卡住。

  1. 项目结构

lib/main.dart 就是Flutter的代码

六、Jetpack Compose 和 Flutter 开发语法相似度很高？

以下是 Deepseek 回答：

Jetpack Compose（Android 的现代 UI 框架）和 Flutter（Google 的跨平台 UI 框架）在语法和设计理念上确实有许多相似之处，但也有一些关键差异。以下是它们的相似点和不同点分析：

6.1 相似点

  1. 声明式 UI
    两者都采用声明式编程范式，开发者通过描述 UI 的最终状态（而非一步步命令式更新）来构建界面。例如：

    • Flutter:
      1
      Text('Hello', style: TextStyle(color: Colors.red))
    • Compose:
      1
      Text("Hello", color = Color.Red)

  2. 基于函数的组件
    UI 都是由可组合的函数（Flutter 叫 Widget，Compose 叫 Composable）构建的，通过嵌套函数调用实现布局。

  3. 状态管理
    都强调状态驱动 UI 更新：

    • Flutter 使用 StatefulWidget 或状态管理库（如 Provider、Riverpod）。
    • Compose 使用 remember 和 mutableStateOf 等机制。

  4. 热重载（Hot Reload）
    两者都支持快速刷新界面，提升开发效率。

  5. Material Design 支持
    均内置对 Material Design 组件的原生支持（如 Button、Card 等）。

6.2 不同点

  1. 语言基础

    • Flutter：使用 Dart 语言（语法接近 Java/JavaScript，但有独特的特性如 .. 级联操作符）。
    • Compose：使用 Kotlin 语言（支持协程、扩展函数等特性，与 Android 生态深度集成）。

  2. 组件命名与风格

    • Flutter 的组件通常以 Widget 结尾（如 TextWidget、ContainerWidget），而 Compose 直接使用语义化名称（如 Text、Box）。
    • 布局方式略有差异：
      • Flutter 常用 Row/Column/Stack。
      • Compose 用 Row/Column/Box。

  3. 状态管理实现

    • Flutter 需要显式区分 StatelessWidget 和 StatefulWidget。
    • Compose 通过 remember 和状态托管（如 ViewModel）更灵活地管理状态。

  4. 平台依赖性

    • Flutter：跨平台（iOS、Android、Web、桌面等），UI 通过 Skia 引擎自绘，不依赖原生控件。
    • Compose：目前主要用于 Android（Compose Multiplatform 正在扩展支持其他平台，但成熟度不如 Flutter）。

  5. 布局系统

    • Flutter 的布局逻辑更显式（如 padding: EdgeInsets.all(8)）。
    • Compose 通过 Modifier 链式调用（如 Modifier.padding(8.dp)）。

为什么感觉语法相似？

  • Google 团队在设计两者时共享了类似的现代化 UI 开发理念（声明式、响应式）。
  • 都借鉴了 React 等前端框架的思想（如“状态驱动视图”）。
  • Dart 和 Kotlin 同属现代语言，语法简洁性上有共同点（如 lambda 表达式、类型推断）。

如何选择？

  • 选 Flutter：需要跨平台、希望一套代码覆盖多端。
  • 选 Compose：专注 Android 开发、需深度集成原生能力或已有 Kotlin 代码库。

示例对比

实现一个简单计数器：

  • Flutter:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    class Counter extends StatefulWidget {
      @override
      _CounterState createState() => _CounterState();
    }
    class _CounterState extends State<Counter> {
      int count = 0;
      @override
      Widget build(BuildContext context) {
        return ElevatedButton(
          onPressed: () => setState(() => count++),
          child: Text('Count: $count'),
        );
      }
    }

  • Compose:

    1
    2
    3
    4
    5
    6
    7
    @Composable
    fun Counter() {
      var count by remember { mutableStateOf(0) }
      Button(onClick = { count++ }) {
        Text("Count: $count")
      }
    }

总结：两者语法相似度高到可以“触类旁通”，但底层实现和生态差异显著。如果你熟悉其中一个，学习另一个会非常容易。