![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Flutter
文章平均质量分 87
弗拉德x0
一生只有一个职业:学生
展开
-
【Flutter 3-5】Flutter进阶教程——在Flutter中使用Lottie动画
作者 | 弗拉德来源 | 弗拉德(公众号:fulade_me)Lottie动画在移动开发中总是需要展示一些动画特效,作为程序员的我们并不是很擅长用代码做动画,即便是有些动画可以实现,在跨平台的过程中也会因为API的差异性导致动画在各个平台中展示的有差异。所以为了释放程序员的双手,不再陷入写动画调参数的苦恼,Airbnb开源了一款专门用于跨平台的动画解决方案:Lottie。Lottie可以解析使用Bodymovin导出为json的Adobe After Effects动画,并在移动端和Web端展示。原创 2021-04-13 16:42:35 · 2538 阅读 · 0 评论 -
【Flutter 3-4】Flutter进阶教程——数据持久化sqflite使用
数据持久化是在移动端开发中必不可少的技术手段。我们总是有一些用户信息,应用资源,列表数据等需要存储起来,这里我们主要来讲基于SQLite数据库的数据储存。原创 2021-02-08 10:41:18 · 1314 阅读 · 0 评论 -
【Flutter 3-3】Flutter进阶教程——http请求和FutureBuilder
在移动开发过程中很多时候我们都需要依赖异步请求数据然后再来刷新UI。在用户打开界面的时候,先给出一个Loading提示,等数据请求完成后,我们再把数据展示在页面上,这是很常见的操作。原创 2021-02-02 15:53:32 · 594 阅读 · 0 评论 -
【Flutter 3-2】Flutter进阶教程——路由Router和导航Navigator以及传值
作者 | 弗拉德来源 | 弗拉德(公众号:fulade_me)路由在移动开发中,我们管页面之间的跳转叫做路由。在iOS中指的就是ViewController之间的跳转,在Android中就是Activity之间的跳转。路由是在移动端开发中非常重要的概念,它负责管理着各个页面之间的跳转还有传值工作,是必不可缺少的控件。路由Map为了方便我们管理跳转页面,Flutter为我们 提供了路由Map。路由Map由在main.dart文件里面MaterialApp的参数routes管理,routes参数接收原创 2021-02-01 16:39:29 · 845 阅读 · 0 评论 -
【Flutter 3-1】Flutter手把手教程UI布局和Widget——底部导航栏BottomNavigationBar使用
BottomNavigationBar 和 BottomNavigationBarItem 配合来共同展示Flutter里面的底部状态栏,底部状态栏是在移动端很重要的控件。原创 2021-01-29 17:06:18 · 795 阅读 · 0 评论 -
【Flutter 2-12】Flutter手把手教程UI布局和Widget——网格列表GridView
GridView 是在一个好用的网格布局控件,它的很多属性跟前面提到的ListView是一样的,重复的属性这里就不在赘述了。我们重点看几个初始化方法`GridView.count`、`SliverGridDelegateWithFixedCrossAxisCount`、`SliverGridDelegateWithMaxCrossAxisExtent`的使用。原创 2021-01-21 09:25:17 · 323 阅读 · 0 评论 -
【Flutter 2-11】Flutter手把手教程UI布局和Widget——列表ListView
ListView是在移动端非常常见的控件,在大多数的展示场景中都离不开ListView。在Flutter中对ListView的封装也非常好,简单几行代码就可以满足我们布局一个滚动列表的需求。原创 2021-01-20 19:46:27 · 404 阅读 · 0 评论 -
【Flutter 2-10】Flutter手把手教程UI布局和Widget——流式布局Wrap
在Flutter中Wrap是流式布局控件,Row和Column在布局上是很好用,但是有一个缺点,如果当子控件数量过多导致Row或Column装载不下的时候,就会出现UI页面上的错误。Wrap可以完美的避免这些问题,当控件过多一行显示不全的时候,Wrap可以换行显示。当然`Wrap`跟`Row`和`Column`有着很多相似的地方。原创 2021-01-17 11:23:34 · 480 阅读 · 0 评论 -
【Flutter 2-9】Flutter手把手教程UI布局和Widget——弹性布局控件Flexible
Flexible可以帮助Row、Column、Flex的子控件充满父控件,它的用法很灵活,也具有权重的属性。跟Flexible相类似的控件还有Expanded。原创 2021-01-17 11:15:37 · 627 阅读 · 0 评论 -
【Flutter 2-8】Flutter手把手教程UI布局和Widget——水平布局控件Row
`Row`是在Flutter中常见的布局控件,它负责水平方向布局。Column负责垂直方向布局,二者都是继承于`Flex`,类似于`iOS`里面的`UIScrollView`,但是又有很多不同。原创 2021-01-14 16:10:11 · 632 阅读 · 0 评论 -
【Flutter 2-7】Flutter手把手教程UI布局和Widget——垂直布局控件Column
`Column`是在Flutter中常见的布局控件,它负责垂直方向布局。Row负责水平方向布局,二者都是继承于`Flex`,类似于`iOS`里面的`UIScrollView`,但是又有很多不同。原创 2021-01-14 14:19:50 · 637 阅读 · 0 评论 -
【Flutter 2-6】Flutter手把手教程UI布局和Widget——Image控件、NetworkImage、AssetImage
作者 | 弗拉德来源 | 弗拉德(公众号:fulade_me)Image是一个常用的控件,它可以帮助我们显示图片,图片的资源可以是来自网络、本地或者是内存。在移动端的开发中会大量使用Image来展示一些图文,了解和掌握Image控件是非常有必要的。AssetImage 和 Image.assetAssetImage是Flutter提供的一个可以从本地读取图片资源的类,我们可以使用它来读取图片。同样Flutter还提供了Image.asset这个构造方法直接来帮助我们读取图片资源并返回一个Image对原创 2021-01-11 15:01:24 · 3060 阅读 · 0 评论 -
【Flutter 2-5】Flutter手把手教程UI布局和Widget——TextField使用、搭配InputDecoration和FocusedNode使用
TextField是一个常用的控件,是有状态的Statefulwidget,它是由多个控件组合成的控件,使用起来并不复杂,但是变化情况比较多,多看源码,避免踩坑。原创 2021-01-08 16:20:23 · 1097 阅读 · 0 评论 -
【Flutter 2-4】Flutter手把手教程UI布局和Widget——Statelesswidget与Statefulwidget
在Flutter中一切皆为widget,其中Statelesswidget和Statefulwidget是Flutter比例很重要的两个widget。Statelesswidget是不需要改变状态的widget,Statefulwidget是允许改变状态的widget。原创 2021-01-06 14:50:12 · 418 阅读 · 0 评论 -
【Flutter 2-3】Flutter手把手教程UI布局和Widget——容器控件Container
Container是一个相对复杂一些的控件,它有很多属性,初始化的时候传入多个参数来满足我们更多的UI需求。这是一个在布局中非常重要的控件。原创 2020-12-28 16:30:35 · 401 阅读 · 0 评论 -
【Flutter 2-2】Flutter手把手教程UI控件——【多图预警】按钮RaisedButton、FlatButton、OutlineButton
作者 | 弗拉德来源 | 弗拉德(公众号:fulade_me)Material 风格中常用的按钮有三种RaiseButton、FlatButton、OutlineButton。这三种按钮都是继承了MaterialButton,而MaterialButton又继承自StatelessWidget。RaiseButton:带有阴影效果的按钮,默认带有灰色背景,点击下去会有点击效果和阴影。FlatButton: 扁平风格按钮,点击下去会有背景颜色。OutlineButton: 带有边框的按钮,且边框会原创 2020-12-17 21:13:19 · 645 阅读 · 0 评论 -
【Flutter 2-1】Flutter手把手教程UI布局和Widget——文本和样式 Text Widget
作者 | 弗拉德来源 | 弗拉德(公众号:fulade_me)Text我们先来看Text的构造函数都有哪些参数:const Text( this.data, { //data 就是我们需要展示的文字 是字符串类型,这个是必传字段,其他的都是可选 Key key, //widget的标识 this.style, //文本样式,类型是TextStyle this.strutStyle, //用来设置最小行高的参数 t原创 2020-12-17 08:54:04 · 483 阅读 · 1 评论 -
【Flutter 1-15】Flutter手把手教程Dart语言——包管理工具Pub详解、pub get,pub cache使用
作者 | 弗拉德来源 | 弗拉德(公众号:fulade_me)什么是Pub工具Dart 生态系统使用包来管理共享软件,比如:库和工具。我们使用Pub包管理工具 来获取Dart包。在Pub上,可以找到公开可用的包。或者从本地文件系统或其他的位置,比如Git仓库,加载可用的包。无论包是从什么途径加载的, Pub 都会进行版本依赖管理,从而帮助我们获得版本兼容的软件包以及SDK。pub工具包含管理 Package 、部署 Package 和部署命令行应用的命令。Dart 包目录中至少包含一个pubspe原创 2020-12-06 17:59:46 · 7719 阅读 · 0 评论 -
【Flutter 1-14】Flutter手把手教程Dart语言——Dart语言引用、import、package使用
作者 | 弗拉德来源 | 弗拉德(公众号:fulade_me)库import 关键字可以帮助你创建一个模块化和可共享的代码库,代码库不仅只是提供 API 而且还起到了封装的作用:以下划线(_)开头的成员仅在代码库中可见。使用库使用import来指定命名空间以便其它库可以访问。比如你可以导入代码库 dart:html来使用Dart Web中相关 API:import 'dart:html';import的唯一参数是用于指定代码库的URI,对于Dart内置的库,使用 dart:xxxxxx的形式原创 2020-12-06 14:23:24 · 959 阅读 · 0 评论 -
【Flutter 1-13】Flutter手把手教程Dart语言——异步、Future、Stream、async、await详解
作者 | 弗拉德来源 | 弗拉德(公众号:fulade_me)异步Dart 代码库中有大量返回Future或Stream对象的函数,这些函数都是异步的,它们会在耗时操作执行完毕前直接返回而不会等待耗时操作执行完毕。async和await关键字用于实现异步编程,并且让你的代码看起来就像是同步的一样。Future可以通过下面两种方式,获得Future执行完成的结果:使用async和await;使用Future API;使用async和await的代码是异步的,但是看起来有点像同步代码。例如原创 2020-12-05 20:47:01 · 742 阅读 · 0 评论 -
【Flutter 1-12】Flutter手把手教程Dart语言——什么是泛型和泛型的使用场景
作者 | 弗拉德来源 | 弗拉德(公众号:fulade_me)泛型如果你查看数组的API文档,你会发现数组List的实际类型为List<E>。<> 符号表示数组是一个泛型(或参数化类型)通常使用一个字母来代表类型参数,比如E、T、S、K 和 V 等等。为什么使用泛型?泛型常用于需要要求类型安全的情况,但是它对代码运行也有好处:适当地指定泛型可以更好地帮助代码生成。使用泛型可以减少代码重复。比如你想声明一个只能包含String类型的数组,你可以将该数组声明为List原创 2020-12-05 20:07:35 · 403 阅读 · 0 评论 -
【Flutter 1-11】Flutter手把手教程Dart语言——类、类的的成员变量和方法、类的构造函数
作者 | 弗拉德来源 | 弗拉德(公众号:fulade_me)类Dart是一种面向对象的语言,所有对象都是一个类的实例,而所有的类都继承自Object类。每个除了Object类之外的类都只有一个超类,一个类的代码可以在其它多个类继承中重复使用。类的实例变量下面是声明实例变量的示例:class Point { double x; // 声明 double 变量 x 并初始化为 null。 double y; // 声明 double 变量 y 并初始化为 null double z =原创 2020-12-04 19:20:29 · 1042 阅读 · 0 评论 -
Flutter 1-10】Flutter手把手教程Dart语言——运算符
作者 | 弗拉德 来源 | 弗拉德(公众号:fulade_me)### 运算符运算符是一种告诉编译器执行特定的数学或逻辑操作的符号。Dart语言内置了丰富的运算符,并提供了以下类型的运算符:算术运算符、关系运算符、类型判断运算符、赋值运算符、逻辑运算符、按位和移位运算符、条件表达式、级联运算符以及其他运算符。#### 算数运算符| 算数运算符 | 描述 || ---- | ---- || + | 加 || - | 减 || - 表达式 | 一元负, 也可以作为反转(反转表达式的符号)原创 2020-12-03 11:27:09 · 754 阅读 · 0 评论 -
【Flutter 1-9】Flutter教程Dart语言——函数和匿名函数
作者 | 弗拉德来源 | 弗拉德(公众号:fulade_me)函数Dart 同样也是一种面向对象的语音。所以即便函数也是一个对象。类型为 Function,这意味着函数可做作为变量,也也可以作为函数的参数。下面是定义一个函数的例子:isEmpty(List aList) { return aList.length == 0;}为了规范其实我们需要在函数的头部声明一下返回值类型,当然如果不声明也可以运行,bool isEmpty(List aList) { return aLi原创 2020-11-21 15:15:24 · 1007 阅读 · 0 评论 -
【Flutter 1-8】Flutter教程Dart语言——控制语句
控制语句Dart语言的控制语句跟其他常见语言的控制语句是一样的,基本如下:if 和 elsefor 循环while 和 do-while 循环break 和 continueswitch 和 caseassertIf 和 ElseDart 支持 if - else 语句,其中 else 是可选的,比如下面的例子。int i = 0;if (i == 0) { print("value 0");} else if (i == 1) { print("value 1");原创 2020-11-18 14:15:06 · 522 阅读 · 0 评论 -
【Flutter 1-7】Flutter教程Dart语言——变量
2011年10月10日的GOTO大会上,谷歌的两位工程师发布了“Dart”;Dart是一种全新的编程语言,旨在帮助开发者构建Web应用程序。Dart 1.0于2013年11月14日发布。我们日常开发Flutter使用的就是Dart语言,所以我们有必要了解一下Dart语言的使用方法。文章首发地址类型安全的语言Dart 语言是类型安全的语言,但是由于其支持类型推断,因此大多数变量不需要显式地指定类型:例如/// 初始化一个字符串var name = 'Fulade';/// Int类型va.原创 2020-11-12 09:34:55 · 471 阅读 · 0 评论 -
【Flutter 1-6】Flutter项目目录结构
Flutter项目结构了解Flutter的目录结构,可以帮助我们更好的管理和开发项目。这样我们在开发的过程中就会很清楚的知道,iOS代码该放在那里,Android代码该放在那里,Flutter代码该放在哪里,测试代码放在哪里等等。我们以上一节中创建的flutter_app为例,我们用VSCode打开它。如图,我们看到了下面这些目录:文件或目录说明.dart_tool记录了一些dart工具库所在的位置和信息.ideaandroid studio 是基于idea开发的,原创 2020-10-25 21:22:56 · 721 阅读 · 0 评论 -
【Flutter 1-5】运行Flutter的第一个项目——计数器
创建项目创建Flutter项目有很多种方法,各个IDE工具也都集成了创建Flutter项目的快捷操作。我们这里列举三种方式:使用命令行创建、使用Android Studio创建和使用VSCode创建。使用命令行创建在Flutter安装完之后,我们就已经配置好了命令行工具,命令行工具很强大,可以满足我们日常开发Flutter的所有操作(如果你还没有安装好Flutter环境,可以参考这里来安装)。我们只需要打开命令行工具 输入:flutter create flutter_app其中 flutt原创 2020-10-25 21:21:41 · 441 阅读 · 0 评论 -
【Flutter 1-4】Windows下VSCode配置Flutter开发环境
VSCode是什么首发地址Visual Studio Code(简称VS Code)是一个由微软开发,同时支持Windows 、 Linux和macOS等操作系统的免费代码编辑器,它支持测试,并内置了Git 版本控制功能,同时也具有开发环境功能,例如代码补全(类似于 IntelliSense)、代码片段和代码重构等。该编辑器支持用户个性化配置,例如改变主题颜色、键盘快捷方式等各种属性和参数,同时还在编辑器中内置了扩展程序管理的功能。VSCode同样支持Flutter开发,在我的日常开发中会更多的使用VS原创 2020-10-11 23:02:32 · 614 阅读 · 0 评论 -
【Flutter 1-3】在VMWare Windows 10 虚拟机下Android Studio 安装模拟器报错 Your CPU does not support VT-x
出现这个问题的原因Android模拟器需要计算器的处理器必须支持以下虚拟化扩展技术之一:Intel 虚拟化技术(VT、VT-x 和 vmx)扩展AMD 虚拟化(AMD-V 和 SVM)扩展大部分处理器都会支持,这里就以Intel处理器为例。在BOIS内开启如果之前没有开启过虚拟化,需要我们进入到BIOS开启,各个主板进入BIOS的方式不同,这里就不一一列举了。编辑VMWare 虚拟机配置打开VMware Workstation Pro,找到要编辑的虚拟机,依次点击编辑虚拟机->处理原创 2020-10-08 22:24:48 · 1018 阅读 · 0 评论 -
在 Windows 10下安装Flutter+Dart+Android Studio 配置Flutter开发环境
在 Windows 10下安装Flutter+Dart+Android Studio 配置Flutter开发环境文章首发地址配置环境变量由于部分网站被墙的原因,我们需要先配置Flutter国内镜像地址,这两个地址是由Flutter官方维护的,可以放心使用首先我们找到此电脑点击右键,然后点击属性然后点击高级系统设置点击高级然后找到下面的环境变量并点击点击新建变量名输入PUB_HOSTED_URL 变量值输入 https://pub.flutter-io.cn 然后点击确定继续点击原创 2020-10-08 15:30:02 · 785 阅读 · 0 评论 -
【Flutter 1-1】8个Flutter的优势以及为什么要在下一个项目中尝试Flutter
让我们一起来了解Flutter与其他跨平台框架的优势,以及这些优势在开发流程中的作用。Flutter是什么Flutter的优势1. 跨平台使用相同的UI和业务逻辑2. 节省开发时间3. 更快的迭代速度4. 无限接近原生的交互体验5. 丰富的UI动画6. 独立的渲染引擎7. 能够很容易与原生进行交互8. 不只是能运行在移动端从业务层来看,Flutter是一个好的选择吗?为什么要尝试使用Fultter?Flutter是什么就我目原创 2020-10-04 21:00:14 · 735 阅读 · 0 评论