Skip to content

Commit 1684e8a

Browse files
OsmanOsman
Osman
authored and
Osman
committed
Add progress circle
1 parent d18dbd2 commit 1684e8a

File tree

4 files changed

+203
-46
lines changed

4 files changed

+203
-46
lines changed

‎example/lib/home.dart

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import 'package:zeta_example/pages/components/chip_example.dart';
1111
import 'package:zeta_example/pages/theme/color_example.dart';
1212
import 'package:zeta_example/pages/components/password_input_example.dart';
1313
import 'package:zeta_example/pages/components/progress_example.dart';
14-
1514
import 'package:zeta_example/pages/assets/icons_example.dart';
1615
import 'package:zeta_example/widgets.dart';
1716
import 'package:zeta_flutter/zeta_flutter.dart';

‎example/lib/pages/components/progress_example.dart

Lines changed: 76 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -20,29 +20,48 @@ class ProgressExampleState extends State<ProgressExample> {
2020
child: SingleChildScrollView(
2121
child: SizedBox(
2222
width: double.infinity,
23-
child: Column(children: [
24-
Wrapper(
25-
stepsCompleted: 10,
26-
isThin: true,
27-
),
28-
SizedBox(
29-
height: 20,
30-
),
31-
Wrapper(
23+
child: Column(
24+
children: [
25+
Text('Progress Bars', style: ZetaTextStyles.displayMedium),
26+
SizedBox(
27+
height: 20,
28+
),
29+
Wrapper(
30+
stepsCompleted: 10,
31+
isThin: true,
32+
),
33+
SizedBox(
34+
height: 20,
35+
),
36+
Wrapper(
37+
stepsCompleted: 0,
38+
type: ZetaBarType.standard,
39+
isThin: false,
40+
stateChangeable: true),
41+
SizedBox(
42+
height: 20,
43+
),
44+
Wrapper(
3245
stepsCompleted: 0,
33-
type: ZetaBarType.standard,
46+
type: ZetaBarType.indeterminate,
3447
isThin: false,
35-
stateChangeable: true),
36-
SizedBox(
37-
height: 20,
38-
),
39-
Wrapper(
40-
stepsCompleted: 0,
41-
type: ZetaBarType.indeterminate,
42-
isThin: false,
43-
label: "UPLOADING ...",
44-
),
45-
]),
48+
label: "UPLOADING ...",
49+
),
50+
SizedBox(
51+
height: 20,
52+
),
53+
Text('Progress CIrcles', style: ZetaTextStyles.displayMedium),
54+
SizedBox(
55+
height: 80,
56+
),
57+
Wrapper(
58+
stepsCompleted: 0,
59+
circleSize: ZetaCircleSizes.xl,
60+
rounded: false,
61+
isCircle: true,
62+
),
63+
],
64+
),
4665
),
4766
),
4867
),
@@ -51,21 +70,26 @@ class ProgressExampleState extends State<ProgressExample> {
5170
}
5271

5372
class Wrapper extends StatefulWidget {
54-
const Wrapper(
55-
{super.key,
56-
required this.stepsCompleted,
57-
this.type = ZetaBarType.standard,
58-
this.isThin = false,
59-
this.rounded = true,
60-
this.stateChangeable = false,
61-
this.label});
73+
const Wrapper({
74+
super.key,
75+
required this.stepsCompleted,
76+
this.type = ZetaBarType.standard,
77+
this.isThin = false,
78+
this.rounded = true,
79+
this.stateChangeable = false,
80+
this.label,
81+
this.isCircle = false,
82+
this.circleSize,
83+
});
6284

6385
final int stepsCompleted;
64-
final bool rounded;
65-
final ZetaBarType type;
66-
final bool isThin;
86+
final bool? rounded;
87+
final ZetaBarType? type;
88+
final bool? isThin;
6789
final String? label;
68-
final bool stateChangeable;
90+
final bool? stateChangeable;
91+
final bool isCircle;
92+
final ZetaCircleSizes? circleSize;
6993

7094
@override
7195
State<Wrapper> createState() => _WrapperState();
@@ -79,7 +103,7 @@ class _WrapperState extends State<Wrapper> {
79103
@override
80104
void initState() {
81105
super.initState();
82-
type = widget.type;
106+
type = widget.type!;
83107
stepsCompleted = widget.stepsCompleted;
84108
progress = stepsCompleted / 10;
85109
}
@@ -105,15 +129,22 @@ class _WrapperState extends State<Wrapper> {
105129
return Column(
106130
// Replace with a Column for vertical
107131
children: [
108-
SizedBox(
109-
width: 400,
110-
child: ZetaProgressBar(
111-
progress: progress,
112-
rounded: widget.rounded,
113-
type: type,
114-
isThin: widget.isThin,
115-
label: widget.label),
116-
),
132+
widget.isCircle
133+
? Center(
134+
child: ZetaProgressCircle(
135+
progress: progress,
136+
size: widget.circleSize!,
137+
),
138+
)
139+
: SizedBox(
140+
width: 400,
141+
child: ZetaProgressBar(
142+
progress: progress,
143+
rounded: widget.rounded!,
144+
type: type,
145+
isThin: widget.isThin!,
146+
label: widget.label),
147+
),
117148
const SizedBox(width: 40),
118149
Row(
119150
mainAxisAlignment: MainAxisAlignment.center,
@@ -123,10 +154,10 @@ class _WrapperState extends State<Wrapper> {
123154
onPressed: increasePercentage, child: Text("Increase"))
124155
: Container(),
125156
const SizedBox(width: 40),
126-
widget.stateChangeable
157+
widget.stateChangeable!
127158
? FilledButton(
128159
onPressed: setLoading, child: Text("Start Buffering"))
129-
: Container()
160+
: SizedBox.shrink()
130161
],
131162
)
132163
],

‎lib/src/components/progress/progress_circle.dart

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
import 'dart:math' as math;
2+
import 'package:flutter/foundation.dart';
3+
import 'package:flutter/material.dart';
4+
5+
import '../../../zeta_flutter.dart';
6+
import 'progress.dart';
7+
8+
/// Sizes for [ZetaProgressCircle]
9+
enum ZetaCircleSizes {
10+
///24 X 24
11+
xs,
12+
13+
/// 36 X 36
14+
s,
15+
16+
/// 40 x 40
17+
m,
18+
19+
/// 48 X 48
20+
l,
21+
22+
/// 64 X 64
23+
xl
24+
}
25+
26+
///Class definition for [ZetaProgressCircle]
27+
class ZetaProgressCircle extends ZetaProgress {
28+
/// Constructor for [ZetaProgressCircle]
29+
const ZetaProgressCircle({
30+
super.key,
31+
super.progress = 0,
32+
this.size = ZetaCircleSizes.xl,
33+
this.rounded = true,
34+
});
35+
36+
///Size of [ZetaProgressCircle]
37+
final ZetaCircleSizes size;
38+
39+
/// Border Type for [ZetaWidgetBorder]
40+
final bool rounded;
41+
42+
@override
43+
State<ZetaProgressCircle> createState() => ZetaProgressCircleState();
44+
45+
@override
46+
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
47+
super.debugFillProperties(properties);
48+
properties
49+
..add(EnumProperty<ZetaCircleSizes>('size', size))
50+
..add(DoubleProperty('progress', progress))
51+
..add(DiagnosticsProperty<bool>('rounded', rounded));
52+
}
53+
}
54+
55+
///Class definition for [ZetaProgressCircleState]
56+
class ZetaProgressCircleState extends ZetaProgressState<ZetaProgressCircle> {
57+
@override
58+
Widget build(BuildContext context) {
59+
return AnimatedBuilder(
60+
animation: controller,
61+
builder: (context, child) {
62+
return CustomPaint(
63+
size: _getSize(),
64+
painter: CirclePainter(
65+
progress: animation.value,
66+
rounded: widget.rounded,
67+
),
68+
);
69+
},
70+
);
71+
}
72+
73+
Size _getSize() {
74+
switch (widget.size) {
75+
case ZetaCircleSizes.xs:
76+
return const Size(24, 24);
77+
case ZetaCircleSizes.s:
78+
return const Size(36, 36);
79+
case ZetaCircleSizes.m:
80+
return const Size(40, 40);
81+
case ZetaCircleSizes.l:
82+
return const Size(48, 48);
83+
case ZetaCircleSizes.xl:
84+
return const Size(64, 64);
85+
}
86+
}
87+
88+
@override
89+
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
90+
super.debugFillProperties(properties);
91+
properties
92+
..add(DoubleProperty('progress', progress))
93+
..add(DiagnosticsProperty<AnimationController>('controller', controller))
94+
..add(DiagnosticsProperty<Animation<double>>('animation', animation));
95+
}
96+
}
97+
98+
///Class definition for [CirclePainter]
99+
class CirclePainter extends CustomPainter {
100+
///Constructor for [CirclePainter]
101+
CirclePainter({this.progress = 0, this.rounded = true});
102+
103+
///Percentage of progress in decimal value, defaults to 0
104+
final double progress;
105+
106+
///Is circle rounded, defaults to true
107+
final bool rounded;
108+
109+
final _paint = Paint()
110+
..color = Colors.blue
111+
..strokeWidth = 4
112+
..style = PaintingStyle.stroke;
113+
114+
@override
115+
void paint(Canvas canvas, Size size) {
116+
if (rounded) _paint.strokeCap = StrokeCap.round;
117+
118+
const double fullCircle = 2 * math.pi;
119+
120+
canvas.drawArc(Rect.fromLTRB(0, 0, size.width, size.height),
121+
3 * math.pi / 2, progress * fullCircle, false, _paint);
122+
}
123+
124+
@override
125+
bool shouldRepaint(CustomPainter oldDelegate) => false;
126+
}

‎lib/zeta_flutter.dart

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export 'src/components/checkbox/checkbox.dart';
2222
export 'src/components/chips/chip.dart';
2323
export 'src/components/password/password_input.dart';
2424
export 'src/components/progress/progress_bar.dart';
25+
export 'src/components/progress/progress_circle.dart';
2526
export 'src/theme/color_extensions.dart';
2627
export 'src/theme/color_scheme.dart';
2728
export 'src/theme/color_swatch.dart';

0 commit comments

Comments
 (0)