Flutter
wjxbless
如果觉得简单,那就多思考
展开
-
Flutter 动画封装
AnimatedWidgetAnimatedWidget对addListener和setState进行了封装,示例如下import 'package:flutter/material.dart';class AnimatedLogo extends AnimatedWidget { // listenable类似之前写的addListener,此时可以监听a...原创 2020-04-28 15:24:14 · 617 阅读 · 0 评论 -
Flutter实现层叠滑动效果
实现效果项目地址滑动效果使用PageView滑动来控制当前显示的位置Stack( children: <Widget>[ // 两者堆叠在一起。通过PageView滑动的Controller来控制当前显示的page CardScrollWidget(currentPage), Positioned.fill( child: Page...原创 2020-04-26 18:17:18 · 4560 阅读 · 3 评论 -
Flutter 实现自定义侧滑--side menu
实现效果项目源码对flutter中的动画不了解的可以看这篇 Flutter 动画入门实现首先将界面拆解成两部分 menu 和 homePage 使用Stack组件将两者包裹起来(类似使用FrameLayout)return Scaffold( backgroundColor: backgroundColor, body: Stack( children: <W...原创 2020-04-22 15:25:04 · 1200 阅读 · 0 评论 -
Flutter 动画入门
简介Flutter动画核心类:Animation类,它可以判断当前动画的状态(开始,停止,移动,前进,反向),它是由AnimationController管理的,并通过Listeners和StatusListeners管理动画状态的所发生的变化,我们先对动画有了大体的了解,下面我们对其中提到的类进行逐一学习这次主要学习flutter动画中的 平移,缩放,旋转,透明度,插值器,是为之后的自定义...原创 2020-04-21 21:59:57 · 574 阅读 · 0 评论 -
Flutter实现的精致的聊天界面
偶然实现聊天UI的视频教程链接项目源码链接实现效果如下:原创 2020-04-20 19:39:38 · 1295 阅读 · 0 评论 -
Flutter 多语言国际化配置 -- 使用Intl插件
安装插件Android Studio -> File -> Setting -> Plugins -> 搜索Flutter Intl配置项目首先在项目pubspec.yaml中添加如下语句并执行 package getdev_dependencies:... flutter_localizations: sdk: flutter在菜单栏的To...原创 2020-04-13 20:45:18 · 5475 阅读 · 0 评论 -
Hey Flutter: 体验较佳的WanAndroid Flutter客户端
WanAndroid-Flutter 项目????????????项目基于 Flutter 移动应用框架,采用 Dart 语言编写,继续打造新的WanAndroid,重新打磨之前的flutter版本的WanAndroid, 持续更新…项目地址WanAndroid(github) (留下个star再走叭)下载体验当前版本(1.0)项目展示项目功能待完成功能夜间模式切换语言...原创 2020-04-09 14:28:54 · 1101 阅读 · 0 评论 -
Flutter--线程模型
Flutter线程模型isolate是通过Flutter Engine层面的一个线程来实现的,Flutter Engine线程的创建和管理是由embedder负责的,下面是Flutter Engine的运行架构Platform Task Runner它是Flutter Engine的主Task Runner,既可以处理与Engine的交互也可以处理来自native平台的交互,...原创 2020-03-21 22:25:54 · 1255 阅读 · 0 评论 -
Flutter--网络请求(三)dio封装网络请求框架
dio简介dio库支持文件的上传和下载,Cookie管理、FormData、请求/取消、拦截器等,和Android中的OkHttp库相似基本用法import 'package:dio/dio.dart';_loadDataGet() async { try { Response response = await ...原创 2020-03-21 14:34:44 · 2619 阅读 · 1 评论 -
Flutter--网络请求(二)Json转换dart对象
JSON转换成Dart对象假设请求的返回的JSON数据如下{“id" : 12345, "title" : "titleName"}对应的dart对象class Article { final String title; // dynamic表示不知道传进去什么类型 Artilce.fromJson(Map<String, dynamic> j...原创 2020-03-21 13:25:52 · 4550 阅读 · 0 评论 -
AweSome Flutter: 一起做一个项目 Wan Flutter !
WanAndroid-Flutter 项目????????????项目基于 Flutter 移动应用框架,采用 Dart 语言编写,继续打造新的WanAndroid项目地址WanAndroid(github) (留下个star再走叭)下载体验当前版本(1.0)项目展示项目功能首页首页文章列表首页banner搜索热词(包含在搜索界面)置顶文章广场我的分享分享文章...原创 2020-03-20 20:14:40 · 264 阅读 · 0 评论 -
Flutter--状态管理机制
简介Flutter的一些组件我们用了三天左右有了部分了解,在日后的工作学习中使用到了,我们可以再进行深入了解。平时我们呢使用的数据是动态的,所以我们在了解组件的同时,我们还需要对状态管理机制有一些了解Widget唯一标识在Flutter中,每个Widget都有一个唯一标识key,它在FrameWork层创建和渲染时生成,可以通过 GlobalKey、LocalKey、UniqueKey...原创 2020-03-11 17:24:42 · 1190 阅读 · 0 评论 -
Flutter--网络请求(一)利用Dart原生http实现
Json字符串和Map类型转换import 'dart:convert'// Json转MapJson.decode(strData)// Map转JsonMap userInfo = {"username": "wjx", "age": 22};print(json.encode(userInfo));使用Dart原生http实现网络请求实例首先在pubspec.yaml中导...原创 2020-03-11 16:00:38 · 772 阅读 · 0 评论 -
Flutter--表单
TextField属性释义maxLines多行文本框onChanged监听文本框中的文字改变decorationhintText, border, labelText, labelStyleobscureText把文本框改为密码框controller结合TextEditingController()可以配置表单默认显示内容import ...原创 2020-03-11 00:02:15 · 335 阅读 · 0 评论 -
Flutter--按钮组件
属性属性释义onPressed按钮点击响应事件textColor按钮显示文本的颜色color按钮的颜色diabledColor按钮禁用时的颜色disabledTextColor按钮禁用时的文本颜色splashColor水波纹颜色highlightColor长按显示的颜色elevation阴影的范围,值越大阴影范围越大...原创 2020-03-10 19:18:28 · 278 阅读 · 0 评论 -
Flutter--DrawerLayout
Drawer 侧边栏drawer: Drawer( child: Text('左侧边栏'), ),endDrawer: Drawer( child: Text('右侧侧边栏'), ),DrawerHeaderdrawer: Drawer( child: Column( children: <Widget>[ ...原创 2020-03-10 11:41:43 · 194 阅读 · 0 评论 -
Flutter--自定义顶部导航栏、(TabBar)TabLayout
appbar属性属性释义leading导航按钮显示的图标title标题actions相当于menubottom通常用来放置tabBarbackgroundColor导航背景颜色iconTheme图表样式textTheme文字样式centerTitle标题是否居中显示自定义AppBar使用import 'pac...原创 2020-03-10 11:03:59 · 1433 阅读 · 0 评论 -
Flutter--替换路由、指定跳转路由
替换路由注意路由配置和上篇文章配置相同import 'package:flutter/material.dart';class MinePage extends StatefulWidget { MinePage({Key key}) : super(key: key); _MinePageState createState() => _MinePageState();...原创 2020-03-09 20:53:10 · 693 阅读 · 0 评论 -
Flutter--路由(页面跳转)
基本路由的使用import 'package:flutter/material.dart';import 'package:flutter_app/pages/info.dart'; // 将页面引入class HomePage extends StatefulWidget { HomePage({Key key}) : super(key: key); _HomePageStat...原创 2020-03-09 20:26:13 · 641 阅读 · 0 评论 -
Flutter--BottomNavigationBar组件
BottomNavigationBar属性释义itemsLisst底部导航按钮集合iconSizeiconcurrentIndex默认选中的tabonTap选中变化函数fixedColor选中的颜色typeBottomNavigationBarType.fixed, BottomNavigationBarType.shifting...原创 2020-03-09 15:48:34 · 211 阅读 · 0 评论 -
Flutter有状态组件
简介StatefulWidget:有状态组件,持有的状态可以在Widget声明周期改变(即数据可以进行修改)class HomeContent extends StatefulWidget { HomeContent({Key key}) : super(key: key); _HomeContentState createState() => _HomeContentSt...原创 2020-03-09 15:05:23 · 151 阅读 · 0 评论 -
Flutter--Wrap组件
属性属性释义direction主轴的方向默认为水平alignment主轴的对齐方式spacing主轴方向上的间距textDirection文本方向verticlaDirectionchildren的摆放方向runAlignment新的行或者新的列runSpacingrun的间距class HomeContent exte...原创 2020-03-09 14:08:16 · 167 阅读 · 0 评论 -
Flutter--卡片组件
AspectRatio组件属性释义aspectRatio宽高比(参考值)AspectRatio使用class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return ...原创 2020-03-09 13:42:43 · 345 阅读 · 0 评论 -
Flutter--Stack组件(FrameLayout)
属性属性释义alignment控制内部子元素显示位置position控制内部子元素的显示位置默认所有元素显示在左上角,和Android中的FrameLayout类似eg:Stack使用:class HomeContent extends StatelessWidget { @override Widget build(BuildContext ...原创 2020-03-08 21:13:05 · 872 阅读 · 0 评论 -
Flutter--页面布局
Padding组件class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { return Padding( padding: EdgeInsets.fromLTRB(0, 0, 10, 0), child: GridView.coun...原创 2020-03-08 20:51:55 · 639 阅读 · 0 评论 -
Flutter--GridView组件
属性属性释义scrollDirection滚动方向padding内边距resolve组件反向排序crossAxisSpacing控件水平间距mainAxisSpacing控件垂直边距crossAxisCount每行控件数量childAspectRatio每个控件的宽高比gridDelefate一般在GridView.b...原创 2020-03-08 20:06:24 · 156 阅读 · 0 评论 -
Flutter--ListView列表组件基础
ListView属性释义scrollDirectionAxis.horizoontal 水平padding内边距resolve组件反向排序children列表元素垂直列表// 默认为垂直列表// leading : 类似每个item的头像// title : item标题// subtitle: item的副标题// trailing...原创 2020-03-08 19:24:03 · 278 阅读 · 0 评论 -
Flutter--基础组件
Text属性释义textAlign对齐方式maxxLines最大行数textScaleFactor缩放因子,默认值为10overflow配合maxLines使用,超出最大行数可以用省略号或渐变效果styleTextStyle对象textSpan实现类似富文本return MaterialApp( titl...原创 2020-02-19 11:24:13 · 217 阅读 · 2 评论