Skip to content

Commit f8d4716

Browse files
author
Kamil Klyta
committed
Extract plane example to separate screen
1 parent 85663fc commit f8d4716

File tree

7 files changed

+299
-184
lines changed

7 files changed

+299
-184
lines changed

‎example/lib/indicators/plane_indicator.dart‎

Lines changed: 100 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import 'package:custom_refresh_indicator/custom_refresh_indicator.dart';
22
import 'package:example/indicators/custom_indicator.dart';
33
import 'package:flutter/material.dart';
44

5-
class Cloud {
5+
class _Cloud {
66
static const _light = Color(0xFF96CDDE);
77
static const _dark = Color(0xFF6AABBF);
88
static const _normal = Color(0xFFACCFDA);
@@ -21,7 +21,7 @@ class Cloud {
2121
final double dy;
2222
final double initialValue;
2323
final Duration duration;
24-
Cloud({
24+
_Cloud({
2525
this.color,
2626
this.image,
2727
this.width,
@@ -31,14 +31,13 @@ class Cloud {
3131
});
3232
}
3333

34+
/// Desgin by Katarzyna Klyta kasia@klyta.it
3435
class PlaneIndicator extends StatefulWidget {
35-
final IndicatorController data;
36+
final IndicatorController controller;
3637
final Widget child;
37-
final int cloudCount;
3838
const PlaneIndicator({
3939
@required this.child,
40-
@required this.data,
41-
this.cloudCount = 5,
40+
@required this.controller,
4241
});
4342

4443
@override
@@ -53,7 +52,7 @@ class _PlaneIndicatorState extends State<PlaneIndicator>
5352

5453
@override
5554
void initState() {
56-
_prevState = widget.data.state;
55+
_prevState = widget.controller.state;
5756
_planeController = AnimationController(
5857
vsync: this,
5958
duration: const Duration(milliseconds: 500),
@@ -64,43 +63,43 @@ class _PlaneIndicatorState extends State<PlaneIndicator>
6463
}
6564

6665
static final _clouds = [
67-
Cloud(
68-
color: Cloud._dark,
66+
_Cloud(
67+
color: _Cloud._dark,
6968
initialValue: 0.6,
7069
dy: 17.5,
71-
image: AssetImage(Cloud._assets[1]),
70+
image: AssetImage(_Cloud._assets[1]),
7271
width: 100,
7372
duration: Duration(milliseconds: 1600),
7473
),
75-
Cloud(
76-
color: Cloud._light,
74+
_Cloud(
75+
color: _Cloud._light,
7776
initialValue: 0.15,
7877
dy: 35,
79-
image: AssetImage(Cloud._assets[3]),
78+
image: AssetImage(_Cloud._assets[3]),
8079
width: 40,
8180
duration: Duration(milliseconds: 1600),
8281
),
83-
Cloud(
84-
color: Cloud._light,
82+
_Cloud(
83+
color: _Cloud._light,
8584
initialValue: 0.3,
8685
dy: 75,
87-
image: AssetImage(Cloud._assets[2]),
86+
image: AssetImage(_Cloud._assets[2]),
8887
width: 60,
8988
duration: Duration(milliseconds: 1600),
9089
),
91-
Cloud(
92-
color: Cloud._dark,
90+
_Cloud(
91+
color: _Cloud._dark,
9392
initialValue: 0.8,
9493
dy: 80,
95-
image: AssetImage(Cloud._assets[3]),
94+
image: AssetImage(_Cloud._assets[3]),
9695
width: 100,
9796
duration: Duration(milliseconds: 1600),
9897
),
99-
Cloud(
100-
color: Cloud._normal,
98+
_Cloud(
99+
color: _Cloud._normal,
101100
initialValue: 0.0,
102101
dy: 110,
103-
image: AssetImage(Cloud._assets[0]),
102+
image: AssetImage(_Cloud._assets[0]),
104103
width: 80,
105104
duration: Duration(milliseconds: 1600),
106105
),
@@ -163,85 +162,91 @@ class _PlaneIndicatorState extends State<PlaneIndicator>
163162
);
164163
},
165164
);
166-
167-
return AnimatedBuilder(
168-
animation: widget.data,
165+
return CustomRefreshIndicator(
169166
child: widget.child,
170-
builder: (context, child) {
171-
final currentState = widget.data.state;
172-
if (_prevState == IndicatorState.armed &&
173-
currentState == IndicatorState.loading) {
174-
_startCloudAnimation();
175-
_startPlaneAnimation();
176-
} else if (_prevState == IndicatorState.loading &&
177-
currentState == IndicatorState.hiding) {
178-
_stopPlaneAnimation();
179-
} else if (_prevState == IndicatorState.hiding &&
180-
currentState != _prevState) {
181-
_stopCloudAnimation();
182-
}
167+
onRefresh: () => Future.delayed(const Duration(seconds: 3)),
168+
builder:
169+
(BuildContext context, Widget child, IndicatorController controller) {
170+
return AnimatedBuilder(
171+
animation: widget.controller,
172+
child: widget.child,
173+
builder: (context, child) {
174+
final currentState = widget.controller.state;
175+
if (_prevState == IndicatorState.armed &&
176+
currentState == IndicatorState.loading) {
177+
_startCloudAnimation();
178+
_startPlaneAnimation();
179+
} else if (_prevState == IndicatorState.loading &&
180+
currentState == IndicatorState.hiding) {
181+
_stopPlaneAnimation();
182+
} else if (_prevState == IndicatorState.hiding &&
183+
currentState != _prevState) {
184+
_stopCloudAnimation();
185+
}
183186

184-
_prevState = currentState;
187+
_prevState = currentState;
185188

186-
return Stack(
187-
overflow: Overflow.clip,
188-
children: <Widget>[
189-
if (_prevState != IndicatorState.idle)
190-
Container(
191-
height: 163 * widget.data.value,
192-
color: Color(0xFFFDFEFF),
193-
width: double.infinity,
194-
child: AnimatedBuilder(
195-
animation: _clouds.first.controller,
196-
builder: (BuildContext context, Widget child) {
197-
return Stack(
198-
overflow: Overflow.clip,
199-
children: <Widget>[
200-
for (final cloud in _clouds)
201-
Transform.translate(
202-
offset: Offset(
203-
((screenWidth + cloud.width) *
204-
cloud.controller.value) -
205-
cloud.width,
206-
cloud.dy * widget.data.value,
207-
),
208-
child: OverflowBox(
209-
minWidth: cloud.width,
210-
minHeight: cloud.width,
211-
maxHeight: cloud.width,
212-
maxWidth: cloud.width,
213-
alignment: Alignment.topLeft,
214-
child: Container(
215-
child: Image(
216-
color: cloud.color,
217-
image: cloud.image,
218-
fit: BoxFit.contain,
189+
return Stack(
190+
overflow: Overflow.clip,
191+
children: <Widget>[
192+
if (_prevState != IndicatorState.idle)
193+
Container(
194+
height: 150 * widget.controller.value,
195+
color: Color(0xFFFDFEFF),
196+
width: double.infinity,
197+
child: AnimatedBuilder(
198+
animation: _clouds.first.controller,
199+
builder: (BuildContext context, Widget child) {
200+
return Stack(
201+
overflow: Overflow.clip,
202+
children: <Widget>[
203+
for (final cloud in _clouds)
204+
Transform.translate(
205+
offset: Offset(
206+
((screenWidth + cloud.width) *
207+
cloud.controller.value) -
208+
cloud.width,
209+
cloud.dy * widget.controller.value,
210+
),
211+
child: OverflowBox(
212+
minWidth: cloud.width,
213+
minHeight: cloud.width,
214+
maxHeight: cloud.width,
215+
maxWidth: cloud.width,
216+
alignment: Alignment.topLeft,
217+
child: Container(
218+
child: Image(
219+
color: cloud.color,
220+
image: cloud.image,
221+
fit: BoxFit.contain,
222+
),
223+
),
219224
),
220225
),
221-
),
222-
),
223226

224-
/// plane
225-
Center(
226-
child: OverflowBox(
227-
child: plane,
228-
maxWidth: 172,
229-
minWidth: 172,
230-
maxHeight: 50,
231-
minHeight: 50,
232-
alignment: Alignment.center,
233-
),
234-
),
235-
],
236-
);
237-
},
227+
/// plane
228+
Center(
229+
child: OverflowBox(
230+
child: plane,
231+
maxWidth: 172,
232+
minWidth: 172,
233+
maxHeight: 50,
234+
minHeight: 50,
235+
alignment: Alignment.center,
236+
),
237+
),
238+
],
239+
);
240+
},
241+
),
242+
),
243+
Transform.translate(
244+
offset: Offset(0.0, 150 * widget.controller.value),
245+
child: child,
238246
),
239-
),
240-
Transform.translate(
241-
offset: Offset(0.0, 163 * widget.data.value),
242-
child: child,
243-
),
244-
],
247+
],
248+
);
249+
},
245250
);
246251
},
247252
);
@@ -251,6 +256,6 @@ class _PlaneIndicatorState extends State<PlaneIndicator>
251256
CustomIndicatorConfig planeIndicator = CustomIndicatorConfig(
252257
builder: (context, child, data) => PlaneIndicator(
253258
child: child,
254-
data: data,
259+
controller: data,
255260
),
256261
);

‎example/lib/indicators/test_indicator.dart‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import 'package:flutter/material.dart';
2+
3+
import 'custom_indicator.dart';
4+
5+
final testIndicator = CustomIndicatorConfig(
6+
builder: (context, child, controller) => Stack(children: <Widget>[
7+
Container(
8+
height: 200,
9+
width: double.infinity,
10+
color: Colors.green,
11+
),
12+
Container(
13+
height: 150,
14+
width: double.infinity,
15+
color: Colors.blue,
16+
),
17+
Container(
18+
height: 100,
19+
width: double.infinity,
20+
color: Colors.red,
21+
),
22+
AnimatedBuilder(
23+
child: child,
24+
animation: controller,
25+
builder: (context, child) => Transform.translate(
26+
offset: Offset(0, controller.value * 100),
27+
child: child,
28+
),
29+
),
30+
]),
31+
);

‎example/lib/main.dart‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import 'package:example/indicators/simple_indicator.dart';
22
import 'package:example/screens/example_indicator_screen.dart';
3+
import 'package:example/screens/plane_indicator_screen.dart';
34
import 'package:flutter/material.dart';
45

56
import 'indicators/emoji_indicator.dart';
67
import 'indicators/plane_indicator.dart';
8+
import 'indicators/test_indicator.dart';
79

810
void main() => runApp(MyApp());
911

@@ -18,6 +20,7 @@ class MyApp extends StatelessWidget {
1820
home: MainScreen(),
1921
routes: {
2022
'/example': (context) => ExampleIndicatorScreen(),
23+
'/plane': (context) => PlaneIndicatorScreen(),
2124
},
2225
);
2326
}
@@ -68,7 +71,7 @@ class MainScreen extends StatelessWidget {
6871
),
6972
onPressed: () => Navigator.pushNamed(
7073
context,
71-
'/example',
74+
'/plane',
7275
arguments: planeIndicator,
7376
),
7477
),
@@ -85,6 +88,19 @@ class MainScreen extends StatelessWidget {
8588
arguments: emojiIndicator,
8689
),
8790
),
91+
const SizedBox(height: 15),
92+
RaisedButton(
93+
child: Container(
94+
height: 50,
95+
alignment: Alignment.center,
96+
child: Text("Test indicator"),
97+
),
98+
onPressed: () => Navigator.pushNamed(
99+
context,
100+
'/example',
101+
arguments: testIndicator,
102+
),
103+
),
88104
],
89105
),
90106
),

0 commit comments

Comments
 (0)