pull to pulltorefreshnotification
flutter plugin for building pull to refresh effects with pulltorefreshnotification and pulltorefreshcontainer quickly.
sample 1 appbar
build appbar to pull to refresh with pulltorefreshcontainer
widget build(buildcontext context) {
return pulltorefreshnotification(
color: colors.blue,
pullbackonrefresh: true,
onrefresh: onrefresh,
child: customscrollview(
slivers: <widget>[
pulltorefreshcontainer(buildpulltorefreshappbar),
sliverlist(
delegate:
sliverchildbuilderdelegate((buildcontext context, int index) {
return container(
padding: edgeinsets.only(bottom: 4.0),
child: column(
children: <widget>[
text(
"list item : ${listlength - index}",
style: textstyle(fontsize: 15.0, inherit: false),
),
divider(
color: colors.grey,
height: 2.0,
)
],
));
}, childcount: listlength)),
],
),
);
}
widget buildpulltorefreshappbar(pulltorefreshscrollnotificationinfo info) {
print(info?.mode);
print(info?.dragoffset);
// print("------------");
var action = padding(
child: info?.refreshwiget ?? icon(icons.more_horiz),
padding: edgeinsets.all(15.0),
);
var offset = info?.dragoffset ?? 0.0;
// var mode = info?.mode;
// if (mode != null && mode == refreshindicatormode.done) {
// //showtoast("refresh done");
// }
return sliverappbar(
pinned: true,
title: text("pulltorefreshappbar"),
centertitle: true,
expandedheight: 200.0 + offset,
actions: <widget>[action],
flexiblespace: flexiblespacebar(
//centertitle: true,
title: text(
info?.mode?.tostring() ?? "",
style: textstyle(fontsize: 10.0),
),
collapsemode: collapsemode.pin,
background: image.asset(
"assets/467141054.jpg",
//fit: offset > 0.0 ? boxfit.cover : boxfit.fill,
fit: boxfit.cover,
)));
}
sample 2 header
build header to pull to refresh with pulltorefreshcontainer.
and you can easy to handle the status in pulling.
widget build(buildcontext context) {
return pulltorefreshnotification(
color: colors.blue,
onrefresh: onrefresh,
maxdragoffset: 80.0,
child: customscrollview(
slivers: <widget>[
sliverappbar(
pinned: true,
title: text("pulltorefreshheader"),
),
pulltorefreshcontainer(buildpulltorefreshheader),
sliverlist(
delegate:
sliverchildbuilderdelegate((buildcontext context, int index) {
return container(
padding: edgeinsets.only(bottom: 4.0),
child: column(
children: <widget>[
text(
"list item : ${listlength - index}",
style: textstyle(fontsize: 15.0, inherit: false),
),
divider(
color: colors.grey,
height: 2.0,
)
],
));
}, childcount: listlength)),
],
),
);
}
widget buildpulltorefreshheader(pulltorefreshscrollnotificationinfo info) {
//print(info?.mode);
//print(info?.dragoffset);
// print("------------");
var offset = info?.dragoffset ?? 0.0;
var mode = info?.mode;
widget refreshwiget = container();
//it should more than 18, so that refreshprogressindicator can be shown fully
if (info?.refreshwiget != null &&
offset > 18.0 &&
mode != refreshindicatormode.error) {
refreshwiget = info.refreshwiget;
}
widget child = null;
if (mode == refreshindicatormode.error) {
child = gesturedetector(
ontap: () {
// refreshnotification;
info?.pulltorefreshnotificationstate?.show();
},
child: container(
color: colors.grey,
alignment: alignment.bottomcenter,
height: offset,
width: double.infinity,
//padding: edgeinsets.only(top: offset),
child: container(
padding: edgeinsets.only(left: 5.0),
alignment: alignment.center,
child: text(
mode?.tostring() + " click to retry" ?? "",
style: textstyle(fontsize: 12.0, inherit: false),
),
),
));
} else {
child = container(
color: colors.grey,
alignment: alignment.bottomcenter,
height: offset,
width: double.infinity,
//padding: edgeinsets.only(top: offset),
child: row(
mainaxisalignment: mainaxisalignment.center,
children: <widget>[
refreshwiget,
container(
padding: edgeinsets.only(left: 5.0),
alignment: alignment.center,
child: text(
mode?.tostring() ?? "",
style: textstyle(fontsize: 12.0, inherit: false),
),
)
],
),
);
}
return slivertoboxadapter(
child: child,
);
}
bool success = false;
future<bool> onrefresh() {
final completer<bool> completer = new completer<bool>();
new timer(const duration(seconds: 2), () {
completer.complete(success);
success = true;
});
return completer.future.then((bool success) {
if (success) {
setstate(() {
listlength += 10;
});
}
return success;
});
}
sample 3 image
build zoom image to pull to refresh with using pulltorefreshcontainer.
widget build(buildcontext context) {
// todo: implement build
return pulltorefreshnotification(
color: colors.blue,
pullbackonrefresh: true,
onrefresh: onrefresh,
child: customscrollview(
slivers: <widget>[
sliverappbar(
title: text("pulltorefreshimage"),
),
pulltorefreshcontainer(buildpulltorefreshimage),
sliverlist(
delegate:
sliverchildbuilderdelegate((buildcontext context, int index) {
return container(
padding: edgeinsets.only(bottom: 4.0),
child: column(
children: <widget>[
text(
"list item : ${listlength - index}",
style: textstyle(fontsize: 15.0, inherit: false),
),
divider(
color: colors.grey,
height: 2.0,
)
],
));
}, childcount: listlength)),
],
),
);
}
widget buildpulltorefreshimage(pulltorefreshscrollnotificationinfo info) {
print(info?.mode);
print(info?.dragoffset);
// print("------------");
var offset = info?.dragoffset ?? 0.0;
widget refreshwiget = container();
if (info?.refreshwiget != null) {
refreshwiget = material(
type: materialtype.circle,
color: theme.of(context).canvascolor,
elevation: 2.0,
child: padding(
padding: edgeinsets.all(12),
child: info.refreshwiget,
),
);
}
return slivertoboxadapter(
child: stack(
alignment: alignment.center,
children: <widget>[
container(
height: 200.0 + offset,
width: double.infinity,
child: image.asset(
"assets/467141054.jpg",
//fit: offset > 0.0 ? boxfit.cover : boxfit.fill,
fit: boxfit.cover,
)),
center(
child: row(
mainaxisalignment: mainaxisalignment.center,
children: <widget>[
refreshwiget,
container(
padding: edgeinsets.only(left: 5.0),
alignment: alignment.center,
child: text(
info?.mode?.tostring() ?? "",
style: textstyle(fontsize: 12.0, inherit: false),
),
)
],
),
)
],
),
);
}
please see the example app of this for a full example.
Comments are closed.