diff --git a/optimus_widgetbook/lib/components/forms/checkbox.dart b/optimus_widgetbook/lib/components/forms/checkbox.dart index 3c296543..2de164aa 100644 --- a/optimus_widgetbook/lib/components/forms/checkbox.dart +++ b/optimus_widgetbook/lib/components/forms/checkbox.dart @@ -26,21 +26,16 @@ class CheckboxStoryState extends State { Widget build(BuildContext context) { final k = context.knobs; - return Center( - child: SizedBox( - width: 400, - child: OptimusCheckbox( - label: Text(k.string(label: 'Label', initialValue: 'Checkbox Label')), - error: k.string(label: 'Error'), - isEnabled: k.boolean(label: 'Enabled', initialValue: true), - size: k.list( - label: 'Size', - options: OptimusCheckboxSize.values, - ), - isChecked: _isChecked, - onChanged: _handleChanged, - ), + return OptimusCheckbox( + label: Text(k.string(label: 'Label', initialValue: 'Checkbox Label')), + error: k.string(label: 'Error'), + isEnabled: k.boolean(label: 'Enabled', initialValue: true), + size: k.list( + label: 'Size', + options: OptimusCheckboxSize.values, ), + isChecked: _isChecked, + onChanged: _handleChanged, ); } } diff --git a/optimus_widgetbook/lib/components/forms/checkbox_group.dart b/optimus_widgetbook/lib/components/forms/checkbox_group.dart index da6044b0..1a96db7b 100644 --- a/optimus_widgetbook/lib/components/forms/checkbox_group.dart +++ b/optimus_widgetbook/lib/components/forms/checkbox_group.dart @@ -8,7 +8,7 @@ import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook; type: OptimusCheckboxGroup, path: '[Forms]/Checkbox/', ) -CheckboxGroupUseCase defaultStyle(_) => const CheckboxGroupUseCase(); +Widget defaultStyle(BuildContext _) => const CheckboxGroupUseCase(); class CheckboxGroupUseCase extends StatefulWidget { const CheckboxGroupUseCase({super.key}); diff --git a/optimus_widgetbook/lib/components/forms/checkbox_nested.dart b/optimus_widgetbook/lib/components/forms/checkbox_nested.dart index 6094f134..d065bd11 100644 --- a/optimus_widgetbook/lib/components/forms/checkbox_nested.dart +++ b/optimus_widgetbook/lib/components/forms/checkbox_nested.dart @@ -1,5 +1,6 @@ import 'package:flutter/widgets.dart'; import 'package:optimus/optimus.dart'; +import 'package:widgetbook/widgetbook.dart'; import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook; @widgetbook.UseCase( @@ -7,6 +8,76 @@ import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook; type: OptimusNestedCheckboxGroup, path: '[Forms]/Nested Group', ) -Widget defaultStyle(BuildContext context) { - return Center(); +Widget defaultStyle(BuildContext _) => const CheckboxGroupExample(); + +class CheckboxGroupExample extends StatefulWidget { + const CheckboxGroupExample({super.key}); + + @override + CheckboxGroupExampleState createState() => CheckboxGroupExampleState(); +} + +class CheckboxGroupExampleState extends State { + // ignore: avoid-duplicate-collection-elements, duplicity is intentional + final List _values = [false, true, false, false, false]; + bool _isRootChecked = false; + + void _handleChanged(int position, bool isChecked) => + setState(() => _values[position] = isChecked); + + void _handleRootChanged(bool isRootChecked) => + setState(() => _isRootChecked = isRootChecked); + + @override + Widget build(BuildContext context) { + final k = context.knobs; + final isEnabled = k.boolean(label: 'Enabled', initialValue: true); + + return Center( + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + OptimusCheckbox( + label: const Text('Outside Checkbox'), + isChecked: _isRootChecked, + isEnabled: isEnabled, + onChanged: _handleRootChanged, + ), + OptimusNestedCheckboxGroup( + parent: const Text('Parent'), + label: k.string(label: 'Label'), + error: k.string(label: 'Error'), + isEnabled: isEnabled, + children: [ + OptimusNestedCheckbox( + label: const Text('Checkbox 1'), + isChecked: _values.first, + onChanged: (bool isChecked) => _handleChanged(0, isChecked), + ), + OptimusNestedCheckbox( + label: const Text('Checkbox 2'), + isChecked: _values[1], + onChanged: (bool isChecked) => _handleChanged(1, isChecked), + ), + OptimusNestedCheckbox( + isChecked: _values[2], + label: const Text('Checkbox 3'), + onChanged: (bool isChecked) => _handleChanged(2, isChecked), + ), + OptimusNestedCheckbox( + isChecked: _values[3], + label: const Text('Checkbox 4'), + onChanged: (bool isChecked) => _handleChanged(3, isChecked), + ), + OptimusNestedCheckbox( + isChecked: _values.last, + label: const Text('Checkbox 5'), + onChanged: (bool isChecked) => _handleChanged(4, isChecked), + ), + ], + ), + ], + ), + ); + } } diff --git a/optimus_widgetbook/lib/main.dart b/optimus_widgetbook/lib/main.dart index 85342ed8..ed0298bb 100644 --- a/optimus_widgetbook/lib/main.dart +++ b/optimus_widgetbook/lib/main.dart @@ -4,9 +4,7 @@ import 'package:optimus_widgetbook/main.directories.g.dart'; import 'package:widgetbook/widgetbook.dart'; import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook; -void main() { - runApp(const WidgetbookApp()); -} +void main() => runApp(const WidgetbookApp()); @widgetbook.App() class WidgetbookApp extends StatelessWidget { @@ -14,8 +12,16 @@ class WidgetbookApp extends StatelessWidget { @override Widget build(BuildContext context) => Widgetbook.material( - addons: [ - DeviceFrameAddon(devices: Devices.all), + addons: [ + DeviceFrameAddon( + devices: [ + Devices.ios.iPhone13Mini, + Devices.ios.iPhone13, + Devices.ios.iPhone13ProMax, + Devices.ios.iPadAir4, + Devices.ios.iPad12InchesGen4, + ], + ), InspectorAddon(), AlignmentAddon(), ThemeAddon( @@ -37,12 +43,7 @@ class WidgetbookApp extends StatelessWidget { ), ), ], - themeBuilder: ( - context, - theme, - child, - ) => - OptimusTheme( + themeBuilder: (context, theme, child) => OptimusTheme( themeMode: theme.brightness == Brightness.light ? ThemeMode.light : ThemeMode.dark, @@ -50,21 +51,13 @@ class WidgetbookApp extends StatelessWidget { ), ), BuilderAddon( - name: 'Background Builder', - builder: (BuildContext context, Widget widget) { - return Theme( - data: ThemeData(scaffoldBackgroundColor: Colors.white), - child: widget, - ); - }) + name: 'Background builder', + builder: (BuildContext context, Widget widget) => ColoredBox( + color: context.tokens.backgroundStaticFlat, + child: Center(child: widget), + ), + ), ], directories: directories, ); } - -extension on String? { - ThemeMode toThemeMode() => ThemeMode.values - .firstWhere((e) => e.name == this, orElse: () => ThemeMode.system); -} - -const _keyTheme = 'themeMode';