Flutter | 基础环境配置和创建flutter项目

一、Flutter 是什么?

Flutter 是 Google 推出的 UI 工具包 ,用于构建 跨平台 (iOS、Android、Web、Windows、macOS、Linux)的高性能、高保真应用。它使用 Dart 语言 编写,具有热重载(Hot Reload)、丰富的组件库和出色的性能表现。


二、环境配置

第一步:系统要求

  • 操作系统
    • Windows 10/11 (64-bit)
    • macOS (Intel 或 Apple Silicon)
    • Linux (Ubuntu 20.04+ 推荐)
  • 磁盘空间:至少 5 GB(包括 IDE 和工具链)
  • 网络:需要访问 GitHub、pub.dev 等(国内建议配置镜像)

第二步:安装 Flutter SDK

💡 注意:Flutter SDK 自带 Dart SDK,无需单独安装 Dart。

方法 1:官方推荐方式(手动安装)
  1. 下载 Flutter SDK

    百度网盘地址:

https://pan.baidu.com/s/1D3V5vy3Hq7mxTOamH4Mzhw 提取码: 34ch

  1. 解压到本地目录

    • Windows:建议解压到D:\fairy\flutter\flutter(路径不要有空格或中文)
    • macOS/Linux :建议解压到 /Users/你的用户名/development/flutter/opt/flutter
  1. 配置环境变量(PATH)

    Windows

    • flutter/bin 目录添加到系统 PATH 中。

添加两个环境变量

PUB_HOSTED_URL:https://pub.flutter-io.cn

FLUTTER_STORAGE_BASE_URL:https://storage.flutter-io.cn

  • macOS / Linux(~/.zshrc 或 ~/.bashrc)

    复制代码
    export PATH="$PATH:`pwd`/flutter/bin"
    # 或指定路径
    export PATH="$PATH:/Users/yourname/development/flutter/bin"

    然后运行:

    复制代码
    source ~/.zshrc  # 或 source ~/.bashrc

验证安装

复制代码
flutter --version

如果显示版本号,说明安装成功。


第三步:运行 flutter doctor

这是 Flutter 的环境诊断工具,会检查你的开发环境是否完整。

你会看到类似以下输出(带 ✗ 表示有问题,✓ 表示正常):

复制代码
flutter doctor

三、创建你的第一个 Flutter 项目

使用命令行创建

bash 复制代码
# 创建项目(项目名必须是小写,可含下划线,不能有空格或大写)
flutter create --platforms web flutter_base

安装trae插件:

运行也可以进入项目的lib目录下,点击run:

运行效果(默认的简单计数器):

相关推荐
竟未曾年少轻狂6 小时前
Vue3 生命周期钩子
前端·javascript·vue.js·前端框架·生命周期
TT哇6 小时前
【实习】数字营销系统 银行经理端(interact_bank)前端 Vue 移动端页面的 UI 重构与优化
java·前端·vue.js·ui
蓝帆傲亦6 小时前
Web前端跨浏览器兼容性完全指南:构建无缝用户体验的最佳实践
前端
子春一6 小时前
Flutter for OpenHarmony:跨平台虚拟标尺实现指南 - 从屏幕测量原理到完整开发实践
flutter
晴殇i6 小时前
【前端缓存】localStorage 是同步还是异步的?为什么?
前端·面试
不一样的少年_6 小时前
Chrome 插件实战:如何实现“杀不死”的可靠数据上报?
前端·javascript·监控
深度涌现6 小时前
DNS详解——域名是如何解析的
前端
renke33646 小时前
Flutter for OpenHarmony:形状拼图 - 基于路径匹配与空间推理的交互式几何认知系统
flutter
千逐686 小时前
多物理场耦合气象可视化引擎:基于 Flutter for OpenHarmony 的实时风-湿-压交互流体系统
flutter·microsoft·交互
小码哥_常6 小时前
Android内存泄漏:成因剖析与高效排查实战指南
前端