flutter
nicolelili1
这个作者很懒,什么都没留下…
展开
-
Windows系统flutter开发环境与Android环境的设置
一、二、三、四、五、六、七、八、九、十、十一、十二、注:1、出现异常原因不清楚,但是连接手机的热点后可以正常下载,可能是DNS劫持问题...转载 2019-05-25 16:40:47 · 205 阅读 · 0 评论 -
App首页框架搭建--Scaffold与PageView
一、二、开发导航框架,分为“首页”、“搜索”、“旅拍"、"我的",并实现界面之间的跳转三、实现首页导航需要哪些材料?--Scaffold---BottomNavigationBar--PageView---PageController1、什么是Scaffold widget?Scaffold 是一个实现了基本的material design的...转载 2019-05-27 23:52:48 · 803 阅读 · 0 评论 -
App首页框架搭建--项目实践
1、项目目录结构2、代码:main.dartimport 'package:flutter/material.dart';import 'navigator/tab_navigator.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { // This wi...转载 2019-05-28 01:26:21 · 533 阅读 · 0 评论 -
轮播图Banner功能的开发
1、2、使用插件 flutter_swiper添加轮播图3、添加指示器4、代码:import 'package:flutter/material.dart';import 'package:flutter_swiper/flutter_swiper.dart';class HomePage extends StatefulWidget...转载 2019-05-28 15:46:13 · 637 阅读 · 0 评论 -
自定义AppBar实现滚动渐变
1、滑动过程中AppBar在不透明和透明之间进行变化2、为l使AppBar能够滚动,我们需要一个列表,这个列表足够长,以至于我们能够监听列表的滚动,来改变顶部的AppBar的背景色添加底部的列表,让AppBar可以滑动3、移除listview和顶部的padding这个padding可能是开发团队考虑到了手机的适配,比如iphonX的适配,提前把顶部的安...转载 2019-05-28 16:57:21 · 2253 阅读 · 0 评论 -
基于Http实现网络操作
一、二、什么是Http?Http是Flutter用于网络请求的跨平台的插件。三、如何用http库做get请求?--在pubspec.yaml中引入http插件;--调用http.get发送请求1、http.get()返回一个包含http.Response的Future:Futrue:是与异步操作一起工作的核心Dart类。它用于表示未来某个时间可能会...转载 2019-05-28 20:35:29 · 629 阅读 · 0 评论 -
异步:Future与FutureBuilder实用技巧
一、二、什么是Future?Future表示在接下来的某个时间的值或错误,借助Future我们可以在Flutter实现异步操作Future是dart:async包中的一个类,使用它时需要导入dart:async包,Future有两种状态:-pending -执行中;、-completed-执行结束,分两种情况要么成功要么失败注:它类似于ES6中的Promise,提...转载 2019-05-28 23:48:57 · 3518 阅读 · 0 评论 -
JSON解析与复杂模型转换实用技巧
一、json是一种轻量级的数据交换语言,在网络中大量用到json作为数据传递的格式,那么在Flutter里面是如何使用json来处理数据的,以及json处理数据有哪些技巧呢?二、应该是用哪种JSON序列化方式?--小型项目:手动序列化--大型项目:借助插件生成 json_serializable和build-value注:其实大型项目使用手动+借助下面提到的在...转载 2019-05-29 00:15:03 · 981 阅读 · 0 评论 -
基于shared_preferences的本地存储操作
一、二、什么是shared_preferences?shared_preferences是Flutter社区开发的一个本地数据存取插件:--简单的,异步的,持久化的key-value存储系统--在Android上它是基于SharedPreferences的--在iOS上它是基于NSUserDefaults的三、如何使用shared_prefere...转载 2019-05-29 01:59:43 · 1119 阅读 · 0 评论 -
基于ListView实现水平和垂直方式滚动的列表
一、二、如何实现垂直滚动列表?三、如何实现水平滚动的列表?和上面唯一不同的是scrollDirection:设置为了水平 Axis.horizontal,默认情况下是纵向的运行结果:注:如果给listview的item设置高度的话是无效的,默认会填充屏幕。建议将高度设置到listview的外层布局上...转载 2019-05-29 10:54:52 · 1842 阅读 · 0 评论 -
基于ExpansionTitle实现可展开的列表
一、二、ExpansionTitle三、如何实现可折叠的列表?--数据要求--ExpansionTile_buildSub中使用FractionallySizedBox的原因是,如果不使用FractionallySiedBox的话,它撑不满屏幕的宽度四、可以展开的listview五、代码:import ...转载 2019-05-29 12:43:34 · 660 阅读 · 0 评论 -
网格布局
一、要实现的效果二、基于GridView实现网格布局GridView是flutter中用于展示网格布局风格的widget,通常使用GridView.count构造函数来创建一个GridView使用方式:GridView.count可以用来控制一行显示几列通过在GridView.count()函数中设置crossAxisCount来设置一行显示多少列,同时GridView.c...转载 2019-05-29 13:02:22 · 590 阅读 · 0 评论 -
列表下拉刷新与上拉加载更多功能实现
一、如何实现列表下拉刷新?在Flutter中有一个RefreshIndicator,它是一个下拉刷新的widget,通过它我们可以实现列表的下拉刷新二、添加下拉刷新的代码刷新过程中刷新完成后数据发生了变化,第一条数据由北京变成了拉萨,完成了对数据的处理三、如何实现上拉加载更多?为了给列表添加拉加载更多的功能,我们可以借助Scrol...转载 2019-05-29 13:59:09 · 1194 阅读 · 0 评论 -
Flutter混合开发流程与创建Flutter module
一、二、混合开发的应用场景1、2、三、Flutter集成步骤四、创建Flutter module在做混合开发之前,我们需要创建一个Flutter module七、...转载 2019-05-29 14:36:08 · 3467 阅读 · 1 评论 -
Flutter Android 混合开发实战-集成与调用
一、在Android 项目中集成Flutter1、打开Gradle Scripts下的settings.gradle2、在settings.gradle中添加如下代码下面所配置的路径一定要与项目的路径一致,也就是说这个flutter_module一定要与FlutterHybirdAndroid原生工程在同一个目录下setBinding(new Bindin...转载 2019-05-29 18:57:35 · 2107 阅读 · 0 评论 -
Flutter Android混合开发实战-调试与发布
一、热重启、重新加载二、调试Dart代码:三、如:如:注:出现的问题:1、Target file "lib/main.dart" not found原因:flutter attach命令必须在flutter的根目录运...转载 2019-05-29 19:45:19 · 4396 阅读 · 0 评论 -
动画Animation开发指南-Hero动画2
一、Hero函数原型-tag:[必须]用于关联两个Hero动画的标识-createRectTween:定义目标Hero的边界,在从起始位置到目的位置的“飞行”过程中该如何变化-child:[必须]定义动画所呈现的widget实现径向hero动画二、实现径向动画从圆形变方形,从方形变圆形import 'package:flutter/material.d...转载 2019-05-27 15:59:03 · 676 阅读 · 0 评论 -
动画Animation开发指南-Hero动画一
一、点击图标后,这个图标就完成了两个界面之间的过渡。这个图标有从大图逐渐变成小图的位置,这就是Hero标准动画的实现代码:import 'package:flutter/material.dart';import 'package:flutter_color_plugin/flutter_color_plugin.dart';...转载 2019-05-27 14:23:47 · 1147 阅读 · 0 评论 -
创建并运行flutter项目
1、创建flutter应用①通过Android studio创建②通过命令创建在create后加项目名字2、flutter_app: flutter项目android[flutter app android]: Android部分宿主工程ios: ios宿主工程lib: lib目录是整个flutter项目的入口文件3、...转载 2019-05-25 17:12:11 · 4315 阅读 · 0 评论 -
Flutter开发工具使用指南
1、在Android studio中安装flutter和dart工具后,Android studio就具有开发flutter的能力了最上面是开发工具栏,当选择Android SDKbuild for x86后就可以在选定的模拟器上运行flutter项目了如果没有创建模拟器,在ios环境下可以通过“Open iOS Simulator ”来打开ios模拟器如果没有创建模拟器,在And...转载 2019-05-25 17:46:34 · 4034 阅读 · 0 评论 -
学习flutter应该具备哪些基础知识?
1、2、flutter是基于Dart开发的,Dart是面向对象的强类型开发语言,它和java很像,但是和javascript有很大的区别3、创建和运行flutter项目的方式创建flutter项目的两种方式:①通过Android studio创建:File-->new Flutter Project②通过命令创建:flutt...转载 2019-05-25 19:08:33 · 3647 阅读 · 0 评论 -
StatelessWidget与基础组件
1、在flutter里面,一切皆组件,在组件里面撑起flutter半边天的一个是无状态StatelessWidget组件,一个是有状态的StatefulWidget组件2、container:容器组件Text:文本组件Icon:图标组件CloseButton:关闭按钮的组件BackButton:返回按钮的组件Chip:材料设计中非常有趣的一个组件Div...转载 2019-05-25 22:05:32 · 809 阅读 · 0 评论 -
StatefulWidget与组件
1、MaterialApp:他是一个材料设计的app组件,通常用于放在界面的根节点Scaffold:是flutter封装的一个带有AppBar、底部的导航栏BottomNavigationBar、侧边栏等这些效果的一个组件,也就是说借助Scaffold,可以轻松地实现一个flutter的页面AppBar: 就是App顶部的导航栏BotomNavigationBar:是App底部...转载 2019-05-26 00:14:35 · 204 阅读 · 0 评论 -
如何进行flutter布局开发?
1、2、RenderObjectWidget:它主要提供了一些如何去约束它里面的布局的一些配置。它有两个比较重要的实现,一个是SingleChildRenderObjectWidget,另一个是MultiChildRenderObjectWidget.SingleChildRenderObjectWidget:单节点的一个组件Opacity [əʊˈpæsə...转载 2019-05-26 11:54:30 · 288 阅读 · 0 评论 -
如何创建和使用Flutter的路由与导航?
1、在flutter里面创建路由有两种方式:一种是先定义一个路由。页面之间跳转是以页面为单位的,每个页面都可以起一个路由的名字。就是在路由里面注册一下,然后给它起个名字。另一种是通过Navigator直接进行跳转。2、注册路由3、创建主界面4、界面跳转1)默认不通过路由进行跳转点击后完成界面的跳转2)通过路由名进行跳转...转载 2019-05-26 13:50:40 · 686 阅读 · 0 评论 -
如何检测用户手势及处理点击事件
1、添加手势识别的代码2、按下-->松开 会产生一个点击事件3、长按时,会产生一个 按下-->取消-->长按的事件就是说长按的化会有一个取消的事件告诉我们4、取消事件:当按住控件,然后划出控件的范围时,会产生取消的事件,但是没有‘松开’和‘点击’的回调,这就代表了‘取消’的事件5、画小球按住小球进行拖动...转载 2019-05-26 14:34:09 · 395 阅读 · 0 评论 -
如何导入和使用Flutter的资源文件?
1、Flutter资源文件里有常用的图片以及字体文件,最常用的就是图片了。2、在pubspec.yaml文件中的assets节点下配置资源的路径,包括缩略符3、创建一个文件夹,并导入图片4、配置图片资源5、创建res_page.dart文件6、使用图片7、运行结果:图片正确加载8、import 'package...转载 2019-05-26 17:05:23 · 3503 阅读 · 1 评论 -
如何打开第三方应用?
1、在flutter里面打开第三方应用可以借助插件url_launcher这个插件是flutter团队为我们提供的,这个插件是用于在flutter里面打开第三方app的2、添加依赖,然后点击 Packages get进行安装3、引入头文件4、打开浏览器5、运行结果:6、打开第三方应用在打开第三方应用的时候,首先要知道该app的sche...转载 2019-05-26 17:46:35 · 4263 阅读 · 0 评论 -
图片控件开发详解
1、2、3、4、5、6、7、8、9、10、11、注:1、转载 2019-05-26 19:17:03 · 196 阅读 · 0 评论 -
动画Animation开发指南-动画基础类
一、二、在Flutter中有哪些类型的动画?(可根据官方提供的Flutter gallery中的示例来学习动画)在Flutter中动画分为两类:基于tween或基于物理的。--补间(Tween)动画:在补间动画中,定义了开始点和结束点、时间线以及定义转换时间和速度的曲线。然后由框架计算如何从开始点过度到结束点。--基于物理的动画:在基于物理的动画中,运动被模拟为与真实...转载 2019-05-27 10:44:08 · 661 阅读 · 0 评论 -
动画Animation开发指南-AnimatedWidget与AnimatedBuilder一
为widget添加动画在下面的实例中为logo添加了要给从小放大的动画:代码:import 'package:flutter/material.dart';import 'package:flutter_color_plugin/flutter_color_plugin.dart';void main() => runApp(AnimationU...转载 2019-05-27 11:46:45 · 281 阅读 · 0 评论 -
动画Animation开发指南-AimatedWidget与AnimatedBuilder二
一、如何为动画添加监听器?有时我们需要制动动画执行的进度和状态,在Flutter中我们可以通过Animation的addListener与addStatusListener方法为动画添加监听器:-addListener:动画的值发生变化时被调用-addStatusListener:动画状态发生变化时被调用二、用AnimatedWidget与AnimatedBuilde...转载 2019-05-27 12:22:38 · 223 阅读 · 0 评论 -
动画Animation开发指南-AimatedWidget与AnimatedBuilder三
一、什么是AnimatedBuilder?AnimatedBuilder 是用于构建动画的统一widget,AnimatedBuilder对于希望将动画作为更大构建函数的一部分包含在内的更复杂的widget时非常有用,其实你可以这样理解:AnimatedBuilder是拆分动画的一个工具类,借助它我们可以将动画和widget进行分离:在上面的实例中我们的代码存在一个问题:更改动画需要更改显...转载 2019-05-27 13:04:02 · 611 阅读 · 0 评论