Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

下一步公司的开发项目可能会用到Flutter,所以先安装配置下。

系统要求

要安装并运行Flutter,您的开发环境必须满足以下最低要求:

  • 操作系统: Windows 7 或更高版本 (64-bit)
  • 磁盘空间: 400 MB (不包括Android Studio的磁盘空间).
  • 工具: Flutter 依赖下面这些命令行工具.
    • Git for Windows (Git命令行工具)

      如果已安装Git for Windows,请确保命令提示符或PowerShell中运行 git 命令,不然在后面运行flutter doctor时将出现Unable to find git in your PATH错误, 此时需要手动添加C:\Program Files\Git\binPath系统环境变量中。如果是32位的Windows系统,请将Program Files换成Program File (X86)

获取Flutter SDK

  1. 去flutter官网下载其最新可用的安装包,点击下载 ;

    注意,Flutter的渠道版本会不停变动,请以Flutter官网为准。另外,在中国大陆地区,要想正常获取安装包列表或下载安装包,可能需要翻墙,读者也可以去Flutter github项目下去下载安装包 。

  2. 将安装包zip解压到你想安装Flutter SDK的路径(如:C:\src\flutter;注意,不要将flutter安装到需要一些高权限的路径如C:\Program Files\)。

  3. 在Flutter安装目录的flutter文件下找到flutter_console.bat,双击运行并启动flutter命令行,接下来,你就可以在Flutter命令行运行flutter命令了。

更新环境变量

要在终端运行 flutter 命令, 你需要添加以下环境变量到系统PATH:

  • 转到 “控制面板>用户帐户>用户帐户>更改我的环境变量”
  • 在“用户变量”下检查是否有名为“Path”的条目:
    • 如果该条目存在, 追加 flutter\bin的全路径,使用 ; 作为分隔符.
    • 如果条目不存在, 创建一个新用户变量 Path ,然后将 flutter\bin的全路径作为它的值.
  • 在“用户变量”下检查是否有名为”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的条目,如果没有,也添加它们。
    PUB_HOSTED_URL https://pub.flutter-io.cn
    FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn

重启Windows以应用此更改

运行 flutter doctor

打开一个新的命令提示符或PowerShell窗口并运行以下命令以查看是否需要安装任何依赖项来完成安装:

flutter doctor

此时遇到问题,报错

Error: The Flutter directory is not a clone of the GitHub project.
The flutter tool requires Git in order to operate properly;
to set up Flutter, run the following command:
git clone -b beta https://github.com/flutter/flutter.git

又重新看了一遍搭建环境文档,都是按照流程操作的,不知道哪里出的问题。。

百度查了一些踩坑文档,发现解决办法:

把刚刚下载的Flutter安装包删掉,重新在想要安装的目录下运行 git clone -b beta https://github.com/flutter/flutter.git

完成后会生成一个Flutter文件夹,如果和开始Path的路径不一样,记得去重新更新变量Path的路径。

重新运行flutter doctor,正常。

一旦你安装了任何缺失的依赖,再次运行flutter doctor命令来验证你是否已经正确地设置了。

输入flutter help在提示符下查看可用的工具。

创建新的应用

我用的是VS Code,下面就以VS Code为例。用Android Studio也类似。

  1. 启动 VS Code
  2. 调用 View>Command Palette…
  3. 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
  4. 输入 Project 名称 (如myapp), 然后按回车键
  5. 指定放置项目的位置,然后按蓝色的确定按钮
  6. 等待项目创建继续,并显示main.dart文件

上述命令创建一个Flutter项目,项目名为myapp,其中包含一个使用Material 组件的简单的演示应用程序。

在项目目录中,您的应用程序的代码位于 lib/main.dart

运行应用程序

  • 确保连接好手机设备,或者开启模拟器。(手机记得在设置里打开USB调试和USB安装)
  • 按 F5 键或调用Debug>Start Debugging
  • 等待应用程序启动
  • 如果一切正常,在应用程序建成功后,您应该在您的设备或模拟器上看到应用程序:

Windows下安装配置Flutter的更多相关文章

  1. 在windows下安装配置Ulipad

    在windows下安装配置Ulipad 今天推荐一款轻便的文本编辑器Ulipad,用来写一些小的Python脚本非常方便. Ulipad下载地址: https://github.com/limodou ...

  2. Windows下安装配置MongoDB

    Windows下安装配置MongoDB 一,介绍 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统.在高负载的情况下,添加更多的节点,可以保证服务器性能. MongoDB ...

  3. (转)windows 下安装配置 Nginx 详解

    windows 下安装配置 Nginx 详解 本文转自https://blog.csdn.net/kingscoming/article/details/79042874 nginx功能之一可以启动一 ...

  4. QT学习之windows下安装配置PyQt5

    windows下安装配置PyQt5 目录 为什么要学习QT 命令行安装PyQt5以及PyQt5-tools 配置QtDesigner.PyUIC及PyRcc 为什么要学习QT python下与界面开发 ...

  5. RabbitMQ学习在windows下安装配置

    RabbitMQ学习一. 在windows下安装配置 1.下载并安装erlang,http://www.erlang.org/download.html,最新版是R15B01(5.9.1).由于我机器 ...

  6. Windows下安装配置免安装MySQL5.7服务器

      Windows下安装配置免安装MySQL5.7服务器 1.下载.解压安装包 从MySQL官方网站上下载mysql-5.7.19-winx64.zip 下载完成后,把安装包解压到D:\DevSoft ...

  7. Windows下安装配置MySQL

    Windows下安装配置MySQL的基本步骤 一.MySQL下载 MySQL官方下载地址https://dev.mysql.com/downloads/mysql/5.7.html#downloads ...

  8. Windows下安装配置ant

    1.ant安装 请从官网下载ant的*.zip格式的安装包, Windows建议下载*.zip版本, Linux建议下载*.gz版本. 2.配置环境变量 解压之后,在Windows中配置环境变量, 在 ...

  9. 2、Windows下安装配置Redis

    windows下redis软件开源安装包挂载到github上,下面将详细介绍如何在windows下安装redis服务器 下载地址:https://github.com/MSOpenTech/redis ...

随机推荐

  1. 如何生成SSH key及查看SSH key

    只适用于Mac和windows下的Git Bash操作界面. 一.检查本地是否有SSH Key存在 在终端输入 ls -al ~/.ssh 如果终端输出的是: No such file or dire ...

  2. 浅谈jquery事件命名空间

    什么是jquery的事件命名空间? 先看如下简单代码: $("#btn").on("click.name1.name2",function(){ console ...

  3. 【消息中间件之RabbitMQ学习】-开篇-001

    写在前面的话 项目中因为要用到消息中间件,当初极力推荐RabbitMq.但因为种种原因,最终选型为java+mongodb自实现一套分布式的消.没有用RabbitMq工作过,实属遗憾.因为个人来说实在 ...

  4. 利用JQuery 解析MVC控制器传到前台的Json数据

    <script type="text/javascript"> function Getweb() { var name = $("#CityName&quo ...

  5. hdu 2824 欧拉函数 O(nlogn) 和O(n)

    裸题 O(nlogn): #include <cstdio> #include <iostream> #include <algorithm> using name ...

  6. fillder抓包工具详解

    https://www.cnblogs.com/yyhh/p/5140852.html

  7. .NET数据采集

    public string GetHttpData(string Url) { string sException = null; string sRslt = null; WebResponse o ...

  8. 【转存】阿里云服务器下 LAMP 环境配置 —— 基于 CentOS 6.3

    阿里云服务器下 LAMP 环境配置 —— 基于 CentOS 6.3  Posted on 2016年2月10日 by  学院君 1.Apache 配置 —————————————————– vi / ...

  9. centos7常用命令

    系统命令 shutdown -h now # 关机 shutdown -r now # 重启 reboot # 重启 systemctl status firewalld # 查看防火墙状态 syst ...

  10. jirba库的使用和好玩的词云

    1.jieba库基本介绍 (1).jieba库概述 jieba是优秀的中文分词第三方库 - 中文文本需要通过分词获得单个的词语         - jieba是优秀的中文分词第三方库,需要额外安装 - ...