Flutter入门一: 环境搭建

Flutter入门 学习大纲

本节,主要记录基于Mac系统Flutter环境搭建。主要根据官网介绍进行搭建工作,搭建过程会有一些,而且有时需要采取科学上网的方式。

一. 安装Flutter

1. 更新HomeBrew

  • 如果你的电脑已安装这个工具包,升级
brew update
  • 如果电脑未安装这个工具包,按照官网指示安装它
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. 下载Flutter

使用科学上网方式

  • 2.1 进入 官网 ,点击Get started

    image.png

  • 2.2 选择对应系统


    Flutter入门一: 环境搭建_第1张图片
    image.png
  • 2.3 下载最新版本压缩包


    Flutter入门一: 环境搭建_第2张图片
    image.png

PS: 中文网地址为: https://flutter.cn/docs/get-started/install/macos

3. 配置环境变量

  • 3.1 配置镜像

Flutter运行需要去官方下载所需资源,没有梯子的伙伴需要镜像服务器,以下是官方文档 友情提示:

Flutter入门一: 环境搭建_第3张图片
image.png

  • 来到对应的Shell配置文件进行配置:
  • 如果你默认使用base,配置路径为:~/.bash_profile
  • 如果使用zsh,配置路径为:~/.zshrc
  • 配置内容
 export PUB_HOSTED_URL=https://pub.flutter-io.cn
 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
  • 3.2 配置环境
    Shell文件中继续配置Flutter运行环境(路径中的xxx为自己的电脑用户名
export FLUTTER=/Users/xxx/iOSCoreMark/Flutter/flutter/bin
  • 3.3 更新配置
    使用source命令更新配置:
source .bash_profile

4. 指定运行地址

我们运行Flutter指令,需要先指定运行地址

  • 方法一: 只在当前命令行窗口生效:
# 指定运行地址(pwd是当前文件夹路径,需要指定你自己flutter文件夹的路径)
export PATH="$PWD/flutter/bin:$PATH"
  • 方法二永久生效
    参考官方指引(https://flutter.cn/docs/get-started/install/macos#update-your-path)

    Flutter入门一: 环境搭建_第4张图片
    image.png

  • 运行flutter doctor,检查运行环境

    Flutter入门一: 环境搭建_第5张图片
    image.png

PS: 第一行Flutter配置成功即可,下面环境未配置成功,我们可以去不同开发工具配置

二、安装Android Studio

  • 直接去 官网下载最新版本的Android Studio
  • 下载后直接安装即可。

1. 配置安卓环境变量

  • 在对应的Shell配置文件中:
#Flutter (下面“pwd”请使用自己的路径)
export FLUTTER=/Users/pwd/Flutter/flutter/bin
export PATH=FLUTTER:$PATH

#Flutter 镜像设置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

#安卓 (下面“username”请使用自己的用户名)
export ANDROID_HOME=/Users/username/Library/Android/sdk
#安卓模拟器路径
export PATH=${PATH}:${ANDROID_HOME}/emulator
#安卓tools路径
export PATH=${PATH}:${ANDROID_HOME}/tools
#安卓平台工具
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

2. 安装Android Studio插件

  • 安装完后,运行flutter doctor会发现缺少Flutter插件

    image.png

  • 来到Studio偏好设置,搜索并下载FlutterDart插件:

    Flutter入门一: 环境搭建_第6张图片
    image.png

  • 安装完后,重启Android Studio,可以看到有Flutter 项目创建方式了:

    Flutter入门一: 环境搭建_第7张图片
    image.png

PS: 有一个坑点,如果Flutter插件已安装,但识别不到正确的android studio路径,是因为Android Studio路径已改变,需要我们手动指定下:

flutter config --android-sdk /path/to/android/sdk
flutter config --android-studio-dir /path/to/android/studio
  • 此时再执行flutter doctor,会发现都搞定了。
    image.png

3. 配置安卓模拟器

  • 最新版本的包是自动配置了一个安卓模拟器,如果没配置,我们可以手动配置一下:

  • 3.1 打开AndroidStudio,右上角找到模拟器管理:

    image.png

  • 3.2 创建设备:


    Flutter入门一: 环境搭建_第8张图片
    image.png
  • 3.3 选择设备:


    Flutter入门一: 环境搭建_第9张图片
    image.png
  • 3.4 选择系统并下载


    Flutter入门一: 环境搭建_第10张图片
    image.png

三、 Xcode和VSCode

  • Xcode在Flutter最新版本中,是自动配置成功的
  • VSCode,我们也只需要在插件库手动搜索和安装Flutter插件即可

运行flutter doctor,都是绿勾,就表示配置成功

Flutter入门一: 环境搭建_第11张图片
image.png


本节仅做一个环境搭建简单记录,其实官方文档都讲得非常详细了。如果后续需要其他坑点,也会在本节进行补充记录

下一节,Flutter入门二:熟悉Widget、文字样式、ListView

你可能感兴趣的:(Flutter入门一: 环境搭建)