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 版本。

原文地址:https://www.cnblogs.com/nesger/p/10371529.html

时间: 2024-10-11 09:18:21

Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明的相关文章

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

前面三篇可以算是一个小小的里程碑. 主要是介绍了 Flutter 环境的搭建.如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter. 这一篇我们来学习下 Flutter 的 UI. 前言 说到 UI,我就简单说下 Flutter 作为一门跨平台语言具有的优势之一,提高效率吧. 举个例子: 假设现在要开发一个界面,Android 开发需要一天,iOS 开发也需要一天.那么就是两天. 如果你用 Flutter 开发,就只需要一天(因为 Android 和 iOS 都

Flutter 即学即用系列博客——07 RenderFlex overflowed 引发的思考

背景 在进行 Flutter UI 开发的时候,控制台报出了下面错误: flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY >╞═════════════════════════════════════════════════════════ flutter: The following message was thrown during layout: flutter: A RenderFlex overflowed by 826 pixels

窥探Swift系列博客说明及其Swift版本间更新

Swift到目前为止仍在更新,每次更新都会推陈出新,一些Swift旧版本中的东西在新Swift中并不适用,而且新版本的Swift会添加新的功能.到目前为止,Swift为2.1版本.去年翻译的Swift书籍是1.0版本,所以上面一些东西并不在适用.虽然Swift语言仍在更新,但是其整体的基础框架已经形成,大的改动应该不会有,版本的更新更多的是语言新功能的添加和完善,所以并不用担心现在学的Swift会过时.更新也就是在原有的基础上去更新,所以学学Swift还是很有必要的.新的Swift版本中引入了好

关于算法导论系列博客的说明

本系列博客主要为练习<算法导论(第三版)>的记录.发表目的在于希望通过大家的帮助,不断地改进程序,使其在时间和空间方面效率不断提高.由于水平有限,错误在所难免.但是,我一定尽力消除.另外, 欢迎大家指出错误,提出宝贵的建议,感谢大家的指点和帮助. 特别注明: 你们的评论对我是一种莫大的鼓励,哪怕一个字也好,万分感谢. 在开始之前,对各练习的程序作出统一说明,以后不再重复. 一  程序一般用C语言写,编译为GCC. 二   程序一般为子程序的形式,不提供调用主程序,只完成要求的功能. 三   不

Linux系列博客开篇

自从决定做开发,已经好久没有配置过Linux系统了.再不尝试着写一下博客,可能真的要还给老师了.本着一边复习,一边记录的原则,将一些Linux的配置和维护记录在此,不要贻笑大方才好. 为了完成接下来的这些博客,我可能会参考众多前辈的文章,我会尽量留下参考的出处,但是要是因为某些原因未能留下出处,还请原作者见谅.您可以联系我,我将及时改正. 按照我的计划,我会从Linux的安装.基本配置.常用命令开始,一直写到各种网络服务以及Linux存储集群.数据库集群等.基本思路按照尚观主机班的培训思路,不过

MVC系列博客之排球计分(一)需求分析

项目简介: 这是MVC系列博客之排球计分程序,该程序可以是对教练或者裁判使用的,让教练有权限对队员进行查询得分情况,让教练对队员的优势劣势进行了解,以便对队伍进行调整. 让裁判更好的判定比赛输赢. 需求分析:     作为一名排球教练,我需要统计对方球队的队员信息,得分情况,技能得分,以便能做出针对性的训练. 进入本程序后,需要选择身份,然后就可以对队员信息进行操作了.(增删改查) 本身份只能对本队队员进行操作,要想操作对方队员,只能退出程序,重新选择身份. 作为一名裁判,我需要对场上两队得分进

Android系列博客撰写计划

Android系列博客撰写计划 Hello,各位博友,大家好!小巫好久没写博客,由于工作的原因没有太多时间来把自己的开发经验总结出来,根据以往的博客,博文的发布都是没啥规律的,也没有定任何计划说要写一系列的博文,比较散乱.最近我自己也想了一下,改变以往博客的写法,少些一些功能性的博文,而多写一些架构性或者解决方案的博文,以方便广大初学者能更快的掌握重要的点,而不是盲目的去解决一个一个功能点,而没有形成一个整体的思想.以后的博文将会以我个人学习大牛的经验和我个人的经验来呈现给大家,我也希望通过这种

郭晓东的“系列博客,专辑”集锦

基础知识: 字符编码的奥秘[专辑],浏览其中一篇:字符编码的奥秘utf-8, Unicode <深度探索C++对象模型>[系列笔记]--对象模型.存储形式:默认构造函数一定会构造么? <深入理解计算机系统>[系列笔记]虚拟存储器,malloc,垃圾回收 <PNG文件格式>PNG文件格式分析 iOS平台知识: iOS开始学习[系列博客]Objective-c 语法,继承,protocol和delegate(iOS学习笔记,从零开始) Objective-c高效变成[专辑]

webapi框架搭建系列博客

webapi框架搭建系列博客 webapi框架搭建-创建项目(一) webapi框架搭建-创建项目(二)-以iis为部署环境的配置 webapi框架搭建-创建项目(三)-webapi owin webapi框架搭建-依赖注入之autofac webapi框架搭建-日志管理log4net webapi框架搭建-webapi异常处理 原文地址:https://www.cnblogs.com/shengyu-kmust/p/8279300.html