前言

上一篇文章我们搭建好了 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 说明的更多相关文章

  1. Flutter 即学即用系列博客——08 MethodChannel 实现 Flutter 与原生通信

    背景 前面我们讲了很多 Flutter 相关的知识点,但是我们并没有介绍怎样实现 Flutter 与原生的通信. 比如我在 Flutter UI 上面点击了一个按钮,我希望原生做一些处理,那么原生怎么 ...

  2. Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget

    前言 上一篇我们对 Flutter UI 有了一个基本的了解. 这一篇我们通过自定义 Widget 来了解下如何写一个 Widget? 然而 Widget 有两个,StatelessWidget 和 ...

  3. Flutter 即学即用系列博客——04 Flutter UI 初窥

    前面三篇可以算是一个小小的里程碑. 主要是介绍了 Flutter 环境的搭建.如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter. 这一篇我们来学习下 Flutte ...

  4. Flutter 即学即用系列博客——09 EventChannel 实现原生与 Flutter 通信(一)

    前言 紧接着上一篇,这一篇我们讲一下原生怎么给 Flutter 发信号,即原生-> Flutter 还是通过 Flutter 官网的 Example 来讲解. 案例 接着上一次,这一次我们让原生 ...

  5. Flutter 即学即用系列博客——06 超实用 Widget 集锦

    本篇文章我们来讲讲一些比较常用的 Widget. 大家验证的时候使用下面的代码替换 main.dart 代码,然后在 //TODO 语句返回下面常用 Widget 示例的代码. import 'pac ...

  6. Flutter 即学即用系列博客——03 在旧有项目引入 Flutter

    前言 其实如果打算在实际项目中引入 Flutter,完全将旧有项目改造成纯 Flutter 项目的可能性比较小,更多的是在旧有项目引入 Flutter. 因此本篇我们就说一说如何在旧有项目引入 Flu ...

  7. Flutter 即学即用系列博客总结篇

    前言 迟到的总结篇,其实大家看我之前发的系列博客最后一篇,发文时间是 3 月 29 日.距离现在快两个月了. 主要是因为有很多事情在忙,所以这篇就耽搁了. 今天终于可以跟大家会面了. 系列博客背景 F ...

  8. Flutter 即学即用系列博客——09 MethodChannel 实现原生与 Flutter 通信(二)

    前言 上一篇我们讲解了如何通过 EventChannel 实现 Android -> Flutter 的通信. 并且也看到了 Flutter 内部 EventChannel 源码也是对 Meth ...

  9. Flutter 即学即用系列博客——10 混淆

    前言 之前的博客我们都是在 debug 的模式下进行开发的. 实际发布到市场或者给到用户的都是 release 包. 而对于 Android 来说,release 包一个重要的步骤就是混淆. Andr ...

随机推荐

  1. 微信小程序-获取经纬度

    微信小程序-获取经纬度 最近公司新功能 要求在外的市场人员 发送位置信息回来. 用的还是微信小程序开发.... 微信小程序 提供一个接口 getLocation 这个接口反回来的位置 相对实际位置 相 ...

  2. define 的全部使用方法

    typedef的总结,以下是引用的内容(红色部分是我自己写的内容). 用途一: 定义一种类型的别名,而不只是简单的宏替换.可以用作同时声明指针型的多个对象.比如: char* pa, pb; // 这 ...

  3. 使用Iterator迭代器循环集合

    1.Iterator迭代器用于遍历集合元素,获取迭代器可以使用. 2.Iterator提供了统一遍历集合元素的 方式 ,其提供了用于遍历集合的连个方法----- boolean  hasNext()判 ...

  4. float之脱离文档流

    所谓的文档流:指的是元素在排版过程中,元素自动从左到右,从上到下的顺序排列. 脱离文档流:也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位 只有绝对定位 ...

  5. SSM-SpringMVC-24:SpringMVC异常高级之自定义异常

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 自定义异常,大家都会,对吧,无非就是继承异常类等操作,很简单,我就不多扯皮了,但是在xml配置文件中有个不同的 ...

  6. shell 中各种括号的作用()、(())、[]、[[]]、{}

    一.小括号,圆括号 () 1.单小括号 () 命令组.括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用.括号中多个命令之间用分号隔开,最后一个命令可以没有分号, ...

  7. js算法初窥04(算法模式01-递归)

    终于来到了有点意思的地方--递归,在我最开始学习js的时候,基础课程的内容就包括递归,但是当时并不知道递归的真正意义和用处.我只是知道,哦...递归是自身调用自身,递归要记得有一个停止调用的条件.那时 ...

  8. 【构造】UVa 11387 The 3-Regular Graph

    Description 输入n,构造一个n个点的无向图,使得每个点的度数都为3.不能有重边和自环,输出图或确定无解. Solution 如果n为奇数,奇数*3=奇数,度数为奇,必无解. 考虑我们怎么构 ...

  9. 深入css布局篇(3)完结 — margin问题与格式化上下文

    深入css布局(3) - margin问题与格式化上下文      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...

  10. Java转Ruby【快速入门】

    最近参加实习了,公司的技术栈中需要用到 Ruby 以及 Rails 框架,所以算是开始了踩坑之旅吧.. Ruby 简介 网上的简介要搜都能搜到,具体涉及的包括历史啦之类这里不再赘述,提几个关键词吧: ...