Flutter环境搭建

本文主要介绍Flutter在window上环境搭建步骤,并在此基础上运行第一个简单程序。

使用镜像

由于某些不可描述的原因,国内使用Flutter有时会受到限制,Flutter官网为中国开发者搭建了临时镜像,请选择其中一个镜像加入到用户环境中:

Flutter 社区

FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn
PUB_HOSTED_URL: https://pub.flutter-io.cn

清华大学 TUNA 协会

FLUTTER_STORAGE_BASE_URL: https://mirrors.tuna.tsinghua.edu.cn/flutter
PUB_HOSTED_URL: https://mirrors.tuna.tsinghua.edu.cn/dart-pub

腾讯云开源镜像站

FLUTTER_STORAGE_BASE_URL: https://mirrors.cloud.tencent.com/dart-pub
PUB_HOSTED_URL: https://mirrors.cloud.tencent.com/flutter

更多镜像请参考Flutter官网

Windows上设置环境变量方法(Windows 10为例):
设置环境变量

  1. 打开环境变量设置页面,参考这里
  2. 点击 “新建” ,新建用户环境变量
  3. 分别建立“PUB_HOSTED_URL” 和 “FLUTTER_STORAGE_BASE_URL” 的环境变量。

获取和安装Flutter SDK

  1. 安装Git, 参考官网教程

  2. 下载安装包:Flutter官网 或者 Flutter Github

  3. 将安装包ZIP解压到任意目录,我是放到目录 “C:\Flutter\flutter_SDK” 下

  4. 将步骤2中SDK目录加入到环境变量的Path中,入下图:
    设置SDK环境变量

  5. 在命令行中敲入 “flutter --version”, 检查flutter是否配置成功

  6. 运行"flutter doctor"检查是否需要安装任何依赖项来完成安装:
    运行结果
    从本次安装运行结果看出,需要下载Flutter匹配的SDK和build tools, 同时,需要Android Studio安装Flutter和Dart插件,直接在Android Studio插件中按关键字“Flutter”和“Dart”下载官方插件。

罗列几个常用flutter命令:

flutter channel 查看flutter分支
flutter --version 查看flutter版本
flutter upgrade 更新flutter

Flutter初体验(Android Studio)

创建新应用

  1. 选择 File>New Flutter Project
  2. 选择 Flutter application 作为 project 类型, 然后点击 Next
  3. 输入项目名称 (如 myapp), 然后点击 Next
  4. 点击 Finish
    通过上述步骤,Android Studio会为我们创建一个简单的

运行应用程序

  1. 运行AVD中虚拟设备或者通过USB连接手机(打开USB调试)
  2. 点击Android Studio工具栏中的Run按钮,程序编译完成后再设备中运行。
  3. 默认程序是一个计数器,没点击一次按钮就会加1,效果如下:
    在这里插入图片描述

体验热重载

Flutter在开发阶段使用JIT模式编译,因此可以支持热重载来提示我们的开发效率,类似于android开发中的"Instant Run",我们可以通过如下两个方法体验热重载:

  1. 修改程序后直接保存
  2. 点击工具栏闪电图标 “Hot Restart”
    下面我们将Actionbar文本由“Flutter Demo Home Page” 修改为 “My First Flutter Demo”
    热重载效果

参考资料
https://flutterchina.club/get-started/test-drive/#androidsstudio
https://flutter.cn/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值