当前位置: 首页 > news >正文

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 文件
export PATH=/Users/RobinLee/flutter_dev/flutter/bin:$PATH

创建 /.zshrc文件 ,编辑

source ~/.bash_profile

在终端中运行source ~/.zshrc命令,‌使新的环境变量设置立即生效。
在终端中执行flutter --version,出现如下内容,说明安装flutter成功
在这里插入图片描述

  • 配置镜像
    flutter项目会依赖一些东西,在国内下载这些依赖会有一些慢,所以我们可以将它们的安装源换成国内的(也就是设置国内的镜像)
    macOS或者Linux操作系统,依然是编辑~/.bash_profile文件
#flutter镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
2.2 Windows搭建 Flutter 开发环境
  • 参考文档:https://flutter.cn/docs/get-started/install/windows
  • 下载:https://docs.flutter.cn/get-started/install/windows/mobile#install-the-flutter-sdk
  • 选择自己的操作系统和最新稳定的版本(Stable版本)
    安装Flutter
  • 解压下载好的 Flutter SDK
  • 这个在 Windows 和 macOS 都是一样的(选择一个自己想要安装的目录)
    在这里插入图片描述
  • 配置 Flutter 的环境变量
    • Windows 环境变量修改:点击计算机图标 - 属性 - 高级系统设置 - 高级 - 环境变量
    • 找到 Path,在其中添加 Flutter SDK目录下bin目录

在这里插入图片描述

  • 在终端中执行 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 来验证安装。
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模拟器

http://www.mrgr.cn/news/80727.html

相关文章:

  • 计算无人机俯拍图像的地面采样距离(GSD)矩阵
  • Face to face
  • 时间选择性衰落和频率选择性衰落
  • 分布式系统架构3:服务容错
  • HarmonyOS Next开发工具DevEco Studio介绍:ASan与TSan检测根治你的C++恐惧症
  • 从整个SecurityFilterChain的角度,一个请求经过Spring Security的流程
  • vue复习
  • zlmediakit搭建直播推流服务
  • ubuntu server 安装
  • vue2,vue3 中 v-for 和v-if的优先级
  • AI自我进化的新篇章:谷歌DeepMind推出苏格拉底式学习,语言游戏解锁无限潜能
  • 搭建分布式Spark集群
  • K8s中 statefulset 和deployment的区别
  • 音频开发中常见的知识体系
  • 大腾智能CAD:国产云原生三维设计新选择
  • K8s ConfigMap的基础功能介绍
  • 网络编程 02:IP 地址,IP 地址的作用、分类,通过 Java 实现 IP 地址的信息获取
  • 搭建分布式ZooKeeper集群
  • 贪心算法求解跳跃游戏
  • GEE+本地XGboot分类
  • Redis bitmaps 使用
  • MySQL中in和exists的使用场景
  • 牛客网 SQL36查找后排序
  • WPF+MVVM案例实战与特效(四十二)- 打造炫酷彩虹字控件,让你的应用闪耀起来
  • 番外:ubuntu 下的sqlite3
  • AI芯片常见概念