flutter_inner_drawer 使用
版本:
flutter_inner_drawer: "^0.2.2"
github: https://github.com/Dn-a/flutter_inner_drawer
这个比较简单,直接上code,或者在github上面看就ok了
story.dart
import 'package:flutter/material.dart'; import 'story_data.dart';
import 'story_item.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:flutter_inner_drawer/inner_drawer.dart'; void main() => runApp(Story()); class Story extends StatefulWidget {
@override
_Story createState() => new _Story();
} class _Story extends State<Story> {
bool isLoading = false; //是否正在请求新数据
bool showMore = false; //是否显示底部加载中提示
bool offState = false; //是否显示进入页面时的圆形进度条
int page = ;
ScrollController scrollController = ScrollController();
final GlobalKey<InnerDrawerState> _innerDrawerKey =
GlobalKey<InnerDrawerState>();
Future<void> getMoreData() async {
print('xx');
if (isLoading) {
return;
}
setState(() {
isLoading = true;
page = ;
});
print('下拉刷新开始,page = $page'); await Future.delayed(Duration(seconds: ), () {
setState(() {
isLoading = false;
final arr = new StoryData(
,
'images/story/03/cover.jpg',
'episode.26',
'放课後',
'终於可以和自己憧憬的同学自然的说早安。正当爽子正在为这件事感动的时候,这学期代理班导的副班导荒井一市(通称:阿瓶)登场了,阿瓶正想要擅自决定谁来制作出席簿时,不想看到大家困扰的爽子就举起了手…。',
[]);
storyData.add(arr);
print('下拉刷新结束,page = $page');
});
});
} void getListData() {} @override
void initState() {
super.initState();
scrollController.addListener(() {
if (scrollController.position.pixels ==
scrollController.position.maxScrollExtent) {
print('滑动到了最底部${scrollController.position.pixels}');
setState(() {
showMore = true;
});
getMoreData(); // 增加点数据
}
});
getListData(); // 暂时未使用
} @override
void dispose() {
super.dispose();
//手动停止滑动监听
scrollController.dispose();
} @override
Widget build(BuildContext context) {
// TODO: implement build return InnerDrawer(
key: _innerDrawerKey,
position: InnerDrawerPosition.start, // 滑动方向
onTapClose: true, // default false 点击关闭
swipe: true, // default true
offset: 0.6, // default 0.4
colorTransition: Colors.yellow, // default Color.black54 转变颜色
animationType: InnerDrawerAnimation.linear, // default static static / linear / quadratic
innerDrawerCallback: (a) => print(a), // return bool
child: Material(
child: SafeArea(
child: Container(
alignment: Alignment.topLeft,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/bg/flower_one.jpg'),
fit: BoxFit.cover,
),
border: new Border(
right: BorderSide(color: Colors.pink, width: 0.5),
bottom: BorderSide(color: Colors.pink, width: 0.5),
)),
child: new Column(
children: <Widget>[
new Container(
margin: const EdgeInsets.only(top: 100.0),
color: Colors.green,
child: new Row(
children: <Widget>[
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
),
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
),
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
)
],
)),
new Container(
margin: const EdgeInsets.only(top: 40.0),
color: Colors.green,
child: new Row(
children: <Widget>[
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
),
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
),
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
)
],
)),
new Container(
margin: const EdgeInsets.only(top: 40.0),
color: Colors.green,
child: new Row(
children: <Widget>[
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
),
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
),
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
)
],
)),
new Container(
margin: const EdgeInsets.only(top: 40.0),
color: Colors.green,
child: new Row(
children: <Widget>[
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
),
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
),
Expanded(
child: Icon(Icons.adb, color: Colors.red),
flex: ,
)
],
))
],
),
))),
// A Scaffold is generally used but you are free to use other widgets
// Note: use "automaticallyImplyLeading: false" if you do not personalize "leading" of Bar
scaffold: Scaffold(
body: new RefreshIndicator(
child: isLoading == false
? new ListView.builder(
controller: scrollController,
itemCount: storyData.length, //列表长度+底部加载中提示
itemBuilder: (BuildContext context, int index) {
// 传入MessageData返回列表项
return new StoryItem(storyData[index]);
},
)
: new Stack(
children: <Widget>[
new Padding(
padding:
new EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 35.0),
child: new Center(
child: SpinKitFadingCircle(
color: Colors.blueAccent,
size: 30.0,
),
),
),
new Padding(
padding:
new EdgeInsets.fromLTRB(0.0, 35.0, 0.0, 0.0),
child: new Center(
child: new Text('正在加载中,莫着急哦~'),
),
),
],
),
onRefresh: _onRefresh)));
} Future<void> _onRefresh() async {
if (isLoading) {
return;
}
setState(() {
isLoading = true;
page = ;
}); print('下拉刷新开始,page = $page'); await Future.delayed(Duration(seconds: ), () {
setState(() {
isLoading = false;
final arr = new StoryData(
,
'images/story/03/cover.jpg',
'episode.26',
'放课後',
'终於可以和自己憧憬的同学自然的说早安。正当爽子正在为这件事感动的时候,这学期代理班导的副班导荒井一市(通称:阿瓶)登场了,阿瓶正想要擅自决定谁来制作出席簿时,不想看到大家困扰的爽子就举起了手…。',
[]);
storyData.add(arr);
print('下拉刷新结束,page = $page');
});
});
} void _open() {
_innerDrawerKey.currentState.open();
} void _close() {
_innerDrawerKey.currentState.close();
}
}
效果图:
---------------------拖动--------------------->
源码地址:https://github.com/ft1107949255/kiminitodoke
flutter_inner_drawer 使用的更多相关文章
随机推荐
- 代码的鲁棒性:链表中倒数第k个结点
题目描述 输入一个链表,输出该链表中倒数第k个结点.例如:输入一个链表,输出该链表中倒数第k个结点.为了符合大多数人的习惯,本题从1开始计数,即链表的尾结点是倒数第1个结点.例如一个链表有6个结点,从 ...
- 庖丁解牛 Activity 启动流程
前言 这是 Android 9.0 AOSP 系列 的第五篇了,先来回顾一下前面几篇的大致内容. Java 世界的盘古和女娲 -- Zygote 主要介绍了 Android 世界的第一个 Java 进 ...
- 搭建Android开发环境 以及 ionic 编译安卓app步骤
1. 下载安装JDK 下载地址: https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htm ...
- Docker设置镜像加速
一.为什么要设置镜像加速 由于docker的镜像源地址再国外,例如官方地址:https://hub.docker.com/search?q=hyperledger&type=image:因此下 ...
- https的原理
https目的是为了防止第三方截获信息,原理是使用非对称加密和数字证书认证传输密钥建立连接,使用密钥对称加密信息进行通讯. https建立连接的过程: 数字证书原理:
- 形如 T(n) = a * T(n/b) + f(n) 的时间复杂度计算方法
形如 T(n) = a * T(n/b) + f(n) 的时间复杂度计算方法 有一种方法叫做主方法(Master method)是用来专门计算这种形式的时间复杂度的,方法具体如下: 下边举例进行说明: ...
- .Net Core WebApi 模型验证无效时报400
问题 模型验证无效时,没有进入到接口里,而是直接报400 Bad Request,非常不友好. 环境 SDK:.Net Core 2.2.401 开发工具:VS2017 step 1 创建接口 /// ...
- OPENGL 坐标轴转换
坐标轴 平移 旋转 缩放 重置坐标轴 矩阵操作 示例 1.坐标轴 OpenGL 使用的右手坐标系,从正面看原点,逆时针旋转被认为是正旋转. x轴:从左到右 y轴:从底部向上 z轴:从屏幕背向朝向前方 ...
- 一文解读JSON (转)
JSON作为目前Web主流的数据交换格式,是每个IT技术人员都必须要了解的一种数据交换格式.尤其是在Ajax和REST技术的大行其道的当今,JSON无疑成为了数据交换格式的首选! 今天我们一起来学习一 ...
- Angular框架入门
今天简单学习了AngularJS框架,在这里我想简单的总结一下我所了解的AngularJS和一些入门案例! 首先,我们要知道什么是AngularJS? AngularJS 诞生于2009年,由Mis ...