diff --git a/example/widgetbook/pages/assets/icon_widgetbook.dart b/example/widgetbook/pages/assets/icon_widgetbook.dart index 5894222c..897eb07d 100644 --- a/example/widgetbook/pages/assets/icon_widgetbook.dart +++ b/example/widgetbook/pages/assets/icon_widgetbook.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; import 'package:widgetbook/widgetbook.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; @@ -12,17 +13,46 @@ WidgetbookComponent iconWidgetbook() { WidgetbookUseCase( name: 'All Icons', builder: (context) { - List icons = (context.knobs.boolean(label: 'Rounded', initialValue: true) - ? [...iconsRounded] - : [...iconsSharp]) - ..sort((a, b) => a.codePoint < b.codePoint ? 1 : 0); + Map icons = + (context.knobs.boolean(label: 'Rounded', initialValue: true)) ? iconsRounded : iconsSharp; + return WidgetbookTestWidget( removeBody: true, widget: SingleChildScrollView( - child: Wrap( - spacing: ZetaSpacing.b, - runSpacing: ZetaSpacing.b, - children: icons.map((e) => Icon(e, size: ZetaSpacing.x10)).toList(), + child: Center( + child: Column( + children: [ + Text('Tap icon to copy name to clipboard', style: ZetaTextStyles.titleMedium) + .paddingAll(ZetaSpacing.l), + Wrap( + spacing: ZetaSpacing.l, + runSpacing: ZetaSpacing.l, + children: icons.entries.map( + (e) { + final nameArr = e.key.split('_')..removeLast(); + return Container( + width: 100, + height: 100, + child: InkWell( + borderRadius: ZetaRadius.rounded, + hoverColor: Zeta.of(context).colors.surfaceHovered, + onTap: () async { + await Clipboard.setData(ClipboardData(text: 'ZetaIcons.' + e.key)); + }, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon(e.value, size: 40), + Text(nameArr.join(' '), textAlign: TextAlign.center) + ], + ), + ), + ); + }, + ).toList(), + ), + ], + ), ), ), ); diff --git a/example/widgetbook/pages/theme/radius_widgetbook.dart b/example/widgetbook/pages/theme/radius_widgetbook.dart new file mode 100644 index 00000000..ccb63a73 --- /dev/null +++ b/example/widgetbook/pages/theme/radius_widgetbook.dart @@ -0,0 +1,75 @@ +import 'package:flutter/material.dart'; +import 'package:widgetbook/widgetbook.dart'; + +import 'package:zeta_flutter/zeta_flutter.dart'; + +WidgetbookComponent radiusWidgetbook() { + return WidgetbookComponent( + name: 'Radius', + useCases: [ + WidgetbookUseCase( + name: 'Radius', + builder: (context) => SingleChildScrollView( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Column( + children: radii.entries + .map((obj) => _RadiiDemo(obj)) + .divide(const SizedBox.square(dimension: ZetaSpacing.l)) + .toList(), + ).paddingTop(ZetaSpacing.l), + ], + ), + ), + ), + ], + ); +} + +Map radii = { + 'none': ZetaRadius.none, + 'minimal': ZetaRadius.minimal, + 'rounded': ZetaRadius.rounded, + 'wide': ZetaRadius.wide, + 'full': ZetaRadius.full, +}; + +class _RadiiDemo extends StatelessWidget { + final MapEntry obj; + const _RadiiDemo(this.obj); + + @override + Widget build(BuildContext context) { + final colors = Zeta.of(context).colors; + + return Container( + width: 250, + height: 250, + decoration: BoxDecoration( + borderRadius: obj.value, + color: Zeta.of(context).colors.blue.shade30, + border: Border.all(color: colors.blue.shade80, width: 3), + ), + child: Center( + child: Container( + decoration: BoxDecoration( + borderRadius: obj.value, + color: Zeta.of(context).colors.surfacePrimary, + border: Border.all(color: colors.blue.shade50, width: 3), + ), + padding: EdgeInsets.all(ZetaSpacing.b), + child: Text( + 'ZetaRadius.' + obj.key, + style: ZetaTextStyles.titleMedium.apply( + color: Zeta.of(context).colors.textDefault, + fontStyle: FontStyle.normal, + decoration: TextDecoration.none, + ), + ), + ), + ), + ); + } +} diff --git a/example/widgetbook/pages/theme/spacing_widgetbook.dart b/example/widgetbook/pages/theme/spacing_widgetbook.dart index 773ed81d..53a08235 100644 --- a/example/widgetbook/pages/theme/spacing_widgetbook.dart +++ b/example/widgetbook/pages/theme/spacing_widgetbook.dart @@ -15,7 +15,7 @@ WidgetbookComponent spacingWidgetBook() { children: [ Column( crossAxisAlignment: CrossAxisAlignment.start, - children: namedSpacings.entries.map((obj) => _SizeObject(obj)).toList(), + children: namedSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(), ) ], ), @@ -28,7 +28,7 @@ WidgetbookComponent spacingWidgetBook() { children: [ Column( crossAxisAlignment: CrossAxisAlignment.start, - children: valueSpacings.entries.map((obj) => _SizeObject(obj)).toList(), + children: valueSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(), ) ], ), @@ -70,10 +70,10 @@ Map valueSpacings = { 'x24': ZetaSpacing.x24, }; -class _SizeObject extends StatelessWidget { +class _SpacingDemo extends StatelessWidget { final MapEntry size; - const _SizeObject(this.size); + const _SpacingDemo(this.size); @override Widget build(BuildContext context) { diff --git a/example/widgetbook/widgetbook.dart b/example/widgetbook/widgetbook.dart index 4ffd920e..8d467c86 100644 --- a/example/widgetbook/widgetbook.dart +++ b/example/widgetbook/widgetbook.dart @@ -13,6 +13,7 @@ import 'pages/theme/color_widgetbook.dart'; import 'pages/components/banner_widgetbook.dart'; import 'pages/components/chip_widgetbook.dart'; import 'pages/components/password_input_widgetbook.dart'; +import 'pages/theme/radius_widgetbook.dart'; import 'pages/theme/spacing_widgetbook.dart'; import 'pages/theme/typography_widgetbook.dart'; import 'utils/zebra.dart'; @@ -43,7 +44,7 @@ class HotReload extends StatelessWidget { WidgetbookCategory( name: 'Theme', isInitiallyExpanded: false, - children: [textWidgetBook(), colorWidgetBook(), spacingWidgetBook()] + children: [textWidgetBook(), colorWidgetBook(), spacingWidgetBook(), radiusWidgetbook()] ..sort((a, b) => a.name.compareTo(b.name)), ), WidgetbookCategory( @@ -72,7 +73,6 @@ class HotReload extends StatelessWidget { ], themeBuilder: (context, theme, child) { _Theme _theme = theme; - // Wrap use cases with the custom theme's InheritedWidget return ZetaProvider( initialContrast: _theme.isAAA ? ZetaContrast.aaa : ZetaContrast.aa, initialThemeMode: _theme.isDark ? ThemeMode.dark : ThemeMode.light,