Flutter环境搭建

1.Flutter 简介

1.1 Flutter 是什么 ?
  • Flutter 是一个 UI SDK(Software Development Kit)
  • 跨平台解决方案:可以实现一套代码发布移动端(iOS、Android、HarmonyOS)、Web端、桌面端
  • 目前很多公司都在用它,比如:Google、阿里、字节、腾讯、小米,尤其是阿里的咸鱼团队,为 Flutter 的生态做出了很多贡献 https://space.bilibili.com/344928717
  • Flutter 有着统一大前端的野望,并且它在不断蚕食 iOS、Android、HarmonyOS 这些原生开发
1.2 Flutter的几个特点:

美观、快速、高效、开放

  • 美观
    使用Flutter内置美丽的Material Design和Cupertino widget、丰富的motion API、平滑而自然的滑动效果和平台感知,为您的用户带来全新体验。
  • 快速
    Flutter 的 UI 渲染性能很好。在生产环境下,Flutter 将代码编译成机器码执行,并充分利用 GPU 的图形加速能力,因此使用 Flutter 开发的移动应用即使在低配手机上也能实现每秒 60 帧的 UI 渲染速度。
    Flutter 引擎使用 C++ 编写,包括高效的 Skia 2D 渲染引擎,Dart 运行时和文本渲染库。
  • 高效
    Hot Reload (热重载),在前端已经不是什么新鲜的东西,但在移动端之前一直是没有的
  • 开放
    Flutter 是开放的,它是一个完全开源的框架。

2.Flutter开发环境搭建

2.1 Mac搭建 Flutter 开发环境

参考文档:https://flutter.cn/docs/get-started/install/macos

安装flutter

  • 下载:https://docs.flutter.cn/get-started/install/macos/mobile-ios#install-the-flutter-sdk
  • 选择自己的操作系统和最新稳定的版本(Stable版本)
  • 创建一个可以安装 Flutter 的文件夹,文件夹名称随意,我这边命名为 flutter_dev, 将下载好的sdk拖入flutter_dev中
  • 配置Flutter的环境变量
    因为我们之后需要在命令行执行Flutter的命令,所以需要配置环境变量
    macOS或者Linux系统,需要编辑~/.bash_profile文件 或者 ~/.zshenv 文件
bash 复制代码
export PATH=/Users/RobinLee/flutter_dev/flutter/bin:$PATH

创建 /.zshrc文件 ,编辑

bash 复制代码
source ~/.bash_profile

在终端中运行source ~/.zshrc命令,‌使新的环境变量设置立即生效。

在终端中执行flutter --version,出现如下内容,说明安装flutter成功

  • 配置镜像
    flutter项目会依赖一些东西,在国内下载这些依赖会有一些慢,所以我们可以将它们的安装源换成国内的(也就是设置国内的镜像)
    macOS或者Linux操作系统,依然是编辑~/.bash_profile文件
bash 复制代码
#flutter镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
2.2 Windows搭建 Flutter 开发环境
  • 在终端中执行 flutter --version,出现如下内容,说明安装flutter成功
2.3 配置 ios环境

如果想为Flutter配置iOS开发环境,需要在我们的电脑上安装一个Xcode(此部分Windows电脑忽略)

Xcode是苹果公司的iOS和macOS的IDE,进行过iOS开发的童鞋应该都非常熟悉

如何安装Xcode呢? 常见的是两种

  • 直接在App Store上搜索Xcode,找到安装即可
    这种安装方式有一个缺点,安装的一定是最新版本的(当然是用最新版本的最好)
    但是最新版本的Xcode会对macOS系统有一定的要求,所以可能还要设计到系统升级
    如果不希望系统升级,可以选择第二种方式
  • 第二种方式是安装自己想要的Xcode的版本,需要手动去下载
    进入https://developer.apple.com/download/more\[2\]页面
    登录自己的Apple ID
    在搜索框输入Xcode,回车搜索,找到各种版本Xcode下载即可
    打开Xcode,右上角点击Xcode - Open Developer Tools - Simulator,这个时候会打开一个默认的iOS模拟器

    方式二 打开Xcode,右上角点击Xcode - Settings

    运行 Flutter doctor 来验证安装。
bash 复制代码
flutter doctor -v
2.4 配置Android环境

如果想为Flutter配置Android开发环境,需要在我们的电脑上安装一个Android Studio

Android Studio是基于IntelliJ IDEA的、Google 官方的 Android 应用集成开发环境 (IDE)。

  • Android Studio的下载
    下载地址:https://developer.android.google.cn/studio?hl=zh-cn
    安装直接双击安装即可

    将Android Studio拖到应用程序,双击打开,会自动下载,选定android sdk目录
  • 创建Android模拟器


    由于自定义了Android-SDK的安装目录, 所以在运行flutter doctor命令之前,用flutter Config命令手动配置一下Android SDK的安装目录。
bash 复制代码
flutter config --android-sdk /Users/RobinLee/androidsdk

安装配置完Android Studio之后运行flutter doctor,重新检查平台依赖安装情况, 可以看到,一切都OK了。

2.5 配置鸿蒙环境

能够开发构建 HarmonyOS 应用,需要 DevEco Studio 和模拟器。

[鸿蒙版Flutter环境搭建指导]

鸿蒙版Flutter: https://gitee.com/openharmony-sig/flutter_flutter

下载鸿蒙 flutter 拖到 flutter_dev目录下

配置环境变量

相关推荐
江上清风山间明月1 天前
Flutter开发的应用页面非常多时如何高效管理路由
android·flutter·路由·页面管理·routes·ongenerateroute
Zsnoin能1 天前
flutter国际化、主题配置、视频播放器UI、扫码功能、水波纹问题
flutter
早起的年轻人1 天前
Flutter CupertinoNavigationBar iOS 风格导航栏的组件
flutter·ios
HappyAcmen1 天前
关于Flutter前端面试题及其答案解析
前端·flutter
coooliang2 天前
Flutter 中的单例模式
javascript·flutter·单例模式
coooliang2 天前
Flutter项目中设置安卓启动页
android·flutter
JIngles1232 天前
flutter将utf-8编码的字节序列转换为中英文字符串
java·javascript·flutter
B.-2 天前
在 Flutter 中实现文件读写
开发语言·学习·flutter·android studio·xcode
freflying11192 天前
使用jenkins构建Android+Flutter项目依赖自动升级带来兼容性问题及Jenkins构建速度慢问题解决
android·flutter·jenkins
机器瓦力2 天前
Flutter应用开发:对象存储管理图片
flutter