Add property bar listenable.

Author: ilopX

patterns/abstract_factory/tool_panel_factory/app/app.dart

@@ -12,7 +12,7 @@ class App {
 
   void addShape(double x, double y) {
     final activeColor = tools.activeColor.value;
-    final activeFactory = tools.activeFactory.value!;
+    final activeFactory = tools.activeFactory.value;
 
     final newShape = activeFactory.createShape(x, y, activeColor);
     newShape.centerToFit();

patterns/abstract_factory/tool_panel_factory/app/tools.dart

@@ -10,22 +10,18 @@ class Tools {
   final List<ToolFactory> factories;
   final List<Color> colors;
 
-  final activeFactory = ValueNotifier<ToolFactory?>(null);
+  late final ValueNotifier<ToolFactory> activeFactory;
 
-  final activeColor = ValueNotifier(Color(0x0FFFFFFFF));
+  late final ValueNotifier<Color> activeColor;
 
   Future<bool> get iconsReady => _iconsInitCompleter.future;
 
-  Tools({required this.factories, required this.colors}) {
+  Tools({required this.factories, required this.colors})
+      : assert(factories.isNotEmpty),
+        assert(colors.isNotEmpty) {
+    activeFactory = ValueNotifier(factories.first);
+    activeColor = ValueNotifier(colors.first);
     _initIconsFromShapes();
-
-    if (factories.isNotEmpty) {
-      activeFactory.value = factories.first;
-    }
-
-    if (colors.isNotEmpty) {
-      activeColor.value = colors.first;
-    }
   }
 
   final _iconsInitCompleter = Completer<bool>();

patterns/abstract_factory/tool_panel_factory/main.dart

@@ -9,6 +9,7 @@ import 'factories/star_factory.dart';
 import 'factories/triangle_factory.dart';
 import 'factories/text_factory.dart';
 import 'widgets/drawing_board.dart';
+import 'widgets/property_bar.dart';
 import 'widgets/tool_panel.dart';
 
 class ToolPanelFactoryApp extends StatefulWidget {
@@ -49,6 +50,9 @@ class _ToolPanelFactoryAppState extends State<ToolPanelFactoryApp> {
         ToolPanel(
           tools: app.tools,
         ),
+        PropertyPanel(
+          tools: app.tools,
+        ),
       ],
     );
   }

patterns/abstract_factory/tool_panel_factory/widgets/independent/panel.dart

@@ -1,7 +1,8 @@
 import 'package:flutter/material.dart';
 
 class Panel extends StatelessWidget {
-  static const thickness = 64.0;
+  static const thicknessWidth = 64.0;
+  static const thicknessHeight = 48.0;
 
   final Axis direction;
   final Widget child;
@@ -15,8 +16,8 @@ class Panel extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      height: direction == Axis.horizontal ? thickness : null,
-      width: direction == Axis.vertical ? thickness : null,
+      height: direction == Axis.horizontal ? thicknessHeight : null,
+      width: direction == Axis.vertical ? thicknessWidth : null,
       clipBehavior: Clip.antiAlias,
       decoration: BoxDecoration(
         color: Color(0xFF3B3B3B),

patterns/abstract_factory/tool_panel_factory/widgets/property_bar.dart

@@ -1,23 +1,153 @@
 import 'package:flutter/material.dart';
 
+import '../app/tools.dart';
+import '../pattern/property.dart';
+import '../pattern/tool_factory.dart';
 import 'independent/panel.dart';
 
-class PropertyBar extends StatelessWidget {
-  const PropertyBar({Key? key}) : super(key: key);
+class PropertyPanel extends StatelessWidget {
+  final Tools tools;
+
+  const PropertyPanel({
+    Key? key,
+    required this.tools,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return Positioned(
       top: 12,
-      left: 200,
-      child: Panel(
-        direction: Axis.horizontal,
-        child: Row(
-          children: [
-            Text('Hello'),
-          ],
+      left: 12 + 64 + 8 + 12,
+      child: _buildTheme(
+        child: Panel(
+          direction: Axis.horizontal,
+          child: ValueListenableBuilder<ToolFactory>(
+            valueListenable: tools.activeFactory,
+            builder: (_, activeFactory, __) {
+              return Row(
+                children: [
+                  for (final prop in activeFactory.properties)
+                    _buildProperty(prop),
+                ],
+              );
+            },
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildTheme({required Widget child}) {
+    return Material(
+        color: Colors.transparent,
+        textStyle: TextStyle(
+          color: Colors.white,
+          fontSize: 18,
+          fontWeight: FontWeight.w600,
+        ),
+        child: child);
+  }
+
+  Widget _buildProperty(Property prop) {
+    switch (prop.value().runtimeType) {
+      case String:
+        return StringPropertyWidget(property: prop);
+      case double:
+        return DoublePropertyWidget(property: prop);
+    }
+
+    throw 'Type(${prop.value().runtimeType}) of property is not support';
+  }
+}
+
+class _FieldLabel extends StatelessWidget {
+  final String text;
+  final Widget child;
+
+  const _FieldLabel({
+    Key? key,
+    required this.text,
+    required this.child,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        SizedBox(width: 10),
+        Text(text + ':'),
+        SizedBox(width: 10),
+        child,
+        SizedBox(width: 20),
+      ],
+    );
+  }
+}
+
+class StringPropertyWidget extends StatelessWidget {
+  final Property property;
+
+  const StringPropertyWidget({Key? key, required this.property}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return _FieldLabel(
+      text: property.name,
+      child: Container(
+        color: Colors.white12,
+        width: 120,
+        height: 32,
+        child: TextFormField(
+          style: TextStyle(fontSize: 18, color: Colors.white70),
+          decoration: InputDecoration(
+            contentPadding: const EdgeInsets.only(left: 5.0, bottom: 14.0),
+            border: UnderlineInputBorder(),
+          ),
+          initialValue: property.value(),
+          onChanged: property.onChange,
         ),
       ),
     );
   }
 }
+
+
+class DoublePropertyWidget extends StatefulWidget {
+  final Property property;
+
+  const DoublePropertyWidget({Key? key, required this.property})
+      : super(key: key);
+
+  @override
+  _DoublePropertyWidgetState createState() => _DoublePropertyWidgetState();
+}
+
+class _DoublePropertyWidgetState extends State<DoublePropertyWidget> {
+  @override
+  Widget build(BuildContext context) {
+    return _FieldLabel(
+      text: widget.property.name,
+      child: Row(
+        children: [
+          Slider(
+            min: 4,
+            max: 150,
+            value: widget.property.value() as double,
+            onChanged: (val) {
+              setState(() {
+                widget.property.onChange(val);
+              });
+            },
+          ),
+          SizedBox(
+            width: 32,
+            child: Text(
+              (widget.property.value() as double).toStringAsFixed(0),
+              textAlign: TextAlign.right,
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}