Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >《Flutter》-- 2.Windows系统下搭建开发环境

《Flutter》-- 2.Windows系统下搭建开发环境

作者头像
爱学习的程序媛
发布于 2022-04-07 08:19:53
发布于 2022-04-07 08:19:53
2K00
代码可运行
举报
文章被收录于专栏:学习/读书笔记学习/读书笔记
运行总次数:0
代码可运行

参阅书籍:

Flutter跨平台开发入门与实践》-- 向治洪(著)

《基于Android Studio的案例教程》-- 宋三华(著)

2. Windows系统下搭建开发环境

学习Flutter,推荐使用mac OS系统,因个人是Windows系统的电脑,暂时只进行Android环境的搭建。开发工具可以使用Android Studio或VS Code,这里使用Android Studio,需要先安装配置JDK。

2.1 JDK
2.1.1 下载

在Oracle官网中选择对应版本进行下载。

2.1.2 安装

和安装其他软件类似,双击安装程序,然后基本下一步下一步,直到安装完成。

2.1.3 配置环境变量

需要将JDK的安装路径(例如:C:\Program Files\Java\jdk-11.0.6\bin)配置到环境变量中,然后打开cmd运行窗口,输入“java”,若能看到Java命令的帮助信息,说明JDK环境变量设置成功。

2.2 Android Studio
2.2.1 下载

在官网(https://developer.android.google.cn)中下载。

2.2.2 安装

程序下载完成后,双击安装,单击“Next”按钮,按照默认选项安装即可。

安装完成后,运行Android Studio程序,在弹出的对话框中选择“Do not import settings”单选按钮,单击“OK”按钮。

因为网络问题,Android Studio会提示设置代理服务器,单击“Cancel”按钮。

弹出欢迎界面后,按照默认提示,一路单击“Next”按钮,等SDK下载完成后,单击“Finish”按钮。

2.2.3 配置

安装完成后,进入Android Studio建立/导入项目的界面,先配置Android模拟器。

选择Configure -> SDK Manager,在弹出框中选中需要的Android平台,单击“Apply”按钮,确认后进行下载。

选择Configure -> AVD Manager,在弹出框中单击“+ Create Virtual Device...”按钮,进入虚拟机的硬件信息选择界面。

左侧选择Phone,中间选择Pixel 2,单击“Next”按钮,进入AVD对应的硬件产品类型界面。

选择要下载的Android系统镜像文件(例如:Oreo 27),单击Download进行下载,下载完成后单击“Next”按钮,进入设置对应虚拟系统的外观信息界面。

可以设置虚拟机的名称、屏幕显示方式,然后单击“Finish”按钮完成虚拟机的设置。

单击Actions列的三角启动按钮启动虚拟机。

2.3 Flutter
2.3.1 下载

在Flutter官网(https://flutter.dev/docs/get-started/install/windows)进行下载。

2.3.2 配置

将下载的压缩文件解压到某个位置(看作是安装位置),然后将该位置的路径配置到环境变量中。

然后在cmd命令窗口中执行“flutter doctor”命令对环境进行初始化。

然后在Android Studio中安装Flutter和Dart插件。

然后需要把Flutter SDK path和Dart SDK path配置到Android Studio中。

注:

1. 不要将Flutter SDK安装/解压到需要高级权限的路径上,例如C:\Program Files或C:\Program Files (x86)。

2. 因为网络原因,有时候直接从官方默认地址拉取Flutter项目所需的依赖包会失败,Flutter官网为中国开发者搭建了临时镜像,可以在用户变量中进行添加。

FLUTTER_STORAGE_BASE_URL表示Flutter SDK的初始化地址,PUB_HOSTED_URL表示pub包下载的地址。

官方默认地址:

FLUTTER_STORAGE_BASE_URL=https://storage.googleapis.com

PUB_HOSTED_URL=https://pub.dartlang.org

2.4 创建第一个Flutter项目

选择file -> New -> New Flutter Project...,进入创建项目界面。

选择Flutter Application,单击“Next”按钮,进入项目配置界面。

可以修改项目名称、项目放置位置、项目描述,然后单击“Next”按钮,进入包名设置界面。

修改包名后,单击“Finish”按钮,项目创建完成。

单击运行按钮,在模拟器中可以看到运行的项目。

2.5 项目结构

在Flutter应用开发中,图片、静态配置和资源都可以放在assets目录下。

2.6 热重载

Flutter的热重载功能可以帮助开发者在不重新启动应用的情况下,快速地构建用户界面、添加功能以及修复漏洞。

在Flutter的热重载操作中,通过将更新后的源代码注入正在运行的Dart虚拟机即可实现热重载。在虚拟机使用新的字段和函数更新类后,Flutter框架会自动重新构建应用的Widget树,并刷新效果。

2.7 运行模式

Flutter一共提供了3种运行模式,分别是Debug、Release和Profile模式。

Debug模式又叫调试模式,主要用于软件编写过程中,可以同时在物理设备、仿真器或模拟器上运行。默认情况下,使用flutter run命令运行程序时就是使用的Debug模式。

Release模式又叫发布模式,主要用在应用发布过程中,只能在物理设备上运行,不能在模拟器上运行。使用flutter run--release命令运行程序时就是使用的Release模式。

Profile模式又叫分析模式,主要用于应用性能分析,只能在物理设备上运行,不能在模拟器上运行。

2.8 Flutter常用命令

1)创建项目:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
flutter create <项目名称>

2)查看本地版本:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
flutter channel

3)切换版本:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
flutter channel <版本名称>

4)开启Flutter对桌面和Web的支持:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
flutter config --enable-windows-desktop

5)升级Flutter SDK和依赖包:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
flutter upgrade

6)只升级依赖包:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
flutter packages get 
flutter packages upgrade
2.9 Flutter包管理

一个完整的应用往往会依赖很多的第三方包。在原生Android开发中,通常使用Gradle来管理依赖包,在iOS中则使用Cocoapods或Carthage来管理依赖包。对于Flutter,可以使用配置文件pubspec.yaml来管理第三方依赖包。

pubspec.yaml支持多种方式的插件依赖,如常见的Pub依赖,Git依赖和本地依赖。

在pubspec.yaml配置的dependencies节点中添加需要依赖的第三方插件,在命令行中输入flutter packages get命令即可下载依赖的插件。

2.10 安装配置VS Code

除了Android Studio外,VS Code也是官方推荐的一款可视化Flutter开发工具。

2.10.1 安装

在官网(https://code.visualstudio.com/Download)中下载对应安装包,和安装其他软件类似,基本下一步下一步,直到安装完成。

2.10.2 安装Flutter和Dart插件

点击左侧的

(Extensions)按钮,搜索Flutter和Dart进行安装。

2.10.3 创建一个Flutter项目

选择 View -> Command Palette... ,在弹出框中选择Flutter: New Application Project。

然后选择放置项目的目录。

最后在弹出框中修改项目名称,按回车创建项目。

2.10.4 运行项目

运行前需打开模拟器。

可以在终端输入flutter run命令运行项目。

修改main.dart中的代码,保存后,在终端输入r,实现热重载。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-04-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 爱学习的程序媛 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
编辑精选文章
换一批
【Flutter】Flutter 混合开发 ( 简介 | Flutter 混合开发集成步骤 | 创建 Flutter Module )
开发手机应用时 , 有时一个完整的应用 , 有些使用 Native 原生实现 , 有些使用前端小程序实现 , 有些部分使用 Flutter 实现 ;
韩曙亮
2023/03/29
2.7K0
【Flutter】Flutter 混合开发 ( 简介 | Flutter 混合开发集成步骤 | 创建 Flutter Module )
flutter入门2——环境搭建
学习 flutter 之前,我们要先安装 flutter 环境,保证可以创建 flutter 项目,可以查看模拟器,可以热重载等。在看本文之前,最好先通读下官方安装文档:https://docs.flutter.dev/get-started/install/macos/desktop
蓓蕾心晴
2024/03/08
3210
Flutter 第一个程序Hello World!
  Flutter实际上在我学习Android之前就已经听说过了,不过那时候的Flutter还是初始版本,并不如原生,虽说有跨平台的优势,但也只是了解而已,没有去正式使用,那么为什么又要学习了呢?
晨曦_LLW
2022/09/09
1.4K0
Flutter 第一个程序Hello World!
【Flutter】Flutter Gallery 官方示例简介 ( 项目简介 | 工程构建 )
发现一个很强的 Flutter 开源项目 , 由 Flutter 官方提供的 Flutter Gallery , 里面的很多功能可供参考 ;
韩曙亮
2023/03/29
1.9K0
【Flutter】Flutter Gallery 官方示例简介 ( 项目简介 | 工程构建 )
Flutter填坑全面总结
Flutter是一个新的跨平台开发的工具,博主也玩了一段时间,一步步的踩着坑摸石头过河,这其中受尽了各种各样的坑,各种谷歌,stackoverflow,Flutter官网等查资料,然而有些问题还是不能及时解决,于是就自己尝试着慢慢的摸索除了一些解决方案,在这里就系统的整理一下分享给大家,只希望大家给个鸡腿吃吃,今晚的晚餐就靠大家支持了!
AWeiLoveAndroid
2018/12/04
4K0
Flutter填坑全面总结
Flutter基础篇(9)-- 手把手教你用Flutter实现Web页面编写
本文版权归作者AWeiLoveAndroid所有,未经授权,严禁私自转载。转载请声明原文链接和作者信息。
AWeiLoveAndroid
2019/10/23
3.7K0
Flutter基础篇(9)-- 手把手教你用Flutter实现Web页面编写
吐血教程:搭建Flutter开发环境
Flutter开发环境的搭建比较烦琐,任何一个步骤失败都会导致最终环境搭建不能完成。Flutter支持三种环境:Windows、MacOS和Linux。这里我们主要讲解Windows及MacOS的环境搭建。
前端迷
2019/12/19
7.2K0
Flutter 初尝:从 Java 无缝过渡
准备阶段 下载 Flutter SDK 如果不能科学上网,可以声明 PUB_HOSTED_URL 和 FLUTTER_STORAGE_BASE_URL 两个环境变量,执行如下两行命令,是为了让 Flutter 在安装过程中使用国内的镜像: 1 2export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 新建 Flutter 文件夹,克隆 Flut
吴小龙同學
2018/04/28
2.2K0
Flutter 初尝:从 Java 无缝过渡
用 Flutter 开发鸿蒙 PC 应用
本文为开发者提供了使用 Flutter 开发鸿蒙 PC 应用的全面指南。涵盖开发环境搭建、项目创建与配置、界面设计、业务逻辑开发以及调试测试等环节,同时强调适配鸿蒙 PC 界面规范和调用系统能力的方法。还分享了实用的注意事项、相关资源链接,帮助开发者高效地使用Flutter构建鸿蒙 PC 应用。
徐建国
2025/05/19
4720
用 Flutter 开发鸿蒙 PC 应用
Flutter尝鲜:跨平台移动应用开发
随着移动App开发成本越来越高,近几年,移动跨平台开发的呼声层出不穷,如FaceBook的推出React-Native,大受欢迎,但其性能并不如人意。
开发的猫
2020/04/01
3.9K0
Flutter尝鲜:跨平台移动应用开发
搭建Flutter开发环境的详细教程
6. dart SDK在 flutter/bin/cache/dart-sdk
用户6297767
2023/11/21
4140
搭建Flutter开发环境的详细教程
Flutter | 包管理
​ 在日常开发中,很多时候需要用到第三方的 SDK ,这些 SDK 可能会被很多个项目用到,因此可以将这些代码单独抽到一个模块中,使用的时候只需要集成对于的模块即可,
345
2022/02/11
1.1K0
Flutter | 包管理
搭建Flutter开发环境
•操作系统:macOS(64 位)•磁盘空间:2.8 GB(不包含 IDE 或其余工具所需要的磁盘空间)•命令工具:Flutter 需要你的开发环境中已经配置了以下命令行工具。
用户1974410
2022/09/20
2.4K0
搭建Flutter开发环境
【Flutter】362- 让前端开发者失业的技术,Flutter Web 初体验
Flutter 是一种新型的 “客户端” 技术。它的最终目标是替代包含几乎所有平台的开发:iOS,Android,Web,桌面;做到了一次编写,多处运行。掌握 Flutter web 可能是 Web 前端开发者翻盘的唯一机会。
pingan8787
2019/09/30
2.4K0
Flutter基础-环境搭建及demo运行
Flutter是一款谷歌的用以同时在 iOS 和 Android 上制作高质量原生界面的移动应用UI框架.目前谷歌是已发布了 Flutter Beta 版,同时也提供了多个 Sample Project 供学习. Flutter 主要有着快速开发、有表现力及灵活的UI、原生表现等特点.
猿哥
2019/03/13
3.6K0
浅谈跨平台框架 Flutter 的搭建与运行
Flutter是Google推出的跨平台的解决方案,用以帮助开发者在 Android 和 iOS 两个平台开发高质量原生应用的全新移动 UI 框架。 之前我们为大家介绍了《跨平台框架Flutter的优势与结构》,概括了Flutter选择Dart语言的必要性及其自底而上的框架结构,大家可以点击标题链接来回顾前文。在本文中,我们将带大家进一步了解Flutter的搭建与运行。
个推
2019/05/23
4.4K0
浅谈跨平台框架 Flutter 的搭建与运行
「译」为 JavaScript 开发者准备的 Flutter 指南
Flutter 是一款跨平台的移动应用 SDK,可通过同一套代码构建高性能,高保真的 iOS 和 Android 应用。
三毛
2023/06/09
1.7K0
「译」为 JavaScript 开发者准备的 Flutter 指南
Flutter学习总结系列----第一章、Flutter基础全面详解
版权声明:本文为博主原创文章,未经博主允许不得转载。https://www.jianshu.com/p/2c9867e737a1
AWeiLoveAndroid
2018/09/03
2.4K0
Flutter学习总结系列----第一章、Flutter基础全面详解
依赖管理(二):第三方组件库在Flutter中要如何管理
前面的文章中,我介绍了Flutter工程的资源管理机制。在Flutter中,资源采用先声明后使用的机制,在pubspec.yaml显示地声明资源路径后,才可以使用。
拉维
2019/08/19
3.8K0
依赖管理(二):第三方组件库在Flutter中要如何管理
React Native学习笔记(二)—— 概要、开发环境搭建、第一个React Navite程序
在移动端开发项目中。开发资源不够时,同时由两个团队维护安卓和IOS两套原生APP是成本很高的。此时,就需要选择一个同时支持多平台的客户端开发框架,能够使用一套代码,编译出多平台的APP。
张果
2023/04/01
4.1K0
React Native学习笔记(二)—— 概要、开发环境搭建、第一个React Navite程序
推荐阅读
相关推荐
【Flutter】Flutter 混合开发 ( 简介 | Flutter 混合开发集成步骤 | 创建 Flutter Module )
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验