Skip to content

Commit e34536d

Browse files
gonuitgonuit
committed
Update readme
1 parent 1938cb9 commit e34536d

File tree

1 file changed

+39
-62
lines changed

1 file changed

+39
-62
lines changed

‎README.md‎

Lines changed: 39 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
# Flutter Custom Refresh Indicator
2+
23
[![Tests](https://github.com/gonuit/flutter-custom-refresh-indicator/actions/workflows/test.yml/badge.svg)](https://github.com/gonuit/flutter-custom-refresh-indicator/actions/workflows/test.yml)
3-
4-
A flutter package that allows you to easily create a `Custom RefreshIndicator` widget.
5-
6-
**Bored of reading long readmes? Check out this [ONLINE DEMO](https://custom-refresh-indicator.klyta.it)**!
4+
5+
A flutter package that allows you to easily create a custom refresh indicator widget.
6+
7+
### **TLDR; [ONLINE DEMO](https://custom-refresh-indicator.klyta.it)**!
78

89
---
910

@@ -15,9 +16,9 @@ A flutter package that allows you to easily create a `Custom RefreshIndicator` w
1516
- [Examples](#examples)
1617
- [Documentation](#documentation)
1718
- [CustomRefreshIndicator widget](#customrefreshindicator-widget)
19+
- [`onStateChanged`](#onStateChanged)
1820
- [IndicatorController](#indicatorcontroller)
1921
- [Controller state and value changes.](#controller-state-and-value-changes)
20-
- [`didStateChange`](#didstatechange)
2122

2223
# QUICK START
2324

@@ -66,29 +67,51 @@ CustomRefreshIndicator(
6667

6768
Almost all of these examples are available in the example application.
6869

69-
| Plane indicator [[SOURCE CODE](example/lib/indicators/plane_indicator.dart)] | Ice cream indicator [[SOURCE CODE](example/lib/indicators/ice_cream_indicator.dart)] |
70+
| Plane indicator [[SOURCE CODE](example/lib/indicators/plane_indicator.dart)][[DEMO](https://custom-refresh-indicator.klyta.it/#/plane)] | Ice cream [[SOURCE CODE](example/lib/indicators/ice_cream_indicator.dart)][[DEMO](https://custom-refresh-indicator.klyta.it/#/ice_cream)] |
7071
| :--------------------------------------------------------------------------: | :----------------------------------------------------------------------------------: |
7172
| ![plane_indicator](readme/plane_indicator.gif) | ![ice_cream_indicator](readme/ice_cream_indicator.gif) |
7273

73-
| Warp indicator [[SOURCE CODE](example/lib/indicators/warp_indicator.dart)] | Envelope indicator |
74+
| Warp [[SOURCE CODE](example/lib/indicators/warp_indicator.dart)][[DEMO](https://custom-refresh-indicator.klyta.it/#/warp)] | Envelope |
7475
| :------------------------------------------------------------------------: | :----------------------------------------------: |
7576
| ![warp_indicator](readme/warp_indicator.gif) | ![letter_indicator](readme/letter_indicator.gif) |
7677

77-
| Indicator with complete state [[SOURCE CODE](example/lib/indicators/check_mark_indicator.dart)] | Your indicator |
78+
| With complete state [[SOURCE CODE](example/lib/indicators/check_mark_indicator.dart)][[DEMO](https://custom-refresh-indicator.klyta.it/#/check-mark)] | Your indicator |
7879
| :---------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------: |
7980
| ![indicator_with_complete_state](readme/indicator_with_complete_state.gif) | Have you created a fancy refresh indicator? This place is for you. Open PR. |
8081

8182
# Documentation
8283

8384
## CustomRefreshIndicator widget
8485

85-
`CustomRefreshIndicator` widget provides an absolute minimum functionality that allows you to create and set your own custom indicators.
86+
The _CustomRefreshIndicator_ widget provides an absolute minimum functionality that allows you to create and set your own custom indicators.
87+
88+
### onStateChanged
89+
90+
The _onStateChanged_ callback is called everytime _IndicatorState_ has been changed.
91+
This is a convenient place for tracking indicator state changes. For a reference take a look at the [example check mark indicator widget](example/lib/indicators/check_mark_indicator.dart).
92+
93+
Example usage:
94+
```dart
95+
CustomRefreshIndicator(
96+
onRefresh: onRefresh,
97+
// You can track state changes here.
98+
onStateChanged: (IndicatorStateChange change) {
99+
if (change.didChange(from: IndicatorState.dragging, to: IndicatorState.armed)) {
100+
// Do something...
101+
} else if(change.didChange(to: IndicatorState.idle)) {
102+
// Do something...
103+
}
104+
// And so on...
105+
}
106+
// ...
107+
)
108+
```
86109

87110
## IndicatorController
88111

89112
### Controller state and value changes.
90113

91-
The best way to understand how the "CustomRefreshIndicator" widget changes its controller data is to see the example 😉. An example is available in the example application.
114+
The best way to understand how the _CustomRefreshIndicator_ widget changes its controller data is to see the example 😉. An example is available in the example application.
92115

93116
![Controller_Data](readme/controller_data.gif)
94117

@@ -103,58 +126,12 @@ The best way to understand how the "CustomRefreshIndicator" widget changes its c
103126

104127
---
105128

106-
### IndicatorStateHelper
129+
### Support
107130

108-
With the IndicatorStateHelper class, you can easily track indicator's state changes. Example usage can be found [HERE](example/lib/indicators/check_mark_indicator.dart).
109-
110-
All you need to do is to update it's value on every controller update.
111-
112-
```dart
113-
CustomRefreshIndicator(
114-
onRefresh: onRefresh,
115-
child: widget.child,
116-
builder: (
117-
BuildContext context,
118-
Widget child,
119-
IndicatorController controller,
120-
) => AnimatedBuilder(
121-
animation: controller,
122-
builder: (BuildContext context, Widget? _) {
123-
/// Now every state change will be tracked by the helper class.
124-
_helper.update(controller.state);
125-
// ...
126-
```
127-
128-
Then you can simply track state changes:
129-
130-
```dart
131-
/// When the state changes to [idle]
132-
if(_helper.didStateChange(to: IndicatorState.idle)) {
133-
// Code...
134-
}
135-
136-
/// When the state changes from [idle] to [dragging]
137-
if (_helper.didStateChange(
138-
from: IndicatorState.idle,
139-
to: IndicatorState.dragging,
140-
)) {
141-
// Code...
142-
}
143-
144-
/// When the state changes from [idle] to another.
145-
if (_helper.didStateChange(
146-
from: IndicatorState.idle,
147-
)) {
148-
// Code...
149-
}
150-
151-
/// When the state changes.
152-
if (_helper.didStateChange()) {
153-
// Code...
154-
}
155-
```
156-
___
131+
If you like this package, you have learned something from it, or you just don't know what to do with your money 😅 just buy me a cup of coffee ☕️ and this dose of caffeine will put a smile on my face which in turn will help me improve this package. Also as a thank you, you will be mentioned in this readme as a sponsor.
157132

158-
If there is something that can be improved, fixed or you just have some great idea feel free to open github issue [HERE](https://github.com/gonuit/flutter-custom-refresh-indicator/issues) or open a pull request [HERE](https://github.com/gonuit/flutter-custom-refresh-indicator/pulls).
133+
<div align="center">
134+
<a href="https://www.buymeacoffee.com/kamilklyta" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
135+
</div>
159136

160-
If you implemented your own custom refresh indicator using this library and you want it to be mentioned here or provided as an example to the eample app, just open a pull request [HERE](https://github.com/gonuit/flutter-custom-refresh-indicator/pulls).
137+
Have a nice day! 👋

0 commit comments

Comments
 (0)