Skip to content

Commit

Permalink
Component dialog (#18)
Browse files Browse the repository at this point in the history 
* create showZetaDialog

* finished dialog for DeviceType.mobilePortrait

* dialog variant for bigger screens

* create widgetbook; add Zeta parameter, also in ZetaButton

* useRootNavigator: false
  • Loading branch information
@atanasyordanov21 @thelukewalton
atanasyordanov21 authored and thelukewalton committed Apr 25, 2024
1 parent 671fcc1 commit 904ec8b
Show file tree
Hide file tree
Showing 8 changed files with 437 additions and 1 deletion.
2 changes: 2 additions & 0 deletions example/lib/home.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import 'package:zeta_example/pages/components/button_example.dart';
import 'package:zeta_example/pages/components/checkbox_example.dart';
import 'package:zeta_example/pages/components/chip_example.dart';
import 'package:zeta_example/pages/components/date_input_example.dart';
import 'package:zeta_example/pages/components/dialog_example.dart';
import 'package:zeta_example/pages/components/dialpad_example.dart';
import 'package:zeta_example/pages/components/dropdown_example.dart';
import 'package:zeta_example/pages/components/list_item_example.dart';
Expand Down Expand Up @@ -60,6 +61,7 @@ final List<Component> components = [
Component(RadioButtonExample.name, (context) => const RadioButtonExample()),
Component(SwitchExample.name, (context) => const SwitchExample()),
Component(DateInputExample.name, (context) => const DateInputExample()),
Component(DialogExample.name, (context) => const DialogExample()),
];

final List<Component> theme = [
Expand Down
93 changes: 93 additions & 0 deletions example/lib/pages/components/dialog_example.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import 'package:flutter/material.dart';
import 'package:zeta_example/widgets.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

class DialogExample extends StatelessWidget {
static const String name = 'Dialog';

const DialogExample({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
final zeta = Zeta.of(context);
return ExampleScaffold(
name: 'Dialog',
child: Center(
child: Column(
children: [
TextButton(
onPressed: () => showZetaDialog(
context,
useRootNavigator: false,
title: 'Dialog Title',
icon: Icon(
ZetaIcons.warning_round,
color: zeta.colors.warning,
),
message:
'Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusm od tempor incididunt ut labore et do lore magna aliqua.',
primaryButtonLabel: 'Confirm',
),
child: Text('Show dialog with one button'),
),
TextButton(
onPressed: () => showZetaDialog(
context,
useRootNavigator: false,
title: 'Dialog Title',
icon: Icon(
ZetaIcons.warning_round,
color: zeta.colors.warning,
),
message:
'Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusm od tempor incididunt ut labore et do lore magna aliqua.',
primaryButtonLabel: 'Confirm',
secondaryButtonLabel: 'Cancel',
),
child: Text('Show dialog with two buttons'),
),
TextButton(
onPressed: () => showZetaDialog(
context,
useRootNavigator: false,
title: 'Dialog Title',
icon: Icon(
ZetaIcons.warning_round,
color: zeta.colors.warning,
),
message:
'Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusm od tempor incididunt ut labore et do lore magna aliqua.',
primaryButtonLabel: 'Confirm',
secondaryButtonLabel: 'Cancel',
tertiaryButtonLabel: 'Learn more',
onTertiaryButtonPressed: () {},
),
child: Text('Show dialog with three buttons'),
),
TextButton(
onPressed: () => showZetaDialog(
context,
useRootNavigator: false,
title: 'Dialog Title',
icon: Icon(
ZetaIcons.warning_round,
color: zeta.colors.warning,
),
message:
'Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusm od tempor incididunt ut labore et do lore magna aliqua.',
headerAlignment: ZetaDialogHeaderAlignment.left,
primaryButtonLabel: 'Confirm',
secondaryButtonLabel: 'Cancel',
rounded: false,
),
child: Text(
'Show dialog with header to the left\nand sharp buttons',
textAlign: TextAlign.center,
),
),
],
),
),
);
}
}
2 changes: 2 additions & 0 deletions example/widgetbook/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import 'pages/components/checkbox_widgetbook.dart';
import 'pages/components/chip_widgetbook.dart';
import 'pages/components/date_input_widgetbook.dart';
import 'pages/components/dial_pad_widgetbook.dart';
import 'pages/components/dialog_widgetbook.dart';
import 'pages/components/dropdown_widgetbook.dart';
import 'pages/components/in_page_banner_widgetbook.dart';
import 'pages/components/list_item_widgetbook.dart';
Expand Down Expand Up @@ -108,6 +109,7 @@ class HotReload extends StatelessWidget {
builder: (context) => stepperUseCase(context),
),
WidgetbookUseCase(name: 'Tabs', builder: (context) => tabsUseCase(context)),
WidgetbookUseCase(name: 'Dialog', builder: (context) => dialogUseCase(context)),
]..sort((a, b) => a.name.compareTo(b.name)),
),
WidgetbookCategory(
Expand Down
94 changes: 94 additions & 0 deletions example/widgetbook/pages/components/dialog_widgetbook.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

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

Widget dialogUseCase(BuildContext context) {
final zeta = Zeta.of(context);
final title = context.knobs.string(
label: 'Dialog title',
initialValue: 'Dialog Title',
);
final message = context.knobs.string(
label: 'Dialog message',
initialValue:
'Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusm od tempor incididunt ut labore et do lore magna aliqua.',
);
final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true);
final barrierDismissible = context.knobs.boolean(label: 'Barrier dismissible', initialValue: true);
final headerAlignment = context.knobs.list<ZetaDialogHeaderAlignment>(
label: 'Header alignment',
options: ZetaDialogHeaderAlignment.values,
labelBuilder: (value) => value.name,
);
return WidgetbookTestWidget(
widget: Padding(
padding: const EdgeInsets.all(ZetaSpacing.x5),
child: Center(
child: Column(
children: [
TextButton(
onPressed: () => showZetaDialog(
context,
useRootNavigator: false,
zeta: zeta,
rounded: rounded,
barrierDismissible: barrierDismissible,
headerAlignment: headerAlignment,
title: title,
icon: Icon(
ZetaIcons.warning_round,
color: zeta.colors.warning,
),
message: message,
primaryButtonLabel: 'Confirm',
),
child: Text('Show dialog with one button'),
),
TextButton(
onPressed: () => showZetaDialog(
context,
useRootNavigator: false,
zeta: zeta,
rounded: rounded,
barrierDismissible: barrierDismissible,
headerAlignment: headerAlignment,
title: title,
icon: Icon(
ZetaIcons.warning_round,
color: zeta.colors.warning,
),
message: message,
primaryButtonLabel: 'Confirm',
secondaryButtonLabel: 'Cancel',
),
child: Text('Show dialog with two buttons'),
),
TextButton(
onPressed: () => showZetaDialog(
context,
useRootNavigator: false,
zeta: zeta,
rounded: rounded,
barrierDismissible: barrierDismissible,
headerAlignment: headerAlignment,
title: title,
icon: Icon(
ZetaIcons.warning_round,
color: zeta.colors.warning,
),
message: message,
primaryButtonLabel: 'Confirm',
secondaryButtonLabel: 'Cancel',
tertiaryButtonLabel: 'Learn more',
onTertiaryButtonPressed: () {},
),
child: Text('Show dialog with three buttons'),
),
],
),
),
),
);
}
16 changes: 15 additions & 1 deletion lib/src/components/buttons/button.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ class ZetaButton extends StatelessWidget {
this.type = ZetaButtonType.primary,
this.size = ZetaWidgetSize.medium,
this.borderType = ZetaWidgetBorder.rounded,
this.zeta,
super.key,
});

Expand All @@ -21,6 +22,7 @@ class ZetaButton extends StatelessWidget {
this.onPressed,
this.size = ZetaWidgetSize.medium,
this.borderType = ZetaWidgetBorder.rounded,
this.zeta,
super.key,
}) : type = ZetaButtonType.primary;

Expand All @@ -30,6 +32,7 @@ class ZetaButton extends StatelessWidget {
this.onPressed,
this.size = ZetaWidgetSize.medium,
this.borderType = ZetaWidgetBorder.rounded,
this.zeta,
super.key,
}) : type = ZetaButtonType.secondary;

Expand All @@ -39,6 +42,7 @@ class ZetaButton extends StatelessWidget {
this.onPressed,
this.size = ZetaWidgetSize.medium,
this.borderType = ZetaWidgetBorder.rounded,
this.zeta,
super.key,
}) : type = ZetaButtonType.positive;

Expand All @@ -48,6 +52,7 @@ class ZetaButton extends StatelessWidget {
this.onPressed,
this.size = ZetaWidgetSize.medium,
this.borderType = ZetaWidgetBorder.rounded,
this.zeta,
super.key,
}) : type = ZetaButtonType.negative;

Expand All @@ -57,6 +62,7 @@ class ZetaButton extends StatelessWidget {
this.onPressed,
this.size = ZetaWidgetSize.medium,
this.borderType = ZetaWidgetBorder.rounded,
this.zeta,
super.key,
}) : type = ZetaButtonType.outline;

Expand All @@ -66,6 +72,7 @@ class ZetaButton extends StatelessWidget {
this.onPressed,
this.size = ZetaWidgetSize.medium,
this.borderType = ZetaWidgetBorder.rounded,
this.zeta,
super.key,
}) : type = ZetaButtonType.outlineSubtle;

Expand All @@ -75,6 +82,7 @@ class ZetaButton extends StatelessWidget {
this.onPressed,
this.size = ZetaWidgetSize.medium,
this.borderType = ZetaWidgetBorder.rounded,
this.zeta,
super.key,
}) : type = ZetaButtonType.text;

Expand All @@ -94,6 +102,10 @@ class ZetaButton extends StatelessWidget {
/// Size of the button. Defaults to large.
final ZetaWidgetSize size;

/// Sometimes we need to pass Zeta from outside,
/// like for example from [showZetaDialog]
final Zeta? zeta;

/// Creates a clone.
ZetaButton copyWith({
String? label,
Expand All @@ -109,13 +121,15 @@ class ZetaButton extends StatelessWidget {
type: type ?? this.type,
size: size ?? this.size,
borderType: borderType ?? this.borderType,
zeta: zeta,
key: key ?? this.key,
);
}

@override
Widget build(BuildContext context) {
final colors = Zeta.of(context).colors;
final zeta = this.zeta ?? Zeta.of(context);
final colors = zeta.colors;
return ConstrainedBox(
constraints: BoxConstraints(minHeight: _minConstraints, minWidth: _minConstraints),
child: FilledButton(
Expand Down
Loading

0 comments on commit 904ec8b

Please sign in to comment.