Flutter
关注
分享
扫一扫
野猿新一
这个作者很懒，什么都没留下…
展开
-
Dart Mixins混入机制详解
前言对于Java或C#开发人员来说，第一次接触到mixin可能会有点懵，因为这是一种新的语言特性，比如笔者在Flutter动画开发中用到的AnimationLocalStatusListenersMixin 就是一个Mixin创建Mixinsmixin AnimationLocalStatusListenersMixin { final ObserverList<Anima...原创 2019-11-07 16:55:01 · 1912 阅读 · 1 评论 -
Flutter Animation动画开发之——AnimationStatusListener动画状态监听
源码分析在之前的文章中我们介绍过Animation的addListener可以用来监听动画每一帧的变化而如果要监听动画的状态变化，就要用到Animation的void addStatusListener(AnimationStatusListener listener)方法addStatusListener方法是定义在AnimationLocalStatusListenersMixin...原创 2019-11-07 10:14:05 · 2377 阅读 · 0 评论 -
Flutter Animation动画开发之——reverse反向播放
我们知道AnimationController.forward()可以正向播放动画，如果要反向播放动画，可以调用AnimationController.reverse()踩坑马上写段代码验证一下，如下代码演示了一个绿色的方块，方向执行动画，大小从200缩小到100但是理想很美好，现实很残酷，运行后方块一动不动，一直保持最小的状态，也就是宽高100class AnimationRo...原创 2019-11-06 15:05:39 · 4526 阅读 · 0 评论 -
Flutter Animation动画开发之——repeat循环播放
简介我们知道AnimationController.forward()可以正向播放动画，AnimationController.reverse()可以反向播放动画，播完即停止。若想让动画播完还可以重新播放不断循环，可以调用AnimationController.repeat()：从头开始循环 AnimationController.repeat(reverse: true)：反向循环，从...原创 2019-11-06 13:53:30 · 9051 阅读 · 0 评论 -
Flutter Animation动画开发之——AnimatedBuilder
源码分析在Flutter Animation动画开发之——AnimatedWidget这篇文章中我们介绍了AnimatedWidget的使用方法。今天要介绍的AnimatedBuilder其实是继承AnimatedWidget，所以功能与其类似，也是无需手动调用addListener监听动画然后调用setState来更新UI。其源码很简单，先做个简单介绍：AnimatedBuilder继承...原创 2019-11-06 11:27:19 · 3157 阅读 · 0 评论 -
Flutter Animation动画开发之——AnimatedWidget
在Flutter Animation动画开发之——最简单的动画入门这篇文章中我们介绍了创建一个动画的基本流程，其中每创建一个动画都要通过addListener来监听动画的每一帧，然后调用setState来刷新UI。我们今天要介绍的AnimatedWidget内部帮我们实现了这一步骤，其内部会监听动画然后更新UI。AnimatedWidget示例首先我们将需要执行动画的控件单独抽出来，继承A...原创 2019-11-06 09:34:00 · 954 阅读 · 0 评论 -
Flutter Animation动画开发之——Curve动画曲线
简介在Flutter Animation动画开发之——最简单的动画入门这篇文章中我们介绍了最简单的动画开发流程今天我们在该动画的基础上添加动画曲线，默认情况下动画是线性的，可以理解为变化是匀速的，设置动画曲线可以设置动画的变化速率，可以是加速的，也可以是减速的，或者是先加速后减速的，等等动画曲线用的是CurvedAnimation类，用法如下，parent参数传入一个Animati...原创 2019-11-05 15:44:48 · 5081 阅读 · 0 评论 -
Flutter Animation动画开发之——最简单的动画入门
下面的代码我们实现了一个绿色方块在5秒内宽高从100变化到500的动画，关键的地方都有注释说明class AnimationRoute extends StatefulWidget { @override AnimationRouteState createState() => AnimationRouteState();}class AnimationRouteStat...原创 2019-11-05 14:47:17 · 747 阅读 · 0 评论 -
Flutter 网络请求框架dio使用详解
前言dio是一款Flutter 网络请求框架，在GitHub上目前有超过5.9k个star。由国人（Flutter中文网）开发，所以中文文档非常完善。这里copy了dio官方的文档，便于自己开发时查阅，基于dio 3.0.4版本，若想查看最新版本文档，可以到diopub.dev主页或GigHub主页查阅dio pub.dev主页dio GitHub主页diodio是一个强大...原创 2019-11-01 16:28:43 · 20828 阅读 · 1 评论 -
Flutter 数据库ORM框架floor使用详解
选型数据库ORM框架可以提高开发效率，不用写一大堆的sql网上搜了下，资料不多，官方也没有提供，第三方框架有但是在GitHub上的star数量都不高，以下是几个star数量比较靠前的： flutter_orm_plugin：GitHub上的demo及文档 jaguar_query_sqflite sqfentity floor 对比了下，最后㐊选择了...原创 2019-11-01 16:03:27 · 7713 阅读 · 3 评论 -
Flutter Plugin插件开发之利用BasicMessageChannel传递复杂对象
在Flutter Plugin插件开发之利用BasicMessageChannel在Platform和Flutter之间通信这篇文章中我们介绍了如何通过BasicMessageChannel通信，但是示例中只简单演示了传递String消息，如果消息中包含复杂的对象，又该如何使用呢？发送String消息的时候我们用的是StringCodec的消息编解码器至于发送复杂的消息，我们需要用JSON...原创 2019-10-31 14:07:06 · 2196 阅读 · 0 评论 -
Flutter plugin插件开发获取Activity对象
在开发Flutter插件的时候有一个Android端的方法调用的时候需要传入Activity对象，可通过如下方法获取先保存registerWith方法的PluginRegistry.Registrarca参数 然后通过PluginRegistry.Registrarca的activity()方法来获取Activity对象如下示例代码public class MyPlugin impl...原创 2019-10-30 16:37:11 · 7268 阅读 · 1 评论 -
解决Only static members can be accessed in initializers问题
如下所示代码，我想在_MyHomePageState中创建一个Text成员变通，通过_getText()方法获取text显示的文本内容但是在Text(_getText())处却报Only static members can be accessed in initializers错误class _MyHomePageState extends State<MyHomePage>...原创 2019-10-30 15:51:13 · 6469 阅读 · 0 评论 -
Flutter SingleChildScrollView代码控制滑动到底部或顶部
通过代码将SingleChildScrollView滑动到底部只需要两个步骤SingleChildScrollView设置一个ScrollController ScrollController调用jumpTo控制SingleChildScrollView互动到底部如下实例代码，点击右下角FloatingActionButton将SingleChildScrollView滑动到底部scr...原创 2019-10-30 15:21:48 · 10746 阅读 · 0 评论 -
Flutter Text内容居中显示
通过设置textAlign属性的值为TextAlign.center可以让Text的内容居中class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(...原创 2019-10-30 15:00:56 · 24684 阅读 · 0 评论 -
Flutter Center使用方法
二话不说直接上代码直接把要居中的控件放在Center内即可class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: ...原创 2019-10-30 14:19:40 · 3318 阅读 · 0 评论 -
Flutter FractionalOffset用法
Align控件可以通过Aligment确定子控件的位置，也可以通过FractionalOffset来设置Aligment的坐标系原点是在父控件的中间，而FractionalOffset的坐标系是在父控件的左上角先上代码看下效果比较直观我们创建了一个宽高为300的父容器，在容器中间右边的位置放置一个宽高为100的Flutter的图标FractionalOffset的两个参数dx...原创 2019-10-30 14:05:18 · 2991 阅读 · 0 评论 -
Flutter Align控件用法
Align用来确定子控件在父布局中的位置，定义如下const Align({ Key key, this.alignment = Alignment.center, this.widthFactor, this.heightFactor, Widget child,})alignment属性设置子控件的位置，Alignment中已定义了如下几种位...原创 2019-10-30 11:07:22 · 7388 阅读 · 0 评论 -
Flutter SingleChildScrollView使用
竖直滚动class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), )...原创 2019-10-30 09:06:11 · 2190 阅读 · 0 评论 -
Flutter TextField 设置输入类型
Flutter中TextField的输入类型通过keyboardType属性来设置，比如设置成文本、数字、电话、邮箱等类型例如如下代码限制输入类型为数字TextField( keyboardType: TextInputType.number, decoration: InputDecoration( labelText: "账号", hintText: "请输入...原创 2019-10-25 16:55:41 · 7671 阅读 · 0 评论 -
Flutter Plugin插件开发之利用BasicMessageChannel在Platform和Flutter之间通信
在一步步实现一个Flutter plugin插件这篇文章我们介绍了如何实现一个plugin，但是这里通过MethodChannel只实现了Flutter向Platform的通信，并未实现从Platform向Flutter的通信，今天我们就来介绍如何通过BasicMessageChannel实现Platform向Flutter方向的通信。创建Plugin关于在命令行中或者Android St...原创 2019-10-14 16:17:06 · 1470 阅读 · 0 评论 -
Flutter Dart print 日志打印
print('我是日志');String name = '野猿新一';print('我的名字叫${name}');没啦，就这么简单原创 2019-10-14 15:03:28 · 17998 阅读 · 0 评论 -
Flutter包依赖冲突解决方法
假设你的项目同时引用了some_package和other_package两个包，而这两个包又同时引用了collection这个包，若这两个包引用了不同的collection版本就会造成冲突。some_package的依赖dependencies: collection: '1.8.1'other_package的依赖dependencies: collection: ...原创 2019-10-12 17:08:13 · 11296 阅读 · 0 评论 -
Flutter package包依赖的四种方法
Flutter对包的依赖有如下三种方法pub.dev Hosted Git Path下面分别详细介绍pub.dev这是是最常见也是最方便的方法，但是只适用于发布到pub.dev平台的包，直接配置包名和版本号（可选）即可dependencies: collection: '^0.1.2'对于有些私有的包，并不想发布到pub.dev平台，或者还未准备发布的包，也可以使...原创 2019-10-12 14:39:00 · 11258 阅读 · 0 评论 -
Flutter解决Waiting for another flutter command to release the startup lock问题
在Flutter项目pubspec.yaml中新增某个包的依赖，然后点Packages get下载依赖，可能是网络问题一直下载中，我就直接重启Android Studio，然后再重新点Packages get的时候就报如下错误Waiting for another flutter command to release the startup lock网上搜索找到如下解决方案：打开fl...原创 2019-10-12 13:55:33 · 585 阅读 · 0 评论 -
flutter pub upgrade更新package包版本
假设我们在Flutter项目的pubspec.yaml配置文件中首次添加对url_launcher包的依赖dependencies: url_launcher: '>=4.0.0 <=5.1.1'假设在https://pub.dev中url_launcher有如下版本，那么根据'>=4.0.0 <=5.1.1'的限定，当执行flutter pub get后，...原创 2019-10-12 11:25:05 · 11334 阅读 · 0 评论 -
Flutter 指定依赖的package包版本及版本区间
这里我们以使用url_launcher包为例包名后面不指定任何版本，表示任何版本都可以使用，但是这种方法不推荐，当版本更新后有可能会出现错误dependencies: url_launcher: 明确指定某一版本，表示只能使用该版本dependencies: url_launcher: '0.1.2'指定某个版本区间，在该区间内的版本都可以使用大于0.12的版本可...原创 2019-10-12 10:30:38 · 5713 阅读 · 1 评论 -
从零开始写第一个Flutter app（五）——ListView添加图标
目录从零开始写第一个Flutter app（一）——Hello World 从零开始写第一个Flutter app（二）——引用第三方包 从零开始写第一个Flutter app（三）——有状态的部件StatefulWidget 从零开始写第一个Flutter app（四）——无限滑动的ListView 从零开始写第一个Flutter app（五）——ListView添加图标 从零开始...原创 2019-07-27 19:23:46 · 969 阅读 · 0 评论 -
从零开始写第一个Flutter app（四）——无限滑动的ListView
目录从零开始写第一个Flutter app（一）——Hello World 从零开始写第一个Flutter app（二）——引用第三方包 从零开始写第一个Flutter app（三）——有状态的部件StatefulWidget 从零开始写第一个Flutter app（四）——无限滑动的ListView 从零开始写第一个Flutter app（五）——ListView添加图标 从零开始...原创 2019-07-27 16:25:43 · 1052 阅读 · 0 评论 -
从零开始写第一个Flutter app（三）——有状态的部件StatefulWidget
目录从零开始写第一个Flutter app（一）——Hello World 从零开始写第一个Flutter app（二）——引用第三方包 从零开始写第一个Flutter app（三）——有状态的部件StatefulWidget 从零开始写第一个Flutter app（四）——无限滑动的ListView 从零开始写第一个Flutter app（五）——ListView添加图标 从零开始...原创 2019-07-27 15:37:47 · 621 阅读 · 0 评论 -
从零开始写第一个Flutter app（二）——引用第三方包
目录从零开始写第一个Flutter app（一）——Hello World 从零开始写第一个Flutter app（二）——引用第三方包 从零开始写第一个Flutter app（三）——有状态的部件StatefulWidget 从零开始写第一个Flutter app（四）——无限滑动的ListView 从零开始写第一个Flutter app（五）——ListView添加图标 从零开始...原创 2019-07-27 14:24:39 · 986 阅读 · 0 评论 -
从零开始写第一个Flutter app（一）——Hello World
目录从零开始写第一个Flutter app（一）——Hello World 从零开始写第一个Flutter app（二）——引用第三方包 从零开始写第一个Flutter app（三）——有状态的部件StatefulWidget 从零开始写第一个Flutter app（四）——无限滑动的ListView 从零开始写第一个Flutter app（五）——ListView添加图标 从零开始...原创 2019-07-27 13:47:16 · 1133 阅读 · 0 评论 -
从零开始写第一个Flutter app（十）——最终代码
目录从零开始写第一个Flutter app（一）——Hello World 从零开始写第一个Flutter app（二）——引用第三方包 从零开始写第一个Flutter app（三）——有状态的部件StatefulWidget 从零开始写第一个Flutter app（四）——无限滑动的ListView 从零开始写第一个Flutter app（五）——ListView添加图标 从零开始...原创 2019-07-30 17:16:02 · 582 阅读 · 0 评论 -
创建和运行第一个Flutter项目
想要学一门新的技术，最快了解它的方式就是运行写一个简短的demo，然后跑起来。今天教大家用Android Studio创建一个Flutter项目，然后跑起来。然后尝试修改一些值，体验Flutter的热加载。1.菜单选择New Flutter Project2.输入项目名、选择Flutter SDK路径、项目存放位置和项目描述，点击Next下一步3.设置包名，然后点击Fi...原创 2019-07-25 00:15:01 · 840 阅读 · 0 评论 -
Android Studio安装Flutter plugin和Dart plugin
在安装插件前首先需要安装Android Studio，如果未安装的可以到这里下载安装，这里就不再多说了File > Settings > Plugins打开插件安装页面 在Marketplace的搜索框中输入Flutter搜索插件 找到Flutter插件，单击Install安装 安装Flutter过程中会提示安装Dart plugin，点击Yes确认安装 安装完成后按提示...原创 2019-07-24 19:45:19 · 8385 阅读 · 0 评论 -
从零开始写第一个Flutter app（六）——添加点击事件交互
目录从零开始写第一个Flutter app（一）——Hello World 从零开始写第一个Flutter app（二）——引用第三方包 从零开始写第一个Flutter app（三）——有状态的部件StatefulWidget 从零开始写第一个Flutter app（四）——无限滑动的ListView 从零开始写第一个Flutter app（五）——ListView添加图标 从零开始...原创 2019-07-27 22:56:01 · 1490 阅读 · 0 评论 -
从零开始写第一个Flutter app（七）——弹出toast
目录从零开始写第一个Flutter app（一）——Hello World 从零开始写第一个Flutter app（二）——引用第三方包 从零开始写第一个Flutter app（三）——有状态的部件StatefulWidget 从零开始写第一个Flutter app（四）——无限滑动的ListView 从零开始写第一个Flutter app（五）——ListView添加图标 从零开始...原创 2019-07-28 14:40:45 · 793 阅读 · 0 评论 -
从零开始写第一个Flutter app（八）——修改主题颜色
目录从零开始写第一个Flutter app（一）——Hello World 从零开始写第一个Flutter app（二）——引用第三方包 从零开始写第一个Flutter app（三）——有状态的部件StatefulWidget 从零开始写第一个Flutter app（四）——无限滑动的ListView 从零开始写第一个Flutter app（五）——ListView添加图标 从零开始...原创 2019-07-28 14:59:05 · 3539 阅读 · 3 评论 -
Flutter使用url_launcher包跳转默认浏览器打开网页
1.首先打开或者创建一个Flutter项目2.打开pubspec.yaml配置文件，添加url_launcher的引用dependencies: flutter: sdk: flutter url_launcher: ^0.4.13.在命令行中运行flutter pub get指令或者在Android Studio中点击pubspec.yaml配置文件编辑页面顶部的P...原创 2019-10-11 17:11:05 · 10253 阅读 · 0 评论 -
Flutter 使用package包或者plugin插件
这里以使用css_colors包为例1.首先打开或者创建一个Flutter项目2.打开pubspec.yaml配置文件，添加css_colors的引用dependencies: flutter: sdk: flutter css_colors: ^1.0.03.在命令行中运行flutter pub get指令或者在Android Studio中点击pubspec....原创 2019-10-11 16:42:54 · 1047 阅读 · 0 评论