dart&Flutter开发环境配置及创建项目

学Flutter先要学习Dart语言 (都是谷歌开发的语言)

一、Dart

  1. Dart介绍

Dart是由谷歌开发的计算机编程语言,它可以用于web、服务器、移动应用和物联网等领域的开发
Dart 诞生于年,号称起到javaScript/但是过去的几年中一直不温不火。知道Flutter的出现人们重新重视
要学习Flutter的话我们必须首先得会Dart。

官方文档https://dart.dev/get-dart
windows(推荐):
http://www.gekorm.com/dart-windows
如果mac电脑没有安装brew这个工具首先第一步需要安装它:https://brew.sh/
brew tap dart-lang/dart
brew install dart

Dart 开发工具有很多:IntellIJ IDEA、WebStorm、Atom、Vscode等
这里用的是Vscode中配置Dart

官方:https://dart.dev/

  1. 配置Dart

Dart环境搭建:
要在我们本地开发Dart程序的话首先需要安装Dart Sdk(如果用于flutter开发 只需要下载flutter SDK就行,自带Dart Sdk,但是只是单独学习运行Dart,要配置Dart SDK)

Dart SDK下载路径:http://www.cndartlang.com/920.html
dart&Flutter开发环境配置及创建项目_第1张图片

  1. 下载后解压

dart&Flutter开发环境配置及创建项目_第2张图片

  1. 在系统环境变量中 配置dart-sdk/bin

dart&Flutter开发环境配置及创建项目_第3张图片

  1. 命令行中输入 dart --versions(是否配置成功)

dart&Flutter开发环境配置及创建项目_第4张图片

  1. 打开vscode

  2. 找到vscode插件安装dart(我已经安装过了)

dart&Flutter开发环境配置及创建项目_第5张图片

  1. 找到vscode插件安装code runner Code Runner 可以运行我们的文件 (我已经安装过了)

dart&Flutter开发环境配置及创建项目_第6张图片

  1. 创建.dart的项目文件比如 index.dart 敲打Dart代码 右键点击Run Code

dart&Flutter开发环境配置及创建项目_第7张图片

  1. 输出台输出

dart&Flutter开发环境配置及创建项目_第8张图片
注:vscode输出乱码
请在 setting.json文件里,追加 “code-runner.runInTerminal”: true
请看 https://www.cnblogs.com/yiweiyihang/p/11232943.html

二、Flutter

  1. Flutter介绍

Flutter 支持跨平台 android、ios、window端
Flutter 中文官方 https://flutterchina.club/
Flutter SDK https://flutter.dev/docs/development/tools/sdk/releases#windows

  1. 下载正式版

dart&Flutter开发环境配置及创建项目_第9张图片

  1. 下载完成后解压

dart&Flutter开发环境配置及创建项目_第10张图片

  1. 把路径配置到系统变量path

dart&Flutter开发环境配置及创建项目_第11张图片
dart&Flutter开发环境配置及创建项目_第12张图片

  1. 建议继续添加两个系统变量(Flutter国内镜像)

PUB_HOSTED_URL : https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL : https://storage.flutter-io.cn
dart&Flutter开发环境配置及创建项目_第13张图片

dart&Flutter开发环境配置及创建项目_第14张图片

  1. cmd终端输入 flutter doctor

dart&Flutter开发环境配置及创建项目_第15张图片

  1. 执行flutter doctor --android-licenses 是 提示不停的输入 y 回车就行

dart&Flutter开发环境配置及创建项目_第16张图片

  1. 打开android studio 配置flutter

dart&Flutter开发环境配置及创建项目_第17张图片

  1. 输入Flutter 安装

dart&Flutter开发环境配置及创建项目_第18张图片

  1. 安装完成后 重新android studio

dart&Flutter开发环境配置及创建项目_第19张图片

  1. 创建第一个项目

dart&Flutter开发环境配置及创建项目_第20张图片

dart&Flutter开发环境配置及创建项目_第21张图片
dart&Flutter开发环境配置及创建项目_第22张图片

  1. 创建完成后 需要重新打开 不重新打开无法启动程序

dart&Flutter开发环境配置及创建项目_第23张图片
dart&Flutter开发环境配置及创建项目_第24张图片

你可能感兴趣的:(dart&Flutter开发环境配置及创建项目)