Adjust appearance

example/lib/main.dart

@@ -16,7 +16,6 @@ class MyApp extends StatefulWidget {
 }
 
 class _MyAppState extends State<MyApp> {
-
   final ThemeData theme = ThemeData.light();
 
   late final StageController _stageController = StageController(theme: theme);

example/lib/stage_data/my_list_tile_widget_stage.dart

@@ -6,7 +6,6 @@ class MyListTileWidgetStage extends WidgetStageData {
       : _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'),
         _circleColor = ColorFieldConfigurator(value: Colors.purple, name: 'circleColor'),
         _tileColor = ColorFieldConfiguratorNullable(value: Colors.cyan, name: 'tileColor'),
         _textColor = ColorFieldConfiguratorNullable(value: Colors.white, name: 'textColor'),
@@ -30,8 +29,6 @@ class MyListTileWidgetStage extends WidgetStageData {
       _tileCount,
       _tileGap,
       _listPadding,
-      _stageColor,
-      _circleColor,
     ];
   }
 
@@ -43,30 +40,26 @@ class MyListTileWidgetStage extends WidgetStageData {
   final DoubleFieldConfiguratorNullable _borderRadius;
   final PaddingFieldConfigurator _listPadding;
   final StringFieldConfigurator _title;
-  final ColorFieldConfigurator _stageColor;
   final ColorFieldConfigurator _circleColor;
   final ColorFieldConfiguratorNullable _textColor;
   final ColorFieldConfiguratorNullable _tileColor;
 
   @override
   Widget widgetBuilder(BuildContext context) {
-    return ColoredBox(
-      color: _stageColor.value,
-      child: ListView.separated(
-        padding: _listPadding.value,
-        itemCount: _tileCount.value,
-        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,
-          );
-        },
-      ),
+    return ListView.separated(
+      padding: _listPadding.value,
+      itemCount: _tileCount.value,
+      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,
+        );
+      },
     );
   }
 }

example/pubspec.lock

@@ -70,14 +70,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.3"
-  flutter_lints:
-    dependency: "direct dev"
-    description:
-      name: flutter_lints
-      sha256: aeb0b80a8b3709709c9cc496cdc027c5b3216796bc0af0ce1007eaf24464fd4c
-      url: "https://pub.dev"
-    source: hosted
-    version: "2.0.1"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -92,21 +84,13 @@ packages:
     source: hosted
     version: "0.6.7"
   lint:
-    dependency: "direct main"
+    dependency: "direct dev"
     description:
       name: lint
-      sha256: "3e9343b1cededcfb1e8b40d0dbd3592b7a1c6c0121545663a991433390c2bc97"
-      url: "https://pub.dev"
-    source: hosted
-    version: "2.0.1"
-  lints:
-    dependency: transitive
-    description:
-      name: lints
-      sha256: "5e4a9cd06d447758280a8ac2405101e0e2094d2a1dbdd3756aec3fe7775ba593"
+      sha256: f4bd4dbaa39f4ae8836f2d1275f2f32bc68b3a8cce0a0735dd1f7a601f06682a
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.1"
+    version: "2.1.2"
   matcher:
     dependency: transitive
     description:
@@ -208,5 +192,5 @@ packages:
     source: hosted
     version: "2.1.4"
 sdks:
-  dart: ">=3.0.0-0 <4.0.0"
+  dart: ">=3.0.0 <4.0.0"
   flutter: ">=1.17.0"

example/pubspec.yaml

@@ -11,15 +11,13 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
-  lint: ^2.0.1
 
   stage_craft:
     path: ../
 
 
 dev_dependencies:
-  flutter_lints: ^2.0.0
-
+  lint: ^2.1.2
   flutter_test:
     sdk: flutter
 

example/test/widget_test.dart

@@ -5,11 +5,10 @@
 // gestures. You can also use WidgetTester to find child widgets in the widget
 // tree, read text, and verify that the values of widget properties are correct.
 
+import 'package:example/main.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 
-import 'package:example/main.dart';
-
 void main() {
   testWidgets('Counter increments smoke test', (WidgetTester tester) async {
     // Build our app and trigger a frame.

lib/src/field_configurators/color_field_configurator.dart

@@ -12,7 +12,7 @@ class ColorFieldConfigurator extends FieldConfigurator<Color> {
   @override
   Widget build(BuildContext context) {
     return ColorConfigurationWidget(
-      value: value,
+      configurator: this,
       updateValue: (Color? color) {
         updateValue(color ?? Colors.transparent);
       },
@@ -30,7 +30,7 @@ class ColorFieldConfiguratorNullable extends FieldConfigurator<Color?> {
   @override
   Widget build(BuildContext context) {
     return ColorConfigurationWidget(
-      value: value,
+      configurator: this,
       updateValue: updateValue,
     );
   }
@@ -39,7 +39,7 @@ class ColorFieldConfiguratorNullable extends FieldConfigurator<Color?> {
 class ColorConfigurationWidget extends StatefulConfigurationWidget<Color?> {
   const ColorConfigurationWidget({
     super.key,
-    required super.value,
+    required super.configurator,
     required super.updateValue,
   });
 
@@ -48,7 +48,7 @@ class ColorConfigurationWidget extends StatefulConfigurationWidget<Color?> {
 }
 
 class _ColorConfigurationFieldState extends State<ColorConfigurationWidget> {
-  late Color? color = widget.value;
+  late Color? color = widget.configurator.value;
 
   @override
   Widget build(BuildContext context) {
@@ -61,7 +61,7 @@ class _ColorConfigurationFieldState extends State<ColorConfigurationWidget> {
               title: const Text('Pick a color!'),
               content: SingleChildScrollView(
                 child: ColorPicker(
-                  pickerColor: widget.value ?? Colors.white,
+                  pickerColor: color ?? Colors.white,
                   onColorChanged: (newColor) {
                     color = newColor;
                   },
@@ -86,25 +86,31 @@ class _ColorConfigurationFieldState extends State<ColorConfigurationWidget> {
           },
         );
       },
-      child: ClipRRect(
-        borderRadius: BorderRadius.circular(8),
-        child: Container(
-          height: 48,
-          width: 48,
-          foregroundDecoration: BoxDecoration(
-            // The actual color drawn over the chessboard pattern
-            color: widget.value,
-          ),
-          // The chessboard pattern
-          child: const CustomPaint(
-            foregroundPainter: ChessBoardPainter(
-              boxSize: 8,
-              // The color of the chessboard pattern
-              color: Colors.grey,
-            ),
-            child: ColoredBox(
-              // Background of the chessboard pattern
-              color: Colors.white,
+      child: Align(
+        alignment: Alignment.centerRight,
+        child: MouseRegion(
+          cursor: SystemMouseCursors.click,
+          child: ClipRRect(
+            borderRadius: BorderRadius.circular(8),
+            child: Container(
+              height: 38,
+              width: 38,
+              foregroundDecoration: BoxDecoration(
+                // The actual color drawn over the chessboard pattern
+                color: widget.configurator.value,
+              ),
+              // The chessboard pattern
+              child: const CustomPaint(
+                foregroundPainter: ChessBoardPainter(
+                  boxSize: 8,
+                  // The color of the chessboard pattern
+                  color: Colors.grey,
+                ),
+                child: ColoredBox(
+                  // Background of the chessboard pattern
+                  color: Colors.white,
+                ),
+              ),
             ),
           ),
         ),

lib/src/field_configurators/double_field_configurator.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:stage_craft/src/field_configurators/field_configurator_widget.dart';
 import 'package:stage_craft/stage_craft.dart';
 
@@ -12,7 +13,7 @@ class DoubleFieldConfiguratorNullable extends FieldConfigurator<double?> {
   @override
   Widget build(BuildContext context) {
     return DoubleFieldConfigurationWidget(
-      value: value,
+      configurator: this,
       updateValue: updateValue,
     );
   }
@@ -28,7 +29,7 @@ class DoubleFieldConfigurator extends FieldConfigurator<double> {
   @override
   Widget build(BuildContext context) {
     return DoubleFieldConfigurationWidget(
-      value: value,
+      configurator: this,
       updateValue: (value) {
         updateValue(value ?? 0.0);
       },
@@ -39,7 +40,7 @@ class DoubleFieldConfigurator extends FieldConfigurator<double> {
 class DoubleFieldConfigurationWidget extends StatefulConfigurationWidget<double?> {
   const DoubleFieldConfigurationWidget({
     super.key,
-    required super.value,
+    required super.configurator,
     required super.updateValue,
   });
 
@@ -48,24 +49,32 @@ class DoubleFieldConfigurationWidget extends StatefulConfigurationWidget<double?
 }
 
 class _DoubleFieldConfigurationWidgetState extends State<DoubleFieldConfigurationWidget> {
-  // for example
-  late final TextEditingController _controller = TextEditingController(text: widget.value.toString());
+
+  late final TextEditingController _controller;
+
+  @override
+  void initState() {
+    _controller = TextEditingController(
+      text: widget.configurator.value.toString(),
+    );
+    widget.configurator.addListener(() {
+      if(widget.configurator.value == null) {
+        _controller.text = '';
+      }
+    });
+    super.initState();
+  }
 
   @override
   Widget build(BuildContext context) {
-    return TextField(
-      decoration: const InputDecoration(
-        border: OutlineInputBorder(
-          borderRadius: BorderRadius.all(
-            Radius.circular(8),
-          ),
-        ),
-      ),
+    return FieldConfiguratorInputField(
       controller: _controller,
-      onChanged: (newValue) {
-        widget.updateValue(
-          double.tryParse(newValue),
-        );
+      inputFormatters: [
+        FilteringTextInputFormatter.allow(RegExp('[0-9,.]')),
+      ],
+      onChanged: (value) {
+        final replacedComma = value.replaceAll(',', '.');
+        widget.updateValue(double.tryParse(replacedComma));
       },
     );
   }