如何搭建flutter开发环境

学习Flutter,首先需要搭建好Flutter的开发环境,下面我将一步步带领大家搭建开发环境并且成功运行flutter项目。

一、系统基本要求

操作系统:windows7以上64位操作系统
git环境:flutter需要git环境的支持

二、Java环境安装

因为Flutter是基于Android的,所以要安装Java环境

  1. Java环境下载地址:https://www.oracle.com/java/technologies/downloads/#java8-windows
  2. 根据自己的系统选择对应文件类型进行安装
    如何搭建flutter开发环境_第1张图片
  3. 安在终端输入java后,可以看到以下内容的话就代表Java环境安装成功了如何搭建flutter开发环境_第2张图片

三、安装Flutter SDK

  1. flutter下载地址:https://docs.flutter.dev/release/archive#windows
  2. 选择你所需要的flutter版本,我选择的是最新版
    如何搭建flutter开发环境_第3张图片
  3. 下载并解压,打开解压后的文件会看到flutter_console文件(提示:后面使用flutter命令时,需要通过双击这个文件进来再执行flutter相关命令。)
    如何搭建flutter开发环境_第4张图片
  4. 双击flutter_console文件,然后在命令行输入flutter -h后可以看到flutter相关命令,此时代表flutter安装成功了如何搭建flutter开发环境_第5张图片
  5. flutter虽然安装成功了,但我们需要通过flutter doctor命令来检测一下flutter如何搭建flutter开发环境_第6张图片
    结果显示: Android Studio没有安装,所以需要安装Android Studio

四、安装Android Studio

  1. 下载地址: https://developer.android.google.cn/studio

  2. 然后直接点击zip文件进行下载并解压
    如何搭建flutter开发环境_第7张图片

  3. 解压后进入以下文件夹,点击studio64应用程序进入Android Studio如何搭建flutter开发环境_第8张图片

  4. 接着不断点击下一步后,然后选择接受安装,最后点击Finsh进行下载相关组件。如何搭建flutter开发环境_第9张图片

  5. 相关组件下载完成后,在Android Studio中安装flutter如何搭建flutter开发环境_第10张图片

  6. 安装完成后,重启一下Android Studio
    如何搭建flutter开发环境_第11张图片

  7. 我们继续执行flutter doctor,出现cmdline-tools component is missing这样的报错,所以需要在Android Studio中下载最新的SDK Tools
    如何搭建flutter开发环境_第12张图片

  8. Android Studio中下载最新的SDK Tools
    如何搭建flutter开发环境_第13张图片
    如何搭建flutter开发环境_第14张图片

  9. 继续执行flutter doctor,出现Some Android licenses not accepted. 按照运行flutter doctor --android-licenses,一直选择Y直至完成。如何搭建flutter开发环境_第15张图片
    接下来,我们就可以启动flutter项目了

五、启动flutter项目

  1. 选择新建一个flutter项目

  2. 选择Flutter SDK安装位置(第三步骤)
    如何搭建flutter开发环境_第16张图片

  3. 输入项目名称和选择创建位置(最好不要出现中文,否则在启动项目的时候可能出错),然后点击creat
    如何搭建flutter开发环境_第17张图片

  4. 创建成功后会自动打开main.dart文件,此时说明flutter项目创建成功了。如何搭建flutter开发环境_第18张图片如何搭建flutter开发环境_第19张图片

  5. 开启虚拟机并启动项目
    如何搭建flutter开发环境_第20张图片如何搭建flutter开发环境_第21张图片
    如何搭建flutter开发环境_第22张图片
    如何搭建flutter开发环境_第23张图片
    如何搭建flutter开发环境_第24张图片

  6. 可能启动的非常慢,可以修改镜像源解决这个问题
    (1)在项目中更改build.gradle中的镜像
    如何搭建flutter开发环境_第25张图片
    (2)同时也要在Flutter SDK中更换这两个文件的镜像
    如何搭建flutter开发环境_第26张图片
    如何搭建flutter开发环境_第27张图片
    如何搭建flutter开发环境_第28张图片

  7. 最后重新启动一下项目就可以看到flutter自带的例子,点击加号可以增加数值。如何搭建flutter开发环境_第29张图片

到此,一个flutter项目就跑起来了!你的成功了吗?

你可能感兴趣的:(flutter,android,android,studio,前端框架)