Skip to content

Commit f8fe652

Browse files
OsmanOsman
Osman
authored and
Osman
committed
Add Progress bar
1 parent 9f0e7f2 commit f8fe652

File tree

5 files changed

+398
-4
lines changed

5 files changed

+398
-4
lines changed

‎example/lib/home.dart

+14-4
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import 'package:zeta_example/pages/components/checkbox_example.dart';
1010
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';
13+
import 'package:zeta_example/pages/components/progress_example.dart';
14+
1315
import 'package:zeta_example/pages/assets/icons_example.dart';
1416
import 'package:zeta_example/widgets.dart';
1517
import 'package:zeta_flutter/zeta_flutter.dart';
@@ -30,7 +32,9 @@ final List<Component> components = [
3032
Component(ButtonExample.name, (context) => const ButtonExample()),
3133
Component(CheckBoxExample.name, (context) => const CheckBoxExample()),
3234
Component(ChipExample.name, (context) => const ChipExample()),
33-
Component(PasswordInputExample.name, (context) => const PasswordInputExample()),
35+
Component(
36+
PasswordInputExample.name, (context) => const PasswordInputExample()),
37+
Component(ProgressExample.name, (context) => const ProgressExample())
3438
];
3539

3640
final List<Component> theme = [
@@ -92,21 +96,27 @@ class _HomeState extends State<Home> {
9296
title: Text('Widgets'),
9397
backgroundColor: Zeta.of(context).colors.warm.shade30,
9498
children: _components
95-
.map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
99+
.map((item) => ListTile(
100+
title: Text(item.name),
101+
onTap: () => context.go('/${item.name}')))
96102
.toList(),
97103
),
98104
ExpansionTile(
99105
title: Text('Theme'),
100106
backgroundColor: Zeta.of(context).colors.warm.shade30,
101107
children: _theme
102-
.map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
108+
.map((item) => ListTile(
109+
title: Text(item.name),
110+
onTap: () => context.go('/${item.name}')))
103111
.toList(),
104112
),
105113
ExpansionTile(
106114
title: Text('Assets'),
107115
backgroundColor: Zeta.of(context).colors.warm.shade30,
108116
children: _assets
109-
.map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
117+
.map((item) => ListTile(
118+
title: Text(item.name),
119+
onTap: () => context.go('/${item.name}')))
110120
.toList(),
111121
),
112122
],

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

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:zeta_example/widgets.dart';
3+
import 'package:zeta_flutter/zeta_flutter.dart';
4+
5+
class ProgressExample extends StatefulWidget {
6+
static const String name = 'Progress';
7+
8+
const ProgressExample({super.key});
9+
10+
@override
11+
State<ProgressExample> createState() => ProgressExampleState();
12+
}
13+
14+
class ProgressExampleState extends State<ProgressExample> {
15+
@override
16+
Widget build(BuildContext context) {
17+
return ExampleScaffold(
18+
name: 'Progress',
19+
child: Center(
20+
child: SingleChildScrollView(
21+
child: SizedBox(
22+
width: double.infinity,
23+
child: Column(children: [
24+
Wrapper(
25+
stepsCompleted: 10,
26+
weight: BarWeight.thin,
27+
),
28+
SizedBox(
29+
height: 20,
30+
),
31+
Wrapper(
32+
stepsCompleted: 0,
33+
type: BarType.standard,
34+
weight: BarWeight.thin,
35+
stateChangeable: true),
36+
SizedBox(
37+
height: 20,
38+
),
39+
Wrapper(
40+
stepsCompleted: 0,
41+
type: BarType.indeterminate,
42+
weight: BarWeight.medium,
43+
label: "UPLOADING ...",
44+
),
45+
]),
46+
),
47+
),
48+
),
49+
);
50+
}
51+
}
52+
53+
class Wrapper extends StatefulWidget {
54+
const Wrapper(
55+
{super.key,
56+
required this.stepsCompleted,
57+
this.type = BarType.standard,
58+
this.weight = BarWeight.medium,
59+
this.border = ZetaWidgetBorder.rounded,
60+
this.stateChangeable = false,
61+
this.label});
62+
63+
final int stepsCompleted;
64+
final ZetaWidgetBorder border;
65+
final BarType type;
66+
final BarWeight weight;
67+
final String? label;
68+
final bool stateChangeable;
69+
70+
@override
71+
State<Wrapper> createState() => _WrapperState();
72+
}
73+
74+
class _WrapperState extends State<Wrapper> {
75+
late int stepsCompleted;
76+
late double progress;
77+
late BarType type;
78+
79+
@override
80+
void initState() {
81+
super.initState();
82+
type = widget.type;
83+
stepsCompleted = widget.stepsCompleted;
84+
progress = stepsCompleted / 10;
85+
}
86+
87+
///Function to increase percentage of progress.
88+
void increasePercentage() {
89+
setState(() {
90+
stepsCompleted++;
91+
progress = stepsCompleted / 10;
92+
});
93+
}
94+
95+
void setLoading() {
96+
setState(() {
97+
type = type == BarType.buffering ? BarType.standard : BarType.buffering;
98+
});
99+
}
100+
101+
@override
102+
Widget build(BuildContext context) {
103+
return Column(
104+
// Replace with a Column for vertical
105+
children: [
106+
ProgressBar(
107+
progress: progress,
108+
border: widget.border,
109+
type: type,
110+
weight: widget.weight,
111+
label: widget.label),
112+
const SizedBox(width: 40),
113+
Row(
114+
mainAxisAlignment: MainAxisAlignment.center,
115+
children: [
116+
widget.type != BarType.indeterminate
117+
? FilledButton(
118+
onPressed: increasePercentage, child: Text("Increase"))
119+
: Container(),
120+
const SizedBox(width: 40),
121+
widget.stateChangeable
122+
? FilledButton(
123+
onPressed: setLoading, child: Text("Start Buffering"))
124+
: Container()
125+
],
126+
)
127+
],
128+
);
129+
}
130+
}

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

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import 'package:flutter/foundation.dart';
2+
import 'package:flutter/material.dart';
3+
4+
/// Super class for [Progress] widgets.
5+
/// Handles state for progress of [Progress] widgets.
6+
abstract class Progress extends StatefulWidget {
7+
/// Constructor for abstract [Progress] class.
8+
const Progress({super.key, this.progress = 0});
9+
10+
/// Progress value, decimal value ranging from 0.0 - 1.0, 0.5 = 50%
11+
final double progress;
12+
@override
13+
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
14+
super.debugFillProperties(properties);
15+
properties.add(DoubleProperty('progress', progress));
16+
}
17+
}
18+
19+
/// Super class for [ProgressState]
20+
/// Defines functions that deal with state change of progress value and
21+
/// animation changing.
22+
abstract class ProgressState<T extends Progress> extends State<T>
23+
with TickerProviderStateMixin {
24+
/// Decimal progress value
25+
late double progress;
26+
27+
///Animation controller for [ProgressState]
28+
late AnimationController controller;
29+
30+
///Animation for [ProgressState]
31+
late Animation<double> animation;
32+
33+
@override
34+
void initState() {
35+
super.initState();
36+
progress = widget.progress;
37+
controller = AnimationController(
38+
vsync: this, duration: const Duration(milliseconds: 200));
39+
animation = Tween<double>(
40+
begin: widget.progress, // Start value
41+
end: widget.progress, // End value (initially same as start value)
42+
).animate(controller)
43+
..addListener(() {
44+
setState(() {
45+
progress = animation.value;
46+
});
47+
});
48+
}
49+
50+
@override
51+
void dispose() {
52+
controller.dispose();
53+
super.dispose();
54+
}
55+
56+
///Update animation with new progress value to give animation effect for progress changing.
57+
void updateProgress(double newProgress) {
58+
// Update the Tween with new start and end value
59+
60+
setState(() {
61+
animation = Tween<double>(
62+
begin: progress,
63+
end: newProgress,
64+
).animate(controller);
65+
controller.forward(from: progress);
66+
});
67+
}
68+
69+
@override
70+
void didUpdateWidget(T oldWidget) {
71+
super.didUpdateWidget(oldWidget);
72+
if (oldWidget.progress != widget.progress) {
73+
updateProgress(widget.progress);
74+
}
75+
}
76+
77+
@override
78+
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
79+
super.debugFillProperties(properties);
80+
properties
81+
..add(DoubleProperty('progress', progress))
82+
..add(DiagnosticsProperty<AnimationController>('controller', controller))
83+
..add(DiagnosticsProperty<Animation<double>>('animation', animation));
84+
}
85+
}

0 commit comments

Comments
 (0)