Thursday 4 July 2019

A custom refresh indicator for flutter

flutter tutorial,flutter,flutter tutorial for beginners,flutter app,flutter tutorials,flutter sdk,tutorial,flutter course,learn flutter,flutter tutorial ios,flutter firebase tutorial,flutter widgets,flutter app development tutorial,flutter ios,flutter dart,flutter android,google flutter,flutter sdk tutorial,flutter tutorial app,google flutter tutorial,flutter sqflite tutorial,flutter tutorial deutsch,flutter tutorial android


Liquid Pull To Refresh

A beautiful and custom refresh indicator for flutter highly inspired from Ramotion Pull Down to Refresh.

Installing

1. Depend on it

Add this to your package's pubspec.yaml file:
dependencies:
  liquid_pull_to_refresh: ^1.1.0
YAML

2. Install it

You can install packages from the command line:
with pub:
$ pub get
CSS
with Flutter:
$ flutter packages get
CSS

3. Import it

Now in your Dart code, you can use:
import 'package:liquid_pull_to_refresh/liquid_pull_to_refresh.dart';
Dart

Usage

For adding this custom refresh indicator in your flutter app, you have to simply wrap ListView or GridView inside LiquidPullToRefresh. Also you have provide the value of onRefreshparameter which is a refresh callback.
Note - LiquidPullToRefresh can only be used with a vertical scroll view.
For example:
LiquidPullToRefresh(
        key: _refreshIndicatorKey, // key if you want to add
        onRefresh: _handleRefresh, // refresh callback
        child: ListView(),  // scroll view
      );
Dart
If you do not want the opacity transition of child then set showChildOpacityTransition: false. Preview regarding the both form of this widget is follows :-
flutter tutorial,flutter,flutter tutorial for beginners,flutter app,flutter tutorials,flutter sdk,tutorial,flutter course,learn flutter,flutter tutorial ios,flutter firebase tutorial,flutter widgets,flutter app development tutorial,flutter ios,flutter dart,flutter android,google flutter,flutter sdk tutorial,flutter tutorial app,google flutter tutorial,flutter sqflite tutorial,flutter tutorial deutsch,flutter tutorial android





flutter tutorial,flutter,flutter tutorial for beginners,flutter app,flutter tutorials,flutter sdk,tutorial,flutter course,learn flutter,flutter tutorial ios,flutter firebase tutorial,flutter widgets,flutter app development tutorial,flutter ios,flutter dart,flutter android,google flutter,flutter sdk tutorial,flutter tutorial app,google flutter tutorial,flutter sqflite tutorial,flutter tutorial deutsch,flutter tutorial android

Documentation

LiquidPullToRefresh Class

DART ATTRIBUTEDATATYPEDESCRIPTIONDEFAULT VALUE
childScrollViewThe widget below this widget in the tree.@required
onRefreshRefreshCallbackA function that's called when the refreshing of page takes place.@required
heightdoubleThe distance from the child's top or bottom edge to where the box will settle after the spring effect.100.0
springAnimationDurationInMillisecondsintDuration in milliseconds of springy effect that occurs when we leave dragging after full drag.1000
borderWidthdoubleBorder width of progressing circle in Progressing Indicator.2.0
showChildOpacityTransitionboolWhether to show child opacity transition or not.true
colorColorThe progress indicator's foreground color.ThemeData.accentColor
backgroundColorColorThe progress indicator's background color.ThemeData.canvasColor
notificationPredicateScrollNotificationPredicateA check that specifies whether a ScrollNotificationshould be handled by this widget.null
scrollControllerScrollControllerControls the ScrollViewchild.null
For help on editing package code, view the flutter documentation.


GitHub

🔁 A custom refresh indicator for flutter. — Read More
Latest commit to the master branch on 7-10-2019
Download as zip