1 . 本地环境的要求

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

2 . 安装步骤

第一步 : 安裝Java SDK

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

frc 0477c7829aadde247ca1611cd65e89ee - flutter基础系列01---flutter环境搭建
Image.png

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

frc a234ed6ced7130f24c92db8aec8f2d05 - flutter基础系列01---flutter环境搭建
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) 稳定版本 , 推荐使用, 稳定版本

    frc c22fa66fe284576c0d09fa52057e2075 - flutter基础系列01---flutter环境搭建
    Image.png
  • Beta channel (Windows) 最新版 , 最新版会有很多测试功能, 但是有些功能支持度不高

    frc 55af15dd4401fce19f4b5b3e0425074f - flutter基础系列01---flutter环境搭建
    Image.png
  • Dev channel (Windows) 开发板, 开发板会有很多自定义的设置, 但是这个会有很多都是缺失的, 非熟练使用flutter的人员, 切勿使用这个版本

    frc 8b53540792092a6fddc0212f6ff53dd9 - flutter基础系列01---flutter环境搭建
    Image.png
  • Master channel 主版本, 安装捆绑包不可用于master。但是,您可以通过克隆主版本,然后触发SDK依赖项的下载,直接从Github repo获取SDK:

    frc a459af3ee905a16688aea6b51af5940f - flutter基础系列01---flutter环境搭建
    Image.png
在下载完flutter SDK后 , 我们只需要将Flutter SDK 直接解压到Flutter文件夹即可 , 注意路径不能有中文
frc 60bf5fe25bec2338313ab5d52fb25c90 - flutter基础系列01---flutter环境搭建
Image.png

frc ba32917312d65b51696c0b24ecebc730 - flutter基础系列01---flutter环境搭建
Image.png

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

frc 14589a12acf6fa1ffb0184fc199a57ea - flutter基础系列01---flutter环境搭建
Image.png

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

frc 77ad969b8e7263eb8cb075e1fe8ca6db - flutter基础系列01---flutter环境搭建
1df88be70eba23676ccb3485edd769d.png

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

frc 2ec65b875f9d5f88e986f4786b1616bb - flutter基础系列01---flutter环境搭建
Image.png
可能会出现的问题
  • 出现以上即可完成flutter配置 , 输入flutter命令后 , 命令行没有反应 , 可试试第一 : 重启电脑 , 第二 : 添加用户配置环境变量
FLUTTER_STORAGE_BASE_URL = https://storage.flutter-io.cn
PUB_HOSTED_URL = https://pub.flutter-io.cn
frc a0c648428800cd227e1003b9d8ca1f45 - flutter基础系列01---flutter环境搭建
Image.png
frc 6a5c5a42c599d7dcd76350a08fb244ee - flutter基础系列01---flutter环境搭建
Image.png

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

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

frc 2ec65b875f9d5f88e986f4786b1616bb - flutter基础系列01---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 , 在配置中添加插件

    frc 71d10e74e4f847b40803f7b115f91730 - flutter基础系列01---flutter环境搭建
    Image.png
    frc 4f29f9d6ed4dc8c2631528b2eb9a63c1 - flutter基础系列01---flutter环境搭建
    Image.png

    然后安装这个插件

    frc 3884ec8bc37c9d7851a5bb8329bdc994 - flutter基础系列01---flutter环境搭建
    Image.png
  • 安装好flutter插件后 , 重启编译器即可完成AndroidStudio的flutter插件安装 , 然后我们 , 在 Android Studio新建我们的Flutter文件

    frc 2b400135a6c804fe74a3f734244e2c57 - flutter基础系列01---flutter环境搭建
    Image.png

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

    frc 7bd5671d65ba71f6bedf9bb6f913591a - flutter基础系列01---flutter环境搭建
    Image.png

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

frc ff54b6f901c8fa7094662b2509fdc98f - flutter基础系列01---flutter环境搭建
Image.png

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

frc 1d0b0022d35fd2afafada116c27771af - flutter基础系列01---flutter环境搭建
Image.png

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

frc 2de7b597331603ef3cc2cf84be2b8fed - flutter基础系列01---flutter环境搭建
Image.png

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

frc 3563cb0812d3b75845f871acdaca20c2 - flutter基础系列01---flutter环境搭建
Image.png

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

frc e89524bc5be1a4b640a73b539ee8e8fc - flutter基础系列01---flutter环境搭建
Image.png

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

frc 70f9355972061e3f8e441a48dc7e96f6 - flutter基础系列01---flutter环境搭建
Image.png
frc b718b8f8a78b5b4e4fc1ff164a9281d4 - flutter基础系列01---flutter环境搭建
Image.png
frc 01649ed99d352a3fe7224b679996086d - flutter基础系列01---flutter环境搭建
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虚拟机 , 点击右下角的红色小框框

frc 004704f83ff5b72b2f48fac01a654967 - flutter基础系列01---flutter环境搭建
Image.png

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

frc 46ad23f369a41cadbad69492f4506e81 - flutter基础系列01---flutter环境搭建
Image.png
flutter run

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

frc d6b5cc5708e896523cf9c5782caaab28 - flutter基础系列01---flutter环境搭建
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方面的问题

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