Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明
前言
上一篇文章我们搭建好了 Flutter 的开发环境。
Flutter 即学即用——01 环境搭建
这一篇我们通过 Flutter 的一个 Demo 来了解下 Flutter。
开发系统:MAC
IDE:Android Studio
目录
1. 创建一个 Flutter 项目
第一步:主界面点击创建 Flutter 项目
第一步:如果已经打开项目,则通过 File->New->New Flutter Project... 创建
第二步:默认选择 Flutter Application 即可,点击 Next
第三步:确定项目名称,这里默认即可,点击 Next
第四步:修改包名,推荐使用域名倒过来,修改好之后点击 Finish 就创建了
到此项目基本就创建完成了。
2. 运行项目
2.1 点击 IDE 运行按钮运行
依次表示 flutter 要安装的设备,启动的 flutter 页面,以及运行按钮。
点击运行按钮之后可以看到设备上面显示如下界面:
2.2 执行 flutter run 命令行运行
在 terminal 执行 flutter run 即可在对应设备运行 app。
如果有多个设备,terminal 会有提示。
从上面控制台的提示信息可以知道:
如果要每个设备都安装,执行 flutter run -d all
如果指定设备安装,执行 flutter run -d deviceId
Example:
如果只安装到三星手机 SM G9350,执行命令
flutter run -d c23b810e
即可。deviceId 就是对应设备第二列所显示的字符串。
3. 修改项目体会热重载功能
3.1 IDE 运行热重载功能体现
默认执行的结果
我们可以看到文件 main.dart 里面有如下代码
我们将这里面的 Flutter Demo Home Page 改为 My Home Page。
然后按 command+s 进行保存。
这时控制台会自动打印热重载信息。
同时设备会自动更新如下:
3.2 命令行运行热重载功能体现
通过 flutter run 运行的 flutter 项目。控制台会有下面提示:
上面说了要热重载改变按 r 键,要热重启,按 R 键。
接着上面的例子,我们修改 My Home Page 为 Run Page。
保存之后按 r 键。
可以看到控制台有热重载信息打印并且界面已经更新了。
4. 后记
虽然是重新记录,但是因为是在一台新设备上面操作。而且用的是 mac air,所以遇到各种坑。其中一个是由于网络原因导致每次运行都要下载 gradle 版本因此耗时巨大。比如下图:
跑一个 Hello World 的 Android 项目要 15 分钟
后面修改为本地 gradle。就好多了。
在同步或者下载 gradle 的时候,有时候可能需要等待很久。不建议直接点击 sync now,因为 gradle 一般都几百 M,如果网络不好,尤其使用手机热点的时候,会下载很久,而除了时间在增多,没有其他反馈。但是通过命令行 ./gradlew clean 或 ./gradlew assemble 可以看到下载 gradle 的时候会有一些白色的小圆点表示在下载中,有反馈,交互会好些。
另外可能另一种方式是直接浏览器下载下来压缩包,然后放到电脑对应位置。这个也是可以的。这边网上也有找了一下,不过文章位置说的是放到目的地,其实应该放在原始位置,让 IDE 去 unzip 到目的地。至少这边放到目的地 IDE 还是去重新下载了。而且下载后提示压缩包错误,估计是下载不完全或者其他的,这边就把之前单独下载的压缩包替换了一下,然后再运行就可以了。
这边的位置是/Users/nesger/.gradle/wrapper/dists/gradle-4.10.2-all/9fahxiiecdb76a5g3aw9oi8rv/,我把压缩包扔到这个里面再执行 gradlew 命令就可以了。打开/Users/nesger/.gradle/wrapper/dists/可以看到各个 gradle 版本。
Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明的更多相关文章
- Flutter 即学即用系列博客——08 MethodChannel 实现 Flutter 与原生通信
背景 前面我们讲了很多 Flutter 相关的知识点,但是我们并没有介绍怎样实现 Flutter 与原生的通信. 比如我在 Flutter UI 上面点击了一个按钮,我希望原生做一些处理,那么原生怎么 ...
- Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget
前言 上一篇我们对 Flutter UI 有了一个基本的了解. 这一篇我们通过自定义 Widget 来了解下如何写一个 Widget? 然而 Widget 有两个,StatelessWidget 和 ...
- Flutter 即学即用系列博客——04 Flutter UI 初窥
前面三篇可以算是一个小小的里程碑. 主要是介绍了 Flutter 环境的搭建.如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter. 这一篇我们来学习下 Flutte ...
- Flutter 即学即用系列博客——09 EventChannel 实现原生与 Flutter 通信(一)
前言 紧接着上一篇,这一篇我们讲一下原生怎么给 Flutter 发信号,即原生-> Flutter 还是通过 Flutter 官网的 Example 来讲解. 案例 接着上一次,这一次我们让原生 ...
- Flutter 即学即用系列博客——06 超实用 Widget 集锦
本篇文章我们来讲讲一些比较常用的 Widget. 大家验证的时候使用下面的代码替换 main.dart 代码,然后在 //TODO 语句返回下面常用 Widget 示例的代码. import 'pac ...
- Flutter 即学即用系列博客——03 在旧有项目引入 Flutter
前言 其实如果打算在实际项目中引入 Flutter,完全将旧有项目改造成纯 Flutter 项目的可能性比较小,更多的是在旧有项目引入 Flutter. 因此本篇我们就说一说如何在旧有项目引入 Flu ...
- Flutter 即学即用系列博客总结篇
前言 迟到的总结篇,其实大家看我之前发的系列博客最后一篇,发文时间是 3 月 29 日.距离现在快两个月了. 主要是因为有很多事情在忙,所以这篇就耽搁了. 今天终于可以跟大家会面了. 系列博客背景 F ...
- Flutter 即学即用系列博客——09 MethodChannel 实现原生与 Flutter 通信(二)
前言 上一篇我们讲解了如何通过 EventChannel 实现 Android -> Flutter 的通信. 并且也看到了 Flutter 内部 EventChannel 源码也是对 Meth ...
- Flutter 即学即用系列博客——10 混淆
前言 之前的博客我们都是在 debug 的模式下进行开发的. 实际发布到市场或者给到用户的都是 release 包. 而对于 Android 来说,release 包一个重要的步骤就是混淆. Andr ...
随机推荐
- 微信小程序-获取经纬度
微信小程序-获取经纬度 最近公司新功能 要求在外的市场人员 发送位置信息回来. 用的还是微信小程序开发.... 微信小程序 提供一个接口 getLocation 这个接口反回来的位置 相对实际位置 相 ...
- define 的全部使用方法
typedef的总结,以下是引用的内容(红色部分是我自己写的内容). 用途一: 定义一种类型的别名,而不只是简单的宏替换.可以用作同时声明指针型的多个对象.比如: char* pa, pb; // 这 ...
- 使用Iterator迭代器循环集合
1.Iterator迭代器用于遍历集合元素,获取迭代器可以使用. 2.Iterator提供了统一遍历集合元素的 方式 ,其提供了用于遍历集合的连个方法----- boolean hasNext()判 ...
- float之脱离文档流
所谓的文档流:指的是元素在排版过程中,元素自动从左到右,从上到下的顺序排列. 脱离文档流:也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位 只有绝对定位 ...
- SSM-SpringMVC-24:SpringMVC异常高级之自定义异常
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 自定义异常,大家都会,对吧,无非就是继承异常类等操作,很简单,我就不多扯皮了,但是在xml配置文件中有个不同的 ...
- shell 中各种括号的作用()、(())、[]、[[]]、{}
一.小括号,圆括号 () 1.单小括号 () 命令组.括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用.括号中多个命令之间用分号隔开,最后一个命令可以没有分号, ...
- js算法初窥04(算法模式01-递归)
终于来到了有点意思的地方--递归,在我最开始学习js的时候,基础课程的内容就包括递归,但是当时并不知道递归的真正意义和用处.我只是知道,哦...递归是自身调用自身,递归要记得有一个停止调用的条件.那时 ...
- 【构造】UVa 11387 The 3-Regular Graph
Description 输入n,构造一个n个点的无向图,使得每个点的度数都为3.不能有重边和自环,输出图或确定无解. Solution 如果n为奇数,奇数*3=奇数,度数为奇,必无解. 考虑我们怎么构 ...
- 深入css布局篇(3)完结 — margin问题与格式化上下文
深入css布局(3) - margin问题与格式化上下文 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...
- Java转Ruby【快速入门】
最近参加实习了,公司的技术栈中需要用到 Ruby 以及 Rails 框架,所以算是开始了踩坑之旅吧.. Ruby 简介 网上的简介要搜都能搜到,具体涉及的包括历史啦之类这里不再赘述,提几个关键词吧: ...