flutter基础系列01---flutter环境搭建

1 . 本地环境的要求

1. window10 64位 / window7 64位
2. 所需空間最好5G , 最低配置3G

2 . 安装步骤

第一步 : 安裝Java SDK

百度搜索 Java SDK , 并进入下面红色框框的java官网

Image.png

进来java官网后 , 我们往下拉到以下位置 , 并且点击同意[Accept License Agreement] , 这个选项 , 否则无法下载 , 然后选择我们所需要安装的32位/64位的java SDK , 点击下面的下载链接后 , 可能会叫我们登录Oracle账号 , 我们可以选择不登录 , SDK也会自动下载的

Image.png

然后安装过程 , 网上的教程很多了 , 这里不做赘述 , 下面是我按照网上搭建的java SDK教程

• window7 64位环境下搭建Java SDK 教程 , 引用以下文章https://blog.csdn.net/technologyleader/article/details/82850893
• window10 64位环境Java SDK 教程 , 引用以下文章
  https://www.cnblogs.com/nebie/p/Howie.html

安装完Java SDK后 , 就开始安装Flutter SDK 了

第二步 : 安装Flutter SDK

安装flutter , 需要一个翻墙的环境 , 不然下载会很慢 , 也可能会在flutter配置过程中出错

在flutter官网下载 flutter
https://flutter.dev/docs/development/tools/sdk/releases#windows
在这个网址下面我们可以看到有四个版本

第一个 : Stable channel (Windows) 稳定版本, 推荐使用, 稳定版本
第二个 : Beta channel (Windows) 最新版, 最新版会有很多测试功能, 但是有些功能支持度不高
第三个 : Dev channel (Windows) 开发板, 开发板会有很多自定义的设置, 但是这个会有很多都是缺失的, 非熟练使用flutter的人员, 切勿使用这个版本
第四个 : Master channel 主版本, 安装捆绑包不可用于master。但是，您可以通过克隆主版本，然后触发SDK依赖项的下载，直接从Github repo获取SDK：

• Stable channel (Windows) 稳定版本 , 推荐使用, 稳定版本
  

  Image.png

• Beta channel (Windows) 最新版 , 最新版会有很多测试功能, 但是有些功能支持度不高
  

  Image.png

• Dev channel (Windows) 开发板, 开发板会有很多自定义的设置, 但是这个会有很多都是缺失的, 非熟练使用flutter的人员, 切勿使用这个版本
  

  Image.png

• Master channel 主版本, 安装捆绑包不可用于master。但是，您可以通过克隆主版本，然后触发SDK依赖项的下载，直接从Github repo获取SDK：

  
  
  

  Image.png

在下载完flutter SDK后 , 我们只需要将Flutter SDK 直接解压到Flutter文件夹即可 , 注意路径不能有中文

Image.png

Image.png

然后我们打开解压后的flutter文件下的bin文件 , 并复制bin文件夹路径 , 添加到系统环境变量的path中

Image.png

在系统环境变量的path , 新加一个环境变量 , window7 用户在path添加的时候 , 注意在flutter的bin路径前后都要添加; , 英文状态的分号;

1df88be70eba23676ccb3485edd769d.png

在全局的cmd中或者git bash中使用命令 flutter

Image.png

可能会出现的问题

• 出现以上即可完成flutter配置 , 输入flutter命令后 , 命令行没有反应 , 可试试第一 : 重启电脑 , 第二 : 添加用户配置环境变量

FLUTTER_STORAGE_BASE_URL = https://storage.flutter-io.cn
PUB_HOSTED_URL = https://pub.flutter-io.cn

Image.png

Image.png

FLUTTER_STORAGE_BASE_URL和PUB_HOSTED_URL都是针对国内不能访问国外网络而设置的镜像

设置好后 , 我们再次在cmd输入flutter命令 ; 就可以出现了

Image.png

第三步 : 安装Android Studio , 具体的安装步骤可在网上进行查找安装

• 以下是我参考的安装教程
  Android studio的安装(https://www.cnblogs.com/xqz0618/p/install.html)

• 安装完Android Studio后 , 如果使用Android Studio工具进行flutter的话 , 就需要安装Android Studio 的flutter插件了 , 开始打开Android Studio , 在配置中添加插件
  

  Image.png
  

  Image.png
  
  
  然后安装这个插件
  

  Image.png

• 安装好flutter插件后 , 重启编译器即可完成AndroidStudio的flutter插件安装 , 然后我们 , 在 Android Studio新建我们的Flutter文件
  

  Image.png
  
  
  接下来会有四个选项给我们
  

  Image.png

这里有四个选项 ,
第一个是FlutterApp ,
第二个是Flutter插件 ,
第三个是FLutter包 ,
第四个是FLutter模块 ,
我们选择第一个 , 点击next

Image.png

这四个选项分别是
project name文件名;
Flutter SDK path FlutterSDK路径 , 通常会自动匹配上 , 如果个人有修改 , 可自定义
Project location 文件保存路径
Description 文件描述
设置好以上四个选项后 , 再次点击next

Image.png

点击Finish , 点击完后 , 会开始创建flutter工程

Image.png

这里可能会有 , 我们Android版本的安装 , 因为我提前安装好了 , 所以就会直接进来这个页面 , 进来这个页面后 , 我们需要打开我们的虚拟安卓手机

Image.png

这里的虚拟安卓手机 , 如果在安卓配置中没有下载会配置 , 这里是需要时间去设置的 ,

Image.png

打开虚拟机后 , 需要运行我们的文件 , 点击Run -> RUn "main.dart"

Image.png

Image.png

Image.png

一旦出现以上这两个页面即可配置成功 ,就可以在Android Studio开始开发flutter项目了

倘若我们是在vs code进行开发Flutter 项目 , 就需要在vs code进行配置Flutter插件 , 同时建议使用vs code进行开发 , 所以使用Android Studio去新建项目 , 对于前端开发人员是不建议的 , 下面开始介绍vs code工具进行flutter开发

打开vs code 安装flutter插件和dart插件 , 但是一般我们安装flutter插件的时候 , vs code就会自动安装dart插件的 , 安装完flutter插件后 , 就重启vs code , 再vs code命令行输入

flutter create demo001

一般运行这个文件就可以完成flutter文件的创建了 , 这时候我们打开lib -> main.dart , 里面就是我们的页面内容 , 并且在vs code打开Android虚拟机 , 点击右下角的红色小框框

Image.png

然后我们看到这里 , 这里的虚拟机 , 需要在Android Studio里面配置我们的虚拟机 , 这里就会自动出现了 , 这里最后不要使用Create New这个区新建虚拟机 , 最好在Android Studio里面新建号虚拟机后 , 然后再到这里选择我们的虚拟机 , 点击它 , 即可打开虚拟机,然后在命令行 , 输

Image.png

flutter run

出现这些信息即可开启成功

Image.png

其中红色框框这句话表示
要在运行时热重新加载更改，请按“R”。要热重启（和重建状态），请按“R”。
Android SDK上为x86构建的Observatory Debugger和Profiler可从以下网址获得： http://127.0.0.1:52211/lmvblxop8fe=/
有关更详细的帮助信息，请按“H”。要分离，请按“D”；要退出，请按“Q”。
还有一个就是 按 "O" 这个表示 , 在ios端显示 , 在Android端显示
以上就是flutter的环境搭建以及helloword的运行

具体问题在评论 , 尽情提问 , 小编很乐意跟大家讨论Flutter方面的问题