From 96874d7017d3ff4fe73ccb2ef8d5be19b185f2fb Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Wed, 29 Mar 2023 03:10:51 +0200 Subject: [PATCH 01/15] Add argument type --- lib/src/widget_stage.dart | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/lib/src/widget_stage.dart b/lib/src/widget_stage.dart index e7a4677..6bd3a55 100644 --- a/lib/src/widget_stage.dart +++ b/lib/src/widget_stage.dart @@ -124,12 +124,15 @@ abstract class FieldConfigurator extends ChangeNotifier { FieldConfigurator({ required this.value, required this.name, - }); + ArgumentType? type, + }) : type = type ?? ArgumentType.widget; T value; String name; + final ArgumentType type; + bool get isNullable => null is T; void updateValue(T value) { @@ -156,3 +159,9 @@ class StageController extends ChangeNotifier { notifyListeners(); } } + +/// Allows for separation of the configurators in the [ConfigurationBar] depending on whether they affect the widget on the stage or the stage itself (e.g. amount of the same widget to display in a list). +enum ArgumentType { + widget, + stage, +} From 92ba1aa6a08a4de1f040483abd6fa839c5591244 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Wed, 29 Mar 2023 04:33:51 +0200 Subject: [PATCH 02/15] Pass argument type to configurators --- lib/src/field_configurators/bool_field_configurator.dart | 1 + lib/src/field_configurators/color_field_configurator.dart | 1 + lib/src/field_configurators/double_field_configurator.dart | 1 + lib/src/field_configurators/enum_field_configurator.dart | 1 + lib/src/field_configurators/int_field_configurator.dart | 1 + lib/src/field_configurators/padding_field_configurator.dart | 1 + lib/src/field_configurators/string_field_configurator.dart | 1 + 7 files changed, 7 insertions(+) diff --git a/lib/src/field_configurators/bool_field_configurator.dart b/lib/src/field_configurators/bool_field_configurator.dart index dd7ab6a..c45d692 100644 --- a/lib/src/field_configurators/bool_field_configurator.dart +++ b/lib/src/field_configurators/bool_field_configurator.dart @@ -22,6 +22,7 @@ class BoolFieldConfigurator extends FieldConfigurator { BoolFieldConfigurator({ required super.value, required super.name, + super.type, }); @override diff --git a/lib/src/field_configurators/color_field_configurator.dart b/lib/src/field_configurators/color_field_configurator.dart index 64e901f..cd9d321 100644 --- a/lib/src/field_configurators/color_field_configurator.dart +++ b/lib/src/field_configurators/color_field_configurator.dart @@ -7,6 +7,7 @@ class ColorFieldConfigurator extends FieldConfigurator { ColorFieldConfigurator({ required super.value, required super.name, + super.type, }); @override diff --git a/lib/src/field_configurators/double_field_configurator.dart b/lib/src/field_configurators/double_field_configurator.dart index d37626b..2130e2d 100644 --- a/lib/src/field_configurators/double_field_configurator.dart +++ b/lib/src/field_configurators/double_field_configurator.dart @@ -23,6 +23,7 @@ class DoubleFieldConfigurator extends FieldConfigurator { DoubleFieldConfigurator({ required super.value, required super.name, + super.type, }); @override diff --git a/lib/src/field_configurators/enum_field_configurator.dart b/lib/src/field_configurators/enum_field_configurator.dart index 92ec297..da99a3a 100644 --- a/lib/src/field_configurators/enum_field_configurator.dart +++ b/lib/src/field_configurators/enum_field_configurator.dart @@ -28,6 +28,7 @@ class EnumFieldConfigurator extends FieldConfigurator { required super.value, required super.name, required this.enumValues, + super.type, }); final List enumValues; diff --git a/lib/src/field_configurators/int_field_configurator.dart b/lib/src/field_configurators/int_field_configurator.dart index 07b31e8..0c8590c 100644 --- a/lib/src/field_configurators/int_field_configurator.dart +++ b/lib/src/field_configurators/int_field_configurator.dart @@ -23,6 +23,7 @@ class IntFieldConfigurator extends FieldConfigurator { IntFieldConfigurator({ required super.value, required super.name, + super.type, }); @override diff --git a/lib/src/field_configurators/padding_field_configurator.dart b/lib/src/field_configurators/padding_field_configurator.dart index 1aca305..47255bc 100644 --- a/lib/src/field_configurators/padding_field_configurator.dart +++ b/lib/src/field_configurators/padding_field_configurator.dart @@ -24,6 +24,7 @@ class PaddingFieldConfigurator extends FieldConfigurator { PaddingFieldConfigurator({ required super.value, required super.name, + super.type, }); @override diff --git a/lib/src/field_configurators/string_field_configurator.dart b/lib/src/field_configurators/string_field_configurator.dart index 0329465..4569eb9 100644 --- a/lib/src/field_configurators/string_field_configurator.dart +++ b/lib/src/field_configurators/string_field_configurator.dart @@ -23,6 +23,7 @@ class StringFieldConfigurator extends FieldConfigurator { StringFieldConfigurator({ required super.value, required super.name, + super.type, }); @override From 5ede135fc3d4b2cd4630c2f5ef38200a908f02e2 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Wed, 29 Mar 2023 04:35:07 +0200 Subject: [PATCH 03/15] Adjust sequence based on argument type --- lib/src/widget_stage.dart | 92 ++++++++++++++++++++++++++++++++++++--- 1 file changed, 85 insertions(+), 7 deletions(-) diff --git a/lib/src/widget_stage.dart b/lib/src/widget_stage.dart index 6bd3a55..e8b2cfb 100644 --- a/lib/src/widget_stage.dart +++ b/lib/src/widget_stage.dart @@ -29,6 +29,90 @@ class _WidgetStageState extends State { @override Widget build(BuildContext context) { + final configurators = _stageController.selectedWidget?.fieldConfigurators ?? []; + + final List stageConfiguratorWidgets = () { + final stageConfigurators = configurators.where((element) => element.type == ArgumentType.stage).toList(); + if (stageConfigurators.isEmpty) { + return []; + } + return stageConfigurators.map((configurator) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (configurator == stageConfigurators.first) ...[ + Container( + width: double.infinity, + decoration: BoxDecoration( + border: Border( + bottom: BorderSide(color: Colors.grey.shade500), + ), + ), + child: Padding( + padding: const EdgeInsets.only(bottom: 8.0), + child: Center( + child: Text( + 'Widget Configurators', + style: TextStyle( + color: Colors.grey.shade500, + ), + ), + ), + ), + ), + const SizedBox(height: 24.0), + ], + Padding( + padding: const EdgeInsets.all(8.0), + child: FieldConfiguratorWidget( + fieldConfigurator: configurator, + child: configurator.build(context), + ), + ), + ], + ); + }).toList(); + }(); + + final List widgetConfiguratorWidgets = () { + final widgetConfigurators = configurators.where((element) => element.type == ArgumentType.widget).toList(); + if (widgetConfigurators.isEmpty) { + return []; + } + return widgetConfigurators.map((configurator) { + return Column( + children: [ + if (configurator == widgetConfigurators.first) ...[ + Container( + width: double.infinity, + decoration: BoxDecoration( + border: Border( + bottom: BorderSide(color: Colors.grey.shade500), + ), + ), + child: Padding( + padding: const EdgeInsets.only(bottom: 8.0), + child: Center( + child: Text( + 'Widget Configurators', + style: TextStyle( + color: Colors.grey.shade500, + ), + ), + ), + ), + ), + const SizedBox(height: 24.0), + ], + FieldConfiguratorWidget( + fieldConfigurator: configurator, + child: configurator.build(context), + ), + ], + ); + }).toList(); + }(); + return Scaffold( body: Column( children: [ @@ -48,13 +132,7 @@ class _WidgetStageState extends State { SizedBox( width: 400, child: ConfigurationBar( - fields: _stageController.selectedWidget?.fieldConfigurators.map((configurator) { - return FieldConfiguratorWidget( - fieldConfigurator: configurator, - child: configurator.build(context), - ); - }).toList() ?? - [], + fields: [...stageConfiguratorWidgets, ...widgetConfiguratorWidgets], ), ), ], From 72230b56fc836ef3ffcbcdf13d75369c7b5bc3f1 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Wed, 29 Mar 2023 04:48:23 +0200 Subject: [PATCH 04/15] Add _ArgumentSection widget --- lib/src/widget_stage.dart | 120 ++++++++++++++++++-------------------- 1 file changed, 58 insertions(+), 62 deletions(-) diff --git a/lib/src/widget_stage.dart b/lib/src/widget_stage.dart index e8b2cfb..00186a7 100644 --- a/lib/src/widget_stage.dart +++ b/lib/src/widget_stage.dart @@ -37,39 +37,10 @@ class _WidgetStageState extends State { return []; } return stageConfigurators.map((configurator) { - return Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - if (configurator == stageConfigurators.first) ...[ - Container( - width: double.infinity, - decoration: BoxDecoration( - border: Border( - bottom: BorderSide(color: Colors.grey.shade500), - ), - ), - child: Padding( - padding: const EdgeInsets.only(bottom: 8.0), - child: Center( - child: Text( - 'Widget Configurators', - style: TextStyle( - color: Colors.grey.shade500, - ), - ), - ), - ), - ), - const SizedBox(height: 24.0), - ], - Padding( - padding: const EdgeInsets.all(8.0), - child: FieldConfiguratorWidget( - fieldConfigurator: configurator, - child: configurator.build(context), - ), - ), - ], + return _ArgumentSection( + configurator: configurator, + addHeader: configurator == stageConfigurators.first, + title: 'Stage Arguments', ); }).toList(); }(); @@ -80,35 +51,10 @@ class _WidgetStageState extends State { return []; } return widgetConfigurators.map((configurator) { - return Column( - children: [ - if (configurator == widgetConfigurators.first) ...[ - Container( - width: double.infinity, - decoration: BoxDecoration( - border: Border( - bottom: BorderSide(color: Colors.grey.shade500), - ), - ), - child: Padding( - padding: const EdgeInsets.only(bottom: 8.0), - child: Center( - child: Text( - 'Widget Configurators', - style: TextStyle( - color: Colors.grey.shade500, - ), - ), - ), - ), - ), - const SizedBox(height: 24.0), - ], - FieldConfiguratorWidget( - fieldConfigurator: configurator, - child: configurator.build(context), - ), - ], + return _ArgumentSection( + configurator: configurator, + addHeader: configurator == widgetConfigurators.first, + title: 'Widget Arguments', ); }).toList(); }(); @@ -144,6 +90,56 @@ class _WidgetStageState extends State { } } +class _ArgumentSection extends StatelessWidget { + const _ArgumentSection({ + this.addHeader, + required this.title, + required this.configurator, + }); + + final FieldConfigurator configurator; + final bool? addHeader; + final String title; + + @override + Widget build(BuildContext context) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (addHeader == true) ...[ + Container( + width: double.infinity, + decoration: BoxDecoration( + border: Border( + bottom: BorderSide(color: Colors.grey.shade500), + ), + ), + child: Padding( + padding: const EdgeInsets.only(bottom: 8.0), + child: Center( + child: Text( + title, + style: TextStyle( + color: Colors.grey.shade500, + ), + ), + ), + ), + ), + const SizedBox(height: 24.0), + ], + Padding( + padding: const EdgeInsets.all(8.0), + child: FieldConfiguratorWidget( + fieldConfigurator: configurator, + child: configurator.build(context), + ), + ), + ], + ); + } +} + /// The actual stage to display the widget. class Stage extends StatelessWidget { const Stage({ From f24daed8f56cf2e2e87511eb3c9c04b8978380cd Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Wed, 29 Mar 2023 12:57:04 +0200 Subject: [PATCH 05/15] Add MyListTileWidgetStage to example --- example/lib/main.dart | 2 + .../stage_data/my_list_tile_widget_stage.dart | 114 ++++++++++++++++++ 2 files changed, 116 insertions(+) create mode 100644 example/lib/stage_data/my_list_tile_widget_stage.dart diff --git a/example/lib/main.dart b/example/lib/main.dart index a7a4767..2431e0f 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -1,3 +1,4 @@ +import 'package:example/stage_data/my_list_tile_widget_stage.dart'; import 'package:example/stage_data/my_other_widget_stage.dart'; import 'package:example/stage_data/my_widget_stage.dart'; import 'package:flutter/material.dart'; @@ -20,6 +21,7 @@ class _MyAppState extends State { final widgetsOnStage = [ MyWidgetStageData(), MyOtherWidgetStageData(), + MyListTileWidgetStage(), ]; @override diff --git a/example/lib/stage_data/my_list_tile_widget_stage.dart b/example/lib/stage_data/my_list_tile_widget_stage.dart new file mode 100644 index 0000000..eb682fc --- /dev/null +++ b/example/lib/stage_data/my_list_tile_widget_stage.dart @@ -0,0 +1,114 @@ +import 'package:flutter/material.dart'; +import 'package:widget_stage/widget_stage.dart'; + +class MyListTileWidgetStage extends WidgetStageData { + MyListTileWidgetStage() + : _tileCount = IntFieldConfigurator(value: 1, name: 'tileCount', type: ArgumentType.stage), + _listPadding = PaddingFieldConfigurator(value: EdgeInsets.zero, name: 'listPadding', type: ArgumentType.stage), + _title = StringFieldConfigurator(value: 'My List Tile', name: 'title'), + _stageColor = ColorFieldConfigurator(value: Colors.transparent, name: 'stageColor', type: ArgumentType.stage), + _circleColor = ColorFieldConfigurator(value: Colors.purple, name: 'circleColor'), + _hoverColor = ColorFieldConfiguratorNullable(value: null, name: 'hoverColor'), + _tileColor = ColorFieldConfiguratorNullable(value: Colors.cyan, name: 'tileColor'), + _textColor = ColorFieldConfiguratorNullable(value: Colors.white, name: 'textColor'), + _borderRadius = DoubleFieldConfiguratorNullable(value: 10, name: 'borderRadius'), + _tileGap = DoubleFieldConfigurator(value: 0, name: 'tileSpace', type: ArgumentType.stage); + + @override + List get fieldConfigurators { + return [ + _tileCount, + _listPadding, + _title, + _tileGap, + _stageColor, + _circleColor, + _hoverColor, + _tileColor, + _borderRadius, + _textColor, + ]; + } + + @override + String get name => 'MyListTileWidget'; + + final IntFieldConfigurator _tileCount; + final DoubleFieldConfigurator _tileGap; + final DoubleFieldConfiguratorNullable _borderRadius; + final PaddingFieldConfigurator _listPadding; + final StringFieldConfigurator _title; + final ColorFieldConfigurator _stageColor; + final ColorFieldConfigurator _circleColor; + final ColorFieldConfiguratorNullable _hoverColor; + final ColorFieldConfiguratorNullable _textColor; + final ColorFieldConfiguratorNullable _tileColor; + + @override + Widget widgetBuilder(BuildContext context) { + return ColoredBox( + color: _stageColor.value, + child: ListView.builder( + padding: _listPadding.value, + itemCount: _tileCount.value, + itemBuilder: (context, index) { + return Padding( + padding: EdgeInsets.only(bottom: _tileGap.value), + child: _MyTitleTileWidget( + title: _title.value, + index: index, + circleColor: _circleColor.value, + hoverColor: _hoverColor.value, + tileColor: _tileColor.value, + borderRadius: _borderRadius.value, + textColor: _textColor.value, + ), + ); + }, + ), + ); + } +} + +class _MyTitleTileWidget extends StatelessWidget { + const _MyTitleTileWidget({ + required this.index, + required this.title, + required this.circleColor, + this.tileColor, + this.hoverColor, + this.borderRadius, + this.textColor, + }); + + final String title; + final Color circleColor; + final Color? tileColor; + final Color? hoverColor; + final int index; + final double? borderRadius; + final Color? textColor; + + @override + Widget build(BuildContext context) { + return Container( + decoration: BoxDecoration( + color: tileColor, + borderRadius: BorderRadius.circular(borderRadius ?? 0), + ), + child: ListTile( + title: Text(title), + leading: CircleAvatar( + radius: 15, + backgroundColor: circleColor, + child: Text( + '${index + 1}', + style: TextStyle( + color: textColor, + ), + ), + ), + ), + ); + } +} From 856154e345a47fe8fedc2c109de725247681ec74 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Wed, 29 Mar 2023 12:57:50 +0200 Subject: [PATCH 06/15] Adjust header design --- lib/src/widget_stage.dart | 87 ++++++++++++++++++++------------------- 1 file changed, 44 insertions(+), 43 deletions(-) diff --git a/lib/src/widget_stage.dart b/lib/src/widget_stage.dart index 00186a7..2bbb48c 100644 --- a/lib/src/widget_stage.dart +++ b/lib/src/widget_stage.dart @@ -33,28 +33,37 @@ class _WidgetStageState extends State { final List stageConfiguratorWidgets = () { final stageConfigurators = configurators.where((element) => element.type == ArgumentType.stage).toList(); - if (stageConfigurators.isEmpty) { - return []; - } + if (stageConfigurators.isEmpty) return []; return stageConfigurators.map((configurator) { - return _ArgumentSection( - configurator: configurator, - addHeader: configurator == stageConfigurators.first, - title: 'Stage Arguments', + if (configurator == stageConfigurators.first) { + return _LeadingConfigurationWidget( + configurator: configurator, + title: 'Stage Arguments', + ); + } + return Padding( + padding: configurator == stageConfigurators.last ? const EdgeInsets.only(bottom: 12.0) : EdgeInsets.zero, + child: FieldConfiguratorWidget( + fieldConfigurator: configurator, + child: configurator.build(context), + ), ); }).toList(); }(); final List widgetConfiguratorWidgets = () { final widgetConfigurators = configurators.where((element) => element.type == ArgumentType.widget).toList(); - if (widgetConfigurators.isEmpty) { - return []; - } + if (widgetConfigurators.isEmpty) return []; return widgetConfigurators.map((configurator) { - return _ArgumentSection( - configurator: configurator, - addHeader: configurator == widgetConfigurators.first, - title: 'Widget Arguments', + if (configurator == widgetConfigurators.first) { + return _LeadingConfigurationWidget( + configurator: configurator, + title: 'Widget Arguments', + ); + } + return FieldConfiguratorWidget( + fieldConfigurator: configurator, + child: configurator.build(context), ); }).toList(); }(); @@ -64,6 +73,7 @@ class _WidgetStageState extends State { children: [ Expanded( child: Row( + crossAxisAlignment: CrossAxisAlignment.start, children: [ Expanded( child: Stage( @@ -90,15 +100,14 @@ class _WidgetStageState extends State { } } -class _ArgumentSection extends StatelessWidget { - const _ArgumentSection({ - this.addHeader, +class _LeadingConfigurationWidget extends StatelessWidget { + const _LeadingConfigurationWidget({ required this.title, required this.configurator, }); final FieldConfigurator configurator; - final bool? addHeader; + final String title; @override @@ -106,35 +115,27 @@ class _ArgumentSection extends StatelessWidget { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - if (addHeader == true) ...[ - Container( - width: double.infinity, - decoration: BoxDecoration( - border: Border( - bottom: BorderSide(color: Colors.grey.shade500), - ), - ), - child: Padding( - padding: const EdgeInsets.only(bottom: 8.0), - child: Center( - child: Text( - title, - style: TextStyle( - color: Colors.grey.shade500, - ), - ), - ), + Container( + padding: const EdgeInsets.only(bottom: 4.0), + decoration: BoxDecoration( + border: Border( + bottom: BorderSide(color: Colors.grey.shade400), ), ), - const SizedBox(height: 24.0), - ], - Padding( - padding: const EdgeInsets.all(8.0), - child: FieldConfiguratorWidget( - fieldConfigurator: configurator, - child: configurator.build(context), + width: double.infinity, + child: Text( + textAlign: TextAlign.center, + title, + style: TextStyle( + color: Colors.grey.shade400, + ), ), ), + const SizedBox(height: 24.0), + FieldConfiguratorWidget( + fieldConfigurator: configurator, + child: configurator.build(context), + ), ], ); } From 61b78dd6dc140fb87fe22da1d951d50d1e19e789 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Wed, 29 Mar 2023 12:58:46 +0200 Subject: [PATCH 07/15] Remove empty space --- lib/src/widget_stage.dart | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/src/widget_stage.dart b/lib/src/widget_stage.dart index 2bbb48c..d2f7960 100644 --- a/lib/src/widget_stage.dart +++ b/lib/src/widget_stage.dart @@ -107,7 +107,6 @@ class _LeadingConfigurationWidget extends StatelessWidget { }); final FieldConfigurator configurator; - final String title; @override From 37fc02e5789febb28e091586a9431f4348c0251a Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Wed, 29 Mar 2023 14:45:25 +0200 Subject: [PATCH 08/15] Rename field configurator type, add list extension --- lib/src/widget_stage.dart | 40 +++++++++++++++++++++++++-------------- 1 file changed, 26 insertions(+), 14 deletions(-) diff --git a/lib/src/widget_stage.dart b/lib/src/widget_stage.dart index d2f7960..aaf803a 100644 --- a/lib/src/widget_stage.dart +++ b/lib/src/widget_stage.dart @@ -29,14 +29,12 @@ class _WidgetStageState extends State { @override Widget build(BuildContext context) { - final configurators = _stageController.selectedWidget?.fieldConfigurators ?? []; - final List stageConfiguratorWidgets = () { - final stageConfigurators = configurators.where((element) => element.type == ArgumentType.stage).toList(); + final stageConfigurators = (_stageController.selectedWidget?.fieldConfigurators ?? []).stageConfigurators; if (stageConfigurators.isEmpty) return []; return stageConfigurators.map((configurator) { if (configurator == stageConfigurators.first) { - return _LeadingConfigurationWidget( + return _LeadingFieldConfigurationWidget( configurator: configurator, title: 'Stage Arguments', ); @@ -52,11 +50,11 @@ class _WidgetStageState extends State { }(); final List widgetConfiguratorWidgets = () { - final widgetConfigurators = configurators.where((element) => element.type == ArgumentType.widget).toList(); + final widgetConfigurators = (_stageController.selectedWidget?.fieldConfigurators ?? []).widgetConfigurators; if (widgetConfigurators.isEmpty) return []; return widgetConfigurators.map((configurator) { if (configurator == widgetConfigurators.first) { - return _LeadingConfigurationWidget( + return _LeadingFieldConfigurationWidget( configurator: configurator, title: 'Widget Arguments', ); @@ -88,7 +86,10 @@ class _WidgetStageState extends State { SizedBox( width: 400, child: ConfigurationBar( - fields: [...stageConfiguratorWidgets, ...widgetConfiguratorWidgets], + fields: [ + ...stageConfiguratorWidgets, + ...widgetConfiguratorWidgets, + ], ), ), ], @@ -100,8 +101,8 @@ class _WidgetStageState extends State { } } -class _LeadingConfigurationWidget extends StatelessWidget { - const _LeadingConfigurationWidget({ +class _LeadingFieldConfigurationWidget extends StatelessWidget { + const _LeadingFieldConfigurationWidget({ required this.title, required this.configurator, }); @@ -198,14 +199,14 @@ abstract class FieldConfigurator extends ChangeNotifier { FieldConfigurator({ required this.value, required this.name, - ArgumentType? type, - }) : type = type ?? ArgumentType.widget; + FieldConfiguratorType? type, + }) : type = type ?? FieldConfiguratorType.widget; T value; String name; - final ArgumentType type; + final FieldConfiguratorType type; bool get isNullable => null is T; @@ -234,8 +235,19 @@ class StageController extends ChangeNotifier { } } -/// Allows for separation of the configurators in the [ConfigurationBar] depending on whether they affect the widget on the stage or the stage itself (e.g. amount of the same widget to display in a list). -enum ArgumentType { +/// Allows for separation of the configurators in the [ConfigurationBar] depending on whether they affect the +/// widget on the stage or the stage itself (e.g. amount of the same widget to display in a list). +enum FieldConfiguratorType { widget, stage, } + +extension FieldConfiguratorListExtensions on List { + List get stageConfigurators => where((configurator) { + return configurator.type == FieldConfiguratorType.stage; + }).toList(); + + List get widgetConfigurators => where((configurator) { + return configurator.type == FieldConfiguratorType.widget; + }).toList(); +} From 58943da4f6c2352a9f09294bcfb8d2fecc49b6f6 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Wed, 29 Mar 2023 14:45:50 +0200 Subject: [PATCH 09/15] Add line breaks --- .../stage_data/my_list_tile_widget_stage.dart | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/example/lib/stage_data/my_list_tile_widget_stage.dart b/example/lib/stage_data/my_list_tile_widget_stage.dart index eb682fc..cd4f500 100644 --- a/example/lib/stage_data/my_list_tile_widget_stage.dart +++ b/example/lib/stage_data/my_list_tile_widget_stage.dart @@ -3,16 +3,32 @@ import 'package:widget_stage/widget_stage.dart'; class MyListTileWidgetStage extends WidgetStageData { MyListTileWidgetStage() - : _tileCount = IntFieldConfigurator(value: 1, name: 'tileCount', type: ArgumentType.stage), - _listPadding = PaddingFieldConfigurator(value: EdgeInsets.zero, name: 'listPadding', type: ArgumentType.stage), + : _tileCount = IntFieldConfigurator( + value: 1, + name: 'tileCount', + type: FieldConfiguratorType.stage, + ), + _listPadding = PaddingFieldConfigurator( + value: EdgeInsets.zero, + name: 'listPadding', + type: FieldConfiguratorType.stage, + ), _title = StringFieldConfigurator(value: 'My List Tile', name: 'title'), - _stageColor = ColorFieldConfigurator(value: Colors.transparent, name: 'stageColor', type: ArgumentType.stage), + _stageColor = ColorFieldConfigurator( + value: Colors.transparent, + name: 'stageColor', + type: FieldConfiguratorType.stage, + ), _circleColor = ColorFieldConfigurator(value: Colors.purple, name: 'circleColor'), _hoverColor = ColorFieldConfiguratorNullable(value: null, name: 'hoverColor'), _tileColor = ColorFieldConfiguratorNullable(value: Colors.cyan, name: 'tileColor'), _textColor = ColorFieldConfiguratorNullable(value: Colors.white, name: 'textColor'), _borderRadius = DoubleFieldConfiguratorNullable(value: 10, name: 'borderRadius'), - _tileGap = DoubleFieldConfigurator(value: 0, name: 'tileSpace', type: ArgumentType.stage); + _tileGap = DoubleFieldConfigurator( + value: 0, + name: 'tileSpace', + type: FieldConfiguratorType.stage, + ); @override List get fieldConfigurators { From 63ed51545293b8ac6f83a57daedb55703a0fdf66 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Wed, 29 Mar 2023 14:58:38 +0200 Subject: [PATCH 10/15] Remove hover color configurator --- .../stage_data/my_list_tile_widget_stage.dart | 35 ++++++++----------- 1 file changed, 15 insertions(+), 20 deletions(-) diff --git a/example/lib/stage_data/my_list_tile_widget_stage.dart b/example/lib/stage_data/my_list_tile_widget_stage.dart index cd4f500..d0d55d8 100644 --- a/example/lib/stage_data/my_list_tile_widget_stage.dart +++ b/example/lib/stage_data/my_list_tile_widget_stage.dart @@ -20,7 +20,6 @@ class MyListTileWidgetStage extends WidgetStageData { type: FieldConfiguratorType.stage, ), _circleColor = ColorFieldConfigurator(value: Colors.purple, name: 'circleColor'), - _hoverColor = ColorFieldConfiguratorNullable(value: null, name: 'hoverColor'), _tileColor = ColorFieldConfiguratorNullable(value: Colors.cyan, name: 'tileColor'), _textColor = ColorFieldConfiguratorNullable(value: Colors.white, name: 'textColor'), _borderRadius = DoubleFieldConfiguratorNullable(value: 10, name: 'borderRadius'), @@ -39,7 +38,6 @@ class MyListTileWidgetStage extends WidgetStageData { _tileGap, _stageColor, _circleColor, - _hoverColor, _tileColor, _borderRadius, _textColor, @@ -56,7 +54,6 @@ class MyListTileWidgetStage extends WidgetStageData { final StringFieldConfigurator _title; final ColorFieldConfigurator _stageColor; final ColorFieldConfigurator _circleColor; - final ColorFieldConfiguratorNullable _hoverColor; final ColorFieldConfiguratorNullable _textColor; final ColorFieldConfiguratorNullable _tileColor; @@ -74,7 +71,6 @@ class MyListTileWidgetStage extends WidgetStageData { title: _title.value, index: index, circleColor: _circleColor.value, - hoverColor: _hoverColor.value, tileColor: _tileColor.value, borderRadius: _borderRadius.value, textColor: _textColor.value, @@ -92,7 +88,6 @@ class _MyTitleTileWidget extends StatelessWidget { required this.title, required this.circleColor, this.tileColor, - this.hoverColor, this.borderRadius, this.textColor, }); @@ -100,27 +95,27 @@ class _MyTitleTileWidget extends StatelessWidget { final String title; final Color circleColor; final Color? tileColor; - final Color? hoverColor; final int index; final double? borderRadius; final Color? textColor; @override Widget build(BuildContext context) { - return Container( - decoration: BoxDecoration( - color: tileColor, - borderRadius: BorderRadius.circular(borderRadius ?? 0), - ), - child: ListTile( - title: Text(title), - leading: CircleAvatar( - radius: 15, - backgroundColor: circleColor, - child: Text( - '${index + 1}', - style: TextStyle( - color: textColor, + return Material( + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(borderRadius ?? 0), + ), + child: ListTile( + title: Text(title), + leading: CircleAvatar( + radius: 15, + backgroundColor: circleColor, + child: Text( + '${index + 1}', + style: TextStyle( + color: textColor, + ), ), ), ), From 27f1f1aabc0109adfd086b6357953f7a3bb361fc Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Wed, 29 Mar 2023 15:02:51 +0200 Subject: [PATCH 11/15] Move color to decoration --- example/lib/stage_data/my_list_tile_widget_stage.dart | 1 + 1 file changed, 1 insertion(+) diff --git a/example/lib/stage_data/my_list_tile_widget_stage.dart b/example/lib/stage_data/my_list_tile_widget_stage.dart index d0d55d8..7ce9169 100644 --- a/example/lib/stage_data/my_list_tile_widget_stage.dart +++ b/example/lib/stage_data/my_list_tile_widget_stage.dart @@ -105,6 +105,7 @@ class _MyTitleTileWidget extends StatelessWidget { child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(borderRadius ?? 0), + color: tileColor, ), child: ListTile( title: Text(title), From 25a645525470d0a2c65dd2fd9691bcea32e6c75a Mon Sep 17 00:00:00 2001 From: Daniel Molnar <77627178+danielmolnar@users.noreply.github.com> Date: Thu, 30 Mar 2023 02:52:49 +0200 Subject: [PATCH 12/15] Update example/lib/stage_data/my_list_tile_widget_stage.dart Co-authored-by: Daniel Flores Medina <78251680+Dev-dfm@users.noreply.github.com> --- example/lib/stage_data/my_list_tile_widget_stage.dart | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/example/lib/stage_data/my_list_tile_widget_stage.dart b/example/lib/stage_data/my_list_tile_widget_stage.dart index 7ce9169..81c552a 100644 --- a/example/lib/stage_data/my_list_tile_widget_stage.dart +++ b/example/lib/stage_data/my_list_tile_widget_stage.dart @@ -61,13 +61,12 @@ class MyListTileWidgetStage extends WidgetStageData { Widget widgetBuilder(BuildContext context) { return ColoredBox( color: _stageColor.value, - child: ListView.builder( + child: ListView.separated( padding: _listPadding.value, itemCount: _tileCount.value, + separatorBuilder: (_, __) => SizedBox(height: _tileGap.value), itemBuilder: (context, index) { - return Padding( - padding: EdgeInsets.only(bottom: _tileGap.value), - child: _MyTitleTileWidget( + return _MyTitleTileWidget( title: _title.value, index: index, circleColor: _circleColor.value, From 799d70c03489a7d3dbcc14909455c4376f85aeb6 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Thu, 30 Mar 2023 02:55:01 +0200 Subject: [PATCH 13/15] Add missing curly bracket --- .../lib/stage_data/my_list_tile_widget_stage.dart | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/example/lib/stage_data/my_list_tile_widget_stage.dart b/example/lib/stage_data/my_list_tile_widget_stage.dart index 81c552a..f934904 100644 --- a/example/lib/stage_data/my_list_tile_widget_stage.dart +++ b/example/lib/stage_data/my_list_tile_widget_stage.dart @@ -67,13 +67,12 @@ class MyListTileWidgetStage extends WidgetStageData { separatorBuilder: (_, __) => SizedBox(height: _tileGap.value), itemBuilder: (context, index) { return _MyTitleTileWidget( - title: _title.value, - index: index, - circleColor: _circleColor.value, - tileColor: _tileColor.value, - borderRadius: _borderRadius.value, - textColor: _textColor.value, - ), + title: _title.value, + index: index, + circleColor: _circleColor.value, + tileColor: _tileColor.value, + borderRadius: _borderRadius.value, + textColor: _textColor.value, ); }, ), From b684705aea33f145de0502d6668d9756614bfa88 Mon Sep 17 00:00:00 2001 From: danielmolnar Date: Thu, 30 Mar 2023 03:34:57 +0200 Subject: [PATCH 14/15] Separate field configurators in stage data instead of enum --- .../stage_data/my_list_tile_widget_stage.dart | 41 ++++++++----------- .../lib/stage_data/my_other_widget_stage.dart | 5 ++- example/lib/stage_data/my_widget_stage.dart | 5 ++- .../bool_field_configurator.dart | 1 - .../color_field_configurator.dart | 1 - .../double_field_configurator.dart | 1 - .../enum_field_configurator.dart | 1 - .../int_field_configurator.dart | 1 - .../padding_field_configurator.dart | 1 - .../string_field_configurator.dart | 1 - lib/src/widget_stage.dart | 40 ++++++------------ lib/src/widget_stage_data.dart | 9 +++- 12 files changed, 45 insertions(+), 62 deletions(-) diff --git a/example/lib/stage_data/my_list_tile_widget_stage.dart b/example/lib/stage_data/my_list_tile_widget_stage.dart index f934904..7e3b319 100644 --- a/example/lib/stage_data/my_list_tile_widget_stage.dart +++ b/example/lib/stage_data/my_list_tile_widget_stage.dart @@ -3,40 +3,20 @@ import 'package:widget_stage/widget_stage.dart'; class MyListTileWidgetStage extends WidgetStageData { MyListTileWidgetStage() - : _tileCount = IntFieldConfigurator( - value: 1, - name: 'tileCount', - type: FieldConfiguratorType.stage, - ), - _listPadding = PaddingFieldConfigurator( - value: EdgeInsets.zero, - name: 'listPadding', - type: FieldConfiguratorType.stage, - ), + : _tileCount = IntFieldConfigurator(value: 1, name: 'tileCount'), + _listPadding = PaddingFieldConfigurator(value: EdgeInsets.zero, name: 'listPadding'), _title = StringFieldConfigurator(value: 'My List Tile', name: 'title'), - _stageColor = ColorFieldConfigurator( - value: Colors.transparent, - name: 'stageColor', - type: FieldConfiguratorType.stage, - ), + _stageColor = ColorFieldConfigurator(value: Colors.transparent, name: 'stageColor'), _circleColor = ColorFieldConfigurator(value: Colors.purple, name: 'circleColor'), _tileColor = ColorFieldConfiguratorNullable(value: Colors.cyan, name: 'tileColor'), _textColor = ColorFieldConfiguratorNullable(value: Colors.white, name: 'textColor'), _borderRadius = DoubleFieldConfiguratorNullable(value: 10, name: 'borderRadius'), - _tileGap = DoubleFieldConfigurator( - value: 0, - name: 'tileSpace', - type: FieldConfiguratorType.stage, - ); + _tileGap = DoubleFieldConfigurator(value: 0, name: 'tileSpace'); @override - List get fieldConfigurators { + List get widgetConfigurators { return [ - _tileCount, - _listPadding, _title, - _tileGap, - _stageColor, _circleColor, _tileColor, _borderRadius, @@ -44,6 +24,17 @@ class MyListTileWidgetStage extends WidgetStageData { ]; } + @override + List get stageConfigurators { + return [ + _tileCount, + _tileGap, + _listPadding, + _stageColor, + _circleColor, + ]; + } + @override String get name => 'MyListTileWidget'; diff --git a/example/lib/stage_data/my_other_widget_stage.dart b/example/lib/stage_data/my_other_widget_stage.dart index 890ea4f..96db5c6 100644 --- a/example/lib/stage_data/my_other_widget_stage.dart +++ b/example/lib/stage_data/my_other_widget_stage.dart @@ -22,10 +22,13 @@ class MyOtherWidgetStageData extends WidgetStageData { } @override - List get fieldConfigurators { + List get widgetConfigurators { return [ _text, _padding, ]; } + + @override + List get stageConfigurators => []; } diff --git a/example/lib/stage_data/my_widget_stage.dart b/example/lib/stage_data/my_widget_stage.dart index 778e0c4..27aabd5 100644 --- a/example/lib/stage_data/my_widget_stage.dart +++ b/example/lib/stage_data/my_widget_stage.dart @@ -32,7 +32,7 @@ class MyWidgetStageData extends WidgetStageData { } @override - List get fieldConfigurators { + List get widgetConfigurators { return [ _color, _text, @@ -40,4 +40,7 @@ class MyWidgetStageData extends WidgetStageData { _nullableBool, ]; } + + @override + List get stageConfigurators => []; } diff --git a/lib/src/field_configurators/bool_field_configurator.dart b/lib/src/field_configurators/bool_field_configurator.dart index c45d692..dd7ab6a 100644 --- a/lib/src/field_configurators/bool_field_configurator.dart +++ b/lib/src/field_configurators/bool_field_configurator.dart @@ -22,7 +22,6 @@ class BoolFieldConfigurator extends FieldConfigurator { BoolFieldConfigurator({ required super.value, required super.name, - super.type, }); @override diff --git a/lib/src/field_configurators/color_field_configurator.dart b/lib/src/field_configurators/color_field_configurator.dart index cd9d321..64e901f 100644 --- a/lib/src/field_configurators/color_field_configurator.dart +++ b/lib/src/field_configurators/color_field_configurator.dart @@ -7,7 +7,6 @@ class ColorFieldConfigurator extends FieldConfigurator { ColorFieldConfigurator({ required super.value, required super.name, - super.type, }); @override diff --git a/lib/src/field_configurators/double_field_configurator.dart b/lib/src/field_configurators/double_field_configurator.dart index 2130e2d..d37626b 100644 --- a/lib/src/field_configurators/double_field_configurator.dart +++ b/lib/src/field_configurators/double_field_configurator.dart @@ -23,7 +23,6 @@ class DoubleFieldConfigurator extends FieldConfigurator { DoubleFieldConfigurator({ required super.value, required super.name, - super.type, }); @override diff --git a/lib/src/field_configurators/enum_field_configurator.dart b/lib/src/field_configurators/enum_field_configurator.dart index da99a3a..92ec297 100644 --- a/lib/src/field_configurators/enum_field_configurator.dart +++ b/lib/src/field_configurators/enum_field_configurator.dart @@ -28,7 +28,6 @@ class EnumFieldConfigurator extends FieldConfigurator { required super.value, required super.name, required this.enumValues, - super.type, }); final List enumValues; diff --git a/lib/src/field_configurators/int_field_configurator.dart b/lib/src/field_configurators/int_field_configurator.dart index 0c8590c..07b31e8 100644 --- a/lib/src/field_configurators/int_field_configurator.dart +++ b/lib/src/field_configurators/int_field_configurator.dart @@ -23,7 +23,6 @@ class IntFieldConfigurator extends FieldConfigurator { IntFieldConfigurator({ required super.value, required super.name, - super.type, }); @override diff --git a/lib/src/field_configurators/padding_field_configurator.dart b/lib/src/field_configurators/padding_field_configurator.dart index 47255bc..1aca305 100644 --- a/lib/src/field_configurators/padding_field_configurator.dart +++ b/lib/src/field_configurators/padding_field_configurator.dart @@ -24,7 +24,6 @@ class PaddingFieldConfigurator extends FieldConfigurator { PaddingFieldConfigurator({ required super.value, required super.name, - super.type, }); @override diff --git a/lib/src/field_configurators/string_field_configurator.dart b/lib/src/field_configurators/string_field_configurator.dart index 4569eb9..0329465 100644 --- a/lib/src/field_configurators/string_field_configurator.dart +++ b/lib/src/field_configurators/string_field_configurator.dart @@ -23,7 +23,6 @@ class StringFieldConfigurator extends FieldConfigurator { StringFieldConfigurator({ required super.value, required super.name, - super.type, }); @override diff --git a/lib/src/widget_stage.dart b/lib/src/widget_stage.dart index aaf803a..3b0d5f9 100644 --- a/lib/src/widget_stage.dart +++ b/lib/src/widget_stage.dart @@ -30,7 +30,7 @@ class _WidgetStageState extends State { @override Widget build(BuildContext context) { final List stageConfiguratorWidgets = () { - final stageConfigurators = (_stageController.selectedWidget?.fieldConfigurators ?? []).stageConfigurators; + final stageConfigurators = _stageController.selectedWidget?.stageConfigurators ?? []; if (stageConfigurators.isEmpty) return []; return stageConfigurators.map((configurator) { if (configurator == stageConfigurators.first) { @@ -50,7 +50,7 @@ class _WidgetStageState extends State { }(); final List widgetConfiguratorWidgets = () { - final widgetConfigurators = (_stageController.selectedWidget?.fieldConfigurators ?? []).widgetConfigurators; + final widgetConfigurators = _stageController.selectedWidget?.widgetConfigurators ?? []; if (widgetConfigurators.isEmpty) return []; return widgetConfigurators.map((configurator) { if (configurator == widgetConfigurators.first) { @@ -199,15 +199,12 @@ abstract class FieldConfigurator extends ChangeNotifier { FieldConfigurator({ required this.value, required this.name, - FieldConfiguratorType? type, - }) : type = type ?? FieldConfiguratorType.widget; + }); T value; String name; - final FieldConfiguratorType type; - bool get isNullable => null is T; void updateValue(T value) { @@ -224,30 +221,19 @@ class StageController extends ChangeNotifier { WidgetStageData? get selectedWidget => _selectedWidget; void selectWidget(WidgetStageData selectedWidget) { - for (final fieldConfigurator in _selectedWidget?.fieldConfigurators ?? []) { - fieldConfigurator.removeListener(notifyListeners); + for (final widgetConfigurator in _selectedWidget?.widgetConfigurators ?? []) { + widgetConfigurator.removeListener(notifyListeners); + } + for (final stageConfigurator in _selectedWidget?.stageConfigurators ?? []) { + stageConfigurator.removeListener(notifyListeners); } _selectedWidget = selectedWidget; - for (final fieldConfigurator in _selectedWidget?.fieldConfigurators ?? []) { - fieldConfigurator.addListener(notifyListeners); + for (final widgetConfigurator in _selectedWidget?.widgetConfigurators ?? []) { + widgetConfigurator.addListener(notifyListeners); + } + for (final stageConfigurator in _selectedWidget?.stageConfigurators ?? []) { + stageConfigurator.addListener(notifyListeners); } notifyListeners(); } } - -/// Allows for separation of the configurators in the [ConfigurationBar] depending on whether they affect the -/// widget on the stage or the stage itself (e.g. amount of the same widget to display in a list). -enum FieldConfiguratorType { - widget, - stage, -} - -extension FieldConfiguratorListExtensions on List { - List get stageConfigurators => where((configurator) { - return configurator.type == FieldConfiguratorType.stage; - }).toList(); - - List get widgetConfigurators => where((configurator) { - return configurator.type == FieldConfiguratorType.widget; - }).toList(); -} diff --git a/lib/src/widget_stage_data.dart b/lib/src/widget_stage_data.dart index 01b174c..b21556a 100644 --- a/lib/src/widget_stage_data.dart +++ b/lib/src/widget_stage_data.dart @@ -71,7 +71,14 @@ abstract class WidgetStageData { /// Return the widget you want to put on stage and use Widget widgetBuilder(BuildContext context); - List get fieldConfigurators; + /// [FieldConfigurator]s that affect arguments of the widget displayed on the stage, + /// as opposed to [stageConfigurators] which affect its surroundings or the stage itself. + List get widgetConfigurators; + + /// [FieldConfigurator]s that affect the stage itself and/or provide additional configurations + /// surrounding the [Widget] on the stage (e.g. outer [Padding] or a counter, in case the [Widget] is + /// an [Iterable]. + List get stageConfigurators; Size? get stageSize => const Size(600, 800); } From e438bb5a1d7bd21bf499453f1f7fe9d3acbf84f8 Mon Sep 17 00:00:00 2001 From: robiness Date: Thu, 30 Mar 2023 13:44:09 +0200 Subject: [PATCH 15/15] Refactor configurator groups --- lib/src/widget_stage.dart | 74 +++++++++++++++------------------------ 1 file changed, 28 insertions(+), 46 deletions(-) diff --git a/lib/src/widget_stage.dart b/lib/src/widget_stage.dart index 3b0d5f9..8e8e2f9 100644 --- a/lib/src/widget_stage.dart +++ b/lib/src/widget_stage.dart @@ -29,42 +29,8 @@ class _WidgetStageState extends State { @override Widget build(BuildContext context) { - final List stageConfiguratorWidgets = () { - final stageConfigurators = _stageController.selectedWidget?.stageConfigurators ?? []; - if (stageConfigurators.isEmpty) return []; - return stageConfigurators.map((configurator) { - if (configurator == stageConfigurators.first) { - return _LeadingFieldConfigurationWidget( - configurator: configurator, - title: 'Stage Arguments', - ); - } - return Padding( - padding: configurator == stageConfigurators.last ? const EdgeInsets.only(bottom: 12.0) : EdgeInsets.zero, - child: FieldConfiguratorWidget( - fieldConfigurator: configurator, - child: configurator.build(context), - ), - ); - }).toList(); - }(); - - final List widgetConfiguratorWidgets = () { - final widgetConfigurators = _stageController.selectedWidget?.widgetConfigurators ?? []; - if (widgetConfigurators.isEmpty) return []; - return widgetConfigurators.map((configurator) { - if (configurator == widgetConfigurators.first) { - return _LeadingFieldConfigurationWidget( - configurator: configurator, - title: 'Widget Arguments', - ); - } - return FieldConfiguratorWidget( - fieldConfigurator: configurator, - child: configurator.build(context), - ); - }).toList(); - }(); + final stageConfigurators = _stageController.selectedWidget?.stageConfigurators ?? []; + final widgetConfigurators = _stageController.selectedWidget?.widgetConfigurators ?? []; return Scaffold( body: Column( @@ -87,8 +53,17 @@ class _WidgetStageState extends State { width: 400, child: ConfigurationBar( fields: [ - ...stageConfiguratorWidgets, - ...widgetConfiguratorWidgets, + _ConfiguratorGroup( + title: 'Stage Arguments', + configurators: stageConfigurators, + ), + const SizedBox( + height: 20, + ), + _ConfiguratorGroup( + title: 'Widget Arguments', + configurators: widgetConfigurators, + ), ], ), ), @@ -101,14 +76,14 @@ class _WidgetStageState extends State { } } -class _LeadingFieldConfigurationWidget extends StatelessWidget { - const _LeadingFieldConfigurationWidget({ +class _ConfiguratorGroup extends StatelessWidget { + const _ConfiguratorGroup({ required this.title, - required this.configurator, + this.configurators, }); - final FieldConfigurator configurator; final String title; + final List? configurators; @override Widget build(BuildContext context) { @@ -131,11 +106,18 @@ class _LeadingFieldConfigurationWidget extends StatelessWidget { ), ), ), - const SizedBox(height: 24.0), - FieldConfiguratorWidget( - fieldConfigurator: configurator, - child: configurator.build(context), + const SizedBox( + height: 8, ), + ...?configurators?.map((configurator) { + return Padding( + padding: const EdgeInsets.symmetric(vertical: 4), + child: FieldConfiguratorWidget( + fieldConfigurator: configurator, + child: configurator.build(context), + ), + ); + }), ], ); }