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 使用的更多相关文章
随机推荐
- LVM(逻辑卷管理器)部署、扩容、缩小
物理卷 -- Physical Volume -- PV 卷组 -- Volume Group -- VG 逻辑卷 -- Logical Volume -- LV 1.硬盘设备管理技术虽然能够有效 ...
- ASP.NET+d3.js实现Sqlserver数据库的可视化展示
效果: 数据库端: 前端展示: 实现原理: 1.在数据段建立两个存储过程 queryUserAnsawer(id) 根据用户ID返回每一题的得分,主要是bcp exe时不能直接在sqlserver中执 ...
- imageRectForContentRect,titleRectForContentRect,contentRectForBounds,imageRectForContentRect什么时候调用
UIButton的布局顺序细节 什么时候调用imageRectForContentRect,titleRectForContentRect,contentRectForBounds,imageRect ...
- Linux下修改MySQL数据库数据文件路径
使用rpm安装方式安装完MySQL数据库后,数据文件的默认路径为/var/lib/mysql,然而根目录并不适合用于存储数据文件. 原路径:/var/lib/mysql 目标路径:/home/mysq ...
- JavaScript数组循环
JavaScript数组循环 一.前言 利用Javascript map(),reduce()和filter()数组方法可以遍历数组.而不是积累起来for循环和嵌套来处理列表和集合中的数据,利用这些方 ...
- Fortify---Detail--Sql注入
Abstract: 在 PaperDao.java 的第 40 行,checkQuesUsed() 方法调用通过不可信来源的输入构建的 SQL 查询.通过这种调用,攻击者能够修改指令的含义或执行任 ...
- Vultr主机绑定域名
1.在腾讯云上注册域名 然后,域名实名认证 2.Vultr主机购买(看我之前写的:手把手教你如何自己搭梯子) 然后会获取到一个服务器IP地址 3.绑定域名与IP 点解,解析后会弹出让你输入IP地址,此 ...
- spark shell操作
RDD有两种类型的操作 ,分别是Transformation(返回一个新的RDD)和Action(返回values). 1.Transformation:根据已有RDD创建新的RDD数据集build ...
- iOS引导页(开局滚动效果)
参考链接1:https://jingyan.baidu.com/article/4dc40848a341dfc8d846f152.html 参考链接2:https://www.cnblogs.com/ ...
- Android框架式编程之Lifecycle
Lifecycle官方文档地址:https://developer.android.com/topic/libraries/architecture/lifecycle. 一.为什么要使用Lifecy ...