Skip to content

Commit

Permalink
feat : Progress Circle (#31)
Browse files Browse the repository at this point in the history 
Authored-by: Osman <AO3856@zebra.com>
  • Loading branch information
@ahmed-osman3
ahmed-osman3 committed Mar 6, 2024
1 parent 12cd2e5 commit 6c6adaf
Show file tree
Hide file tree
Showing 9 changed files with 500 additions and 36 deletions.
1 change: 0 additions & 1 deletion example/lib/home.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import 'package:zeta_example/pages/components/navigation_bar_example.dart';
import 'package:zeta_example/pages/theme/color_example.dart';
import 'package:zeta_example/pages/components/password_input_example.dart';
import 'package:zeta_example/pages/components/progress_example.dart';

import 'package:zeta_example/pages/assets/icons_example.dart';
import 'package:zeta_example/widgets.dart';
import 'package:zeta_flutter/zeta_flutter.dart';
Expand Down
76 changes: 54 additions & 22 deletions example/lib/pages/components/progress_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,11 @@ class ProgressExampleState extends State<ProgressExample> {
SizedBox(
height: 20,
),
Wrapper(stepsCompleted: 0, type: ZetaProgressBarType.standard, isThin: false, stateChangeable: true),
Wrapper(
stepsCompleted: 0,
type: ZetaProgressBarType.standard,
isThin: false,
stateChangeable: true),
SizedBox(
height: 20,
),
Expand All @@ -38,6 +42,12 @@ class ProgressExampleState extends State<ProgressExample> {
isThin: false,
label: "UPLOADING ...",
),
Wrapper(
stepsCompleted: 0,
circleSize: ZetaCircleSizes.xl,
rounded: false,
isCircle: true,
),
]),
),
),
Expand All @@ -47,21 +57,26 @@ class ProgressExampleState extends State<ProgressExample> {
}

class Wrapper extends StatefulWidget {
const Wrapper(
{super.key,
required this.stepsCompleted,
this.type = ZetaProgressBarType.standard,
this.isThin = false,
this.rounded = true,
this.stateChangeable = false,
this.label});
const Wrapper({
super.key,
required this.stepsCompleted,
this.type = ZetaProgressBarType.standard,
this.isThin = false,
this.rounded = true,
this.stateChangeable = false,
this.label,
this.isCircle = false,
this.circleSize,
});

final int stepsCompleted;
final bool rounded;
final ZetaProgressBarType type;
final bool isThin;
final bool? rounded;
final ZetaProgressBarType? type;
final bool? isThin;
final String? label;
final bool stateChangeable;
final bool? stateChangeable;
final bool isCircle;
final ZetaCircleSizes? circleSize;

@override
State<Wrapper> createState() => _WrapperState();
Expand All @@ -75,7 +90,7 @@ class _WrapperState extends State<Wrapper> {
@override
void initState() {
super.initState();
type = widget.type;
type = widget.type!;
stepsCompleted = widget.stepsCompleted;
progress = stepsCompleted / 10;
}
Expand All @@ -90,7 +105,9 @@ class _WrapperState extends State<Wrapper> {

void setLoading() {
setState(() {
type = type == ZetaProgressBarType.buffering ? ZetaProgressBarType.standard : ZetaProgressBarType.buffering;
type = type == ZetaProgressBarType.buffering
? ZetaProgressBarType.standard
: ZetaProgressBarType.buffering;
});
}

Expand All @@ -99,20 +116,35 @@ class _WrapperState extends State<Wrapper> {
return Column(
// Replace with a Column for vertical
children: [
SizedBox(
width: 400,
child: ZetaProgressBar(
progress: progress, rounded: widget.rounded, type: type, isThin: widget.isThin, label: widget.label),
),
widget.isCircle
? Center(
child: ZetaProgressCircle(
progress: progress,
size: widget.circleSize!,
),
)
: SizedBox(
width: 400,
child: ZetaProgressBar(
progress: progress,
rounded: widget.rounded!,
type: type,
isThin: widget.isThin!,
label: widget.label),
),
const SizedBox(width: 40),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
widget.type != ZetaProgressBarType.indeterminate
? FilledButton(onPressed: increasePercentage, child: Text("Increase"))
? FilledButton(
onPressed: increasePercentage, child: Text("Increase"))
: Container(),
const SizedBox(width: 40),
widget.stateChangeable ? FilledButton(onPressed: setLoading, child: Text("Start Buffering")) : Container()
widget.stateChangeable!
? FilledButton(
onPressed: setLoading, child: Text("Start Buffering"))
: SizedBox.shrink()
],
)
],
Expand Down
1 change: 1 addition & 0 deletions example/widgetbook/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ class HotReload extends StatelessWidget {
name: 'Progress',
useCases: [
WidgetbookUseCase(name: 'Bar', builder: (context) => progressBarUseCase(context)),
WidgetbookUseCase(name : 'Circle', builder : (context) => progressCircleUseCase(context))
],
),
]..sort((a, b) => a.name.compareTo(b.name)),
Expand Down
25 changes: 22 additions & 3 deletions example/widgetbook/pages/components/progress_widgetbook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,32 @@ Widget progressBarUseCase(BuildContext context) => WidgetbookTestWidget(
return SizedBox(
width: constraints.maxWidth - ZetaSpacing.xl,
child: ZetaProgressBar(
progress: context.knobs.double.slider(label: 'Progress', min: 0, max: 1, initialValue: 0.5).toDouble(),
type: context.knobs
.list(label: 'Type', options: ZetaProgressBarType.values, labelBuilder: (value) => value.name),
progress: context.knobs.double
.slider(label: 'Progress', min: 0, max: 1, initialValue: 0.5)
.toDouble(),
type: context.knobs.list(
label: 'Type',
options: ZetaProgressBarType.values,
labelBuilder: (value) => value.name),
isThin: context.knobs.boolean(label: 'Thin'),
rounded: context.knobs.boolean(label: 'Rounded'),
label: context.knobs.stringOrNull(label: 'Label'),
),
);
}),
);

Widget progressCircleUseCase(BuildContext context) =>
WidgetbookTestWidget(widget:
ZetaProgressCircle(
progress: context.knobs.double
.slider(label: 'Progress', min: 0, max: 1, initialValue: 0.5)
.toDouble(),
rounded: context.knobs.boolean(label: 'Rounded'),
size: context.knobs.list(
initialOption: ZetaCircleSizes.xl,
label: 'Size',
options: ZetaCircleSizes.values,
labelBuilder: (value) => value.name),
),
);
Loading

0 comments on commit 6c6adaf

Please sign in to comment.