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 使用的更多相关文章
随机推荐
- CSS样式 解决文字过长显示省略号问题
一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...
- Dc:7 Vulnhub Walkthrough
靶机下载地址: https://www.vulnhub.com/entry/dc-7,356/ 主机扫描: http://10.10.202.161/ Google搜索下: SSH 登录 以上分析得出 ...
- Sqlite—锁机制
https://blog.csdn.net/zhangsheng_1992/article/details/52598396 https://blog.csdn.net/xiyangyang8110/ ...
- zip,rar及linux下常用的压缩格式
日常操作中我们经常使用到文件压缩操作,其使用一些特定的算法来减小文件的大小,可以提高传输数据时的速率和减少数据在一些存储机制上占有的空间大小,实现空间利用最大化. 比如:如果你想通过邮箱发送一个文件夹 ...
- 现代“十二要素应用”与 Kubernetes
"十二要素应用"为开发SaaS应用提供了方法上的指导,而Docker能够提供打包依赖,解耦后端服务等特性,使得两者非常吻合.这篇文章介绍了Docker特性怎样满足了开发" ...
- Leetcode题解 - DFS部分简单题目代码+思路(113、114、116、117、1020、494、576、688)
这次接触到记忆化DFS,不过还需要多加练习 113. 路径总和 II - (根到叶子结点相关信息记录) """ 思路: 本题 = 根到叶子结点的路径记录 + 根到叶子结点 ...
- Dev 日志 | 文章《快速体验知识图谱 OwnThink》中的技术问题
社区小伙伴反馈在实践文章<使用图数据库 Nebula Graph 数据导入快速体验知识图谱 OwnThink>时,遇到了一些问题,Nebula Graph 将在本文对该文章中出现的问题进行 ...
- C# 中的基本数值类型
在之前的文章中(地址:https://www.vinanysoft.com/c-sharp-basics/introducing/),以 HelloWorld 程序为基础,介绍 C# 语言.它的结构. ...
- C# -- 多线程向同一文件写入
1. 多线程向同一文件写入Log. public delegate void AsyncLog(string str1, string str2); private void Test() { Con ...
- VUE程序调试的方法
目录 VUE程序调试的方法 1.写本文的背景 2.调试与测试 3.Console调试法 3.1 添加console.log指令 3.2 调出温度界面如下 3.3 Google浏览器的Console窗口 ...