Skip to content

Commit

Permalink
feat(main): Stepper (#17)
Browse files Browse the repository at this point in the history
* feat(main): Stepper

* Add optional content, remove listview and fix inkwell

* [automated commit] lint format and import sort

---------

Co-authored-by: github-actions <[email protected]>
  • Loading branch information
2 people authored and thelukewalton committed Apr 12, 2024
1 parent e05a193 commit cab9f85
Show file tree
Hide file tree
Showing 7 changed files with 635 additions and 1 deletion.
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,9 @@ With these configurations, Zeta makes it easy to achieve consistent theming thro

## Viewing the components

To view examples of all the components in the library, you can run the example app in this repo or go to [Zeta](https://zeta-ds.web.app/)
To view examples of all the components in the library, you can pull this repo and run either the example app or widgetbook instance.

You can also view the latest release at [Zeta](https://zeta-ds.web.app/) or the latest commits to main [here](https://zeta-flutter-main.web.app/).

## Licensing

Expand Down
2 changes: 2 additions & 0 deletions example/lib/home.dart
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import 'package:zeta_example/pages/components/dropdown_example.dart';
import 'package:zeta_example/pages/components/list_item_example.dart';
import 'package:zeta_example/pages/components/navigation_bar_example.dart';
import 'package:zeta_example/pages/components/radio_example.dart';
import 'package:zeta_example/pages/components/stepper_example.dart';
import 'package:zeta_example/pages/components/switch_example.dart';
import 'package:zeta_example/pages/components/snackbar_example.dart';
import 'package:zeta_example/pages/components/tabs_example.dart';
Expand Down Expand Up @@ -51,6 +52,7 @@ final List<Component> components = [
Component(DropdownExample.name, (context) => const DropdownExample()),
Component(ProgressExample.name, (context) => const ProgressExample()),
Component(SnackBarExample.name, (context) => const SnackBarExample()),
Component(StepperExample.name, (context) => const StepperExample()),
Component(TabsExample.name, (context) => const TabsExample()),
Component(DialPadExample.name, (context) => const DialPadExample()),
Component(RadioButtonExample.name, (context) => const RadioButtonExample()),
Expand Down
144 changes: 144 additions & 0 deletions example/lib/pages/components/stepper_example.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
import 'package:flutter/material.dart';
import 'package:zeta_example/widgets.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

class StepperExample extends StatefulWidget {
const StepperExample({super.key});

static const String name = 'Stepper';

@override
State<StepperExample> createState() => _StepperExampleState();
}

class _StepperExampleState extends State<StepperExample> {
int _roundedHorizontalStep = 0;
int _sharpHorizontalStep = 0;
int _verticalStep = 0;

ZetaStepType _getForStepIndex({
required int currentStep,
required int stepIndex,
}) {
if (currentStep == stepIndex) return ZetaStepType.enabled;
if (currentStep > stepIndex) return ZetaStepType.complete;

return ZetaStepType.disabled;
}

@override
Widget build(BuildContext context) {
return ExampleScaffold(
name: StepperExample.name,
child: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: 150,
child: ZetaStepper(
currentStep: _roundedHorizontalStep,
onStepTapped: (index) => setState(() => _roundedHorizontalStep = index),
steps: [
ZetaStep(
type: _getForStepIndex(
currentStep: _roundedHorizontalStep,
stepIndex: 0,
),
title: Text("Title"),
content: Text("Content"),
),
ZetaStep(
type: _getForStepIndex(
currentStep: _roundedHorizontalStep,
stepIndex: 1,
),
title: Text("Title 2"),
),
ZetaStep(
type: _getForStepIndex(
currentStep: _roundedHorizontalStep,
stepIndex: 2,
),
title: Text("Title 3"),
content: Text("Content 3"),
),
],
),
),
SizedBox(
height: 150,
child: ZetaStepper(
rounded: false,
currentStep: _sharpHorizontalStep,
onStepTapped: (index) => setState(() => _sharpHorizontalStep = index),
steps: [
ZetaStep(
type: _getForStepIndex(
currentStep: _sharpHorizontalStep,
stepIndex: 0,
),
title: Text("Title"),
content: Text("Content"),
),
ZetaStep(
type: _getForStepIndex(
currentStep: _sharpHorizontalStep,
stepIndex: 1,
),
title: Text("Title 2"),
content: Text("Content 2"),
),
ZetaStep(
type: _getForStepIndex(
currentStep: _sharpHorizontalStep,
stepIndex: 2,
),
title: Text("Title 3"),
content: Text("Content 3"),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.l),
child: ZetaStepper(
type: ZetaStepperType.vertical,
currentStep: _verticalStep,
onStepTapped: (index) => setState(() => _verticalStep = index),
steps: [
ZetaStep(
type: _getForStepIndex(
currentStep: _verticalStep,
stepIndex: 0,
),
title: Text("Title"),
subtitle: Text("Step Number"),
content: Text("Content"),
),
ZetaStep(
type: _getForStepIndex(
currentStep: _verticalStep,
stepIndex: 1,
),
title: Text("Title 2"),
subtitle: Text("Step Number"),
content: Text("Content 2"),
),
ZetaStep(
type: _getForStepIndex(
currentStep: _verticalStep,
stepIndex: 2,
),
title: Text("Title 3"),
subtitle: Text("Step Number"),
content: Text("Content 3"),
),
],
),
),
],
),
),
);
}
}
5 changes: 5 additions & 0 deletions example/widgetbook/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import 'pages/components/navigation_bar_widgetbook.dart';
import 'pages/components/password_input_widgetbook.dart';
import 'pages/components/progress_widgetbook.dart';
import 'pages/components/radio_widgetbook.dart';
import 'pages/components/stepper_widgetbook.dart';
import 'pages/components/switch_widgetbook.dart';
import 'pages/components/snack_bar_widgetbook.dart';
import 'pages/components/tabs_widgetbook.dart';
Expand Down Expand Up @@ -100,6 +101,10 @@ class HotReload extends StatelessWidget {
builder: (context) => snackBarUseCase(context),
),
WidgetbookUseCase(name: 'Date Input', builder: (context) => dateInputUseCase(context)),
WidgetbookUseCase(
name: 'Stepper',
builder: (context) => stepperUseCase(context),
),
WidgetbookUseCase(name: 'Tabs', builder: (context) => tabsUseCase(context)),
]..sort((a, b) => a.name.compareTo(b.name)),
),
Expand Down
66 changes: 66 additions & 0 deletions example/widgetbook/pages/components/stepper_widgetbook.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

import '../../test/test_components.dart';

Widget stepperUseCase(BuildContext context) {
int currentStep = 0;

ZetaStepType getForStepIndex(int stepIndex) {
if (currentStep == stepIndex) return ZetaStepType.enabled;
if (currentStep > stepIndex) return ZetaStepType.complete;

return ZetaStepType.disabled;
}

final type = context.knobs.list(
label: "Type",
options: [
ZetaStepperType.horizontal,
ZetaStepperType.vertical,
],
initialOption: ZetaStepperType.horizontal,
labelBuilder: (type) => type.name,
);

final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);

final enabledContent = context.knobs.boolean(label: 'Enabled Content', initialValue: true);

return WidgetbookTestWidget(
widget: StatefulBuilder(
builder: (context, setState) {
return Container(
height: type == ZetaStepperType.horizontal ? 300 : null,
padding: EdgeInsets.all(
type == ZetaStepperType.horizontal ? 0.0 : ZetaSpacing.l,
),
child: ZetaStepper(
currentStep: currentStep,
onStepTapped: (index) => setState(() => currentStep = index),
rounded: type == ZetaStepperType.horizontal ? rounded : true,
type: type,
steps: [
ZetaStep(
type: getForStepIndex(0),
title: Text("Title"),
content: enabledContent ? Text("Content") : null,
),
ZetaStep(
type: getForStepIndex(1),
title: Text("Title 2"),
content: enabledContent ? Text("Content 2") : null,
),
ZetaStep(
type: getForStepIndex(2),
title: Text("Title 3"),
content: enabledContent ? Text("Content 3") : null,
),
],
),
);
},
),
);
}
Loading

0 comments on commit cab9f85

Please sign in to comment.