天天看点

Flutter 学习(一)环境搭建以及开发工具配置1.为什么使用 Dart ?2.Dart环境搭建3. 启动AndroidStudio4.创建第一个flutter项目

随着APP的使用越来越多,快速开发APP显得越发重要,目前市面主流的flutter,uni-app,ReactNative。。。等,

本系列专题主要学习flutter,在学习flutter之前需要先学习Dart,为后面学习flutter打基础。

  • Flutter 学习(一)环境搭建以及开发工具配置
  • Flutter 学习(二)执行入口|变量|常量|数据类型|运算符|流程控制|关键字

1.为什么使用 Dart ?

Google及全球的其他开发者,使用 Dart 开发了一系列高质量、 关键的 iOS、Android 和 web 应用。 Dart 非常适合移动和 web 应用的开发。

Dart 是免费的并开源于 GitHub。

高效

Dart 语法清晰简洁,工具简单而强大。 输入检测可帮助您尽早识别细微错误。 Dart 拥有久经考验的 核心库(core libraries) 和一个已经拥有数以千计的 packages 生态系统

快速

Dart 提供提前编译优化,以在移动设备和 web 上实现可预测的高性能和快速启动。

可移植

Dart 可以编译成 ARM 和 x86 代码,因此 Dart 移动应用程序可以在 iOS,Android 及 更高版本上实现本地运行。 对于 web 应用程序,Dart 可以转换为 JavaScript。

易学

Dart 是面向对象的编程语言,语法风格对于许多现有的开发人员来说都很熟悉。 如果您已经了解 C++,C# 或 Java ,那么使用 Dart 也就是分分钟的事情。

响应式

Dart 可以便捷的进行响应式编程。由于快速对象分配和垃圾收集器的实现, 对于管理短期对象(比如 UI 小部件), Dart 更加高效。 Dart 可以通过 Future 和 Stream 的特性和API实现异步编程。

2.Dart环境搭建

2.1工具下载

  1. AndroidStudio 工具下载:https://developer.android.google.cn/studio/
  2. git 工具下载:https://git-scm.com/downloads

    如果git在官网下载的比较慢:https://npm.taobao.org/mirrors/git-for-windows/

2.2 环境配置

  • mac:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
           
  • Windows:
Flutter 学习(一)环境搭建以及开发工具配置1.为什么使用 Dart ?2.Dart环境搭建3. 启动AndroidStudio4.创建第一个flutter项目

2.3 下载flutter源码

2.3.1 创建一个目录,存放源码

官方源码:git clone https://github.com/flutter/flutter.git -b stable

如果拉github上面的代码很慢的话,可以拉码云上面映射的

git clone https://gitee.com/mirrors/Flutter.git -b stable

Flutter 学习(一)环境搭建以及开发工具配置1.为什么使用 Dart ?2.Dart环境搭建3. 启动AndroidStudio4.创建第一个flutter项目

2.3.2 配置系统环境

将flutter 的 bin 目录添加到path路径中

Flutter 学习(一)环境搭建以及开发工具配置1.为什么使用 Dart ?2.Dart环境搭建3. 启动AndroidStudio4.创建第一个flutter项目

2.3.3 win7无法使用flutter 的问题

https://www.microsoft.com/en-us/download/confirmation.aspx?id=54616

如果遇到powershell无法安装,显示:Windows Management Framework

https://www.microsoft.com/en-us/download/details.aspx?id=54616

2.4 使用flutter doctor命令

打开cmd窗口执行 flutter doctor 命令等待安装完成

Flutter 学习(一)环境搭建以及开发工具配置1.为什么使用 Dart ?2.Dart环境搭建3. 启动AndroidStudio4.创建第一个flutter项目
Flutter 学习(一)环境搭建以及开发工具配置1.为什么使用 Dart ?2.Dart环境搭建3. 启动AndroidStudio4.创建第一个flutter项目

2.5 修改下载源

我个人的安装路径:D:\flutter-workspace\Flutter\packages\flutter_tools\gradle\flutter.gradle

Flutter 学习(一)环境搭建以及开发工具配置1.为什么使用 Dart ?2.Dart环境搭建3. 启动AndroidStudio4.创建第一个flutter项目

修改内容

maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
maven { url 'http://download.flutter.io' }


private static final String DEFAULT_MAVEN_HOST = "https://storage.flutter-io.cn/download.flutter.io";
           

3. 启动AndroidStudio

3.1 下载flutter插件

3.2 下载dart插件

Flutter 学习(一)环境搭建以及开发工具配置1.为什么使用 Dart ?2.Dart环境搭建3. 启动AndroidStudio4.创建第一个flutter项目
Flutter 学习(一)环境搭建以及开发工具配置1.为什么使用 Dart ?2.Dart环境搭建3. 启动AndroidStudio4.创建第一个flutter项目
Flutter 学习(一)环境搭建以及开发工具配置1.为什么使用 Dart ?2.Dart环境搭建3. 启动AndroidStudio4.创建第一个flutter项目

如果下载不下来

离线下载flutter插件:https://plugins.jetbrains.com/plugin/9212-flutter/versions/stable

离线下载dart插件:https://plugins.jetbrains.com/plugin/6351-dart/versions/

4.创建第一个flutter项目

Flutter 学习(一)环境搭建以及开发工具配置1.为什么使用 Dart ?2.Dart环境搭建3. 启动AndroidStudio4.创建第一个flutter项目
Flutter 学习(一)环境搭建以及开发工具配置1.为什么使用 Dart ?2.Dart环境搭建3. 启动AndroidStudio4.创建第一个flutter项目
Flutter 学习(一)环境搭建以及开发工具配置1.为什么使用 Dart ?2.Dart环境搭建3. 启动AndroidStudio4.创建第一个flutter项目
Flutter 学习(一)环境搭建以及开发工具配置1.为什么使用 Dart ?2.Dart环境搭建3. 启动AndroidStudio4.创建第一个flutter项目

4.1 使用pub get 获取依赖

Flutter 学习(一)环境搭建以及开发工具配置1.为什么使用 Dart ?2.Dart环境搭建3. 启动AndroidStudio4.创建第一个flutter项目

4.2 编写helloworld

右键点击创建一个dart的文件,编写如下代码,然后右键鼠标运行代码,可以看到控制台打印成功

Flutter 学习(一)环境搭建以及开发工具配置1.为什么使用 Dart ?2.Dart环境搭建3. 启动AndroidStudio4.创建第一个flutter项目
Flutter 学习(一)环境搭建以及开发工具配置1.为什么使用 Dart ?2.Dart环境搭建3. 启动AndroidStudio4.创建第一个flutter项目