Added basic ZefyrField widget

packages/zefyr/CHANGELOG.md

@@ -6,8 +6,11 @@ layouts, like forms with multiple input fields.
 It is now required to always wrap `ZefyrEditor` with an instance of this new widget. See examples
 and readme for more details.
 
+There is also new `ZefyrField` widget which integrates Zefyr with material design decorations.
+
 * Breaking change: `ZefyrEditor` requires an ancestor `ZefyrScaffold`.
 * Exposed `ZefyrEditor.physics` property to allow customization of `ScrollPhysics`.
+* Added basic `ZefyrField` widget.
 
 ## 0.2.0
 

packages/zefyr/example/lib/src/form.dart

@@ -17,21 +17,8 @@ class _FormEmbeddedScreenState extends State<FormEmbeddedScreen> {
     final form = ListView(
       children: <Widget>[
         TextField(decoration: InputDecoration(labelText: 'Name')),
-        TextField(decoration: InputDecoration(labelText: 'Email')),
-        TextField(
-          decoration: InputDecoration(labelText: 'Regular multiline text'),
-          maxLines: 5,
-        ),
-        Container(
-          padding: EdgeInsets.only(top: 16.0),
-          child: Text(
-            'Zefyr rich text',
-            style: TextStyle(color: Colors.black54, fontSize: 16.0),
-          ),
-          alignment: Alignment.centerLeft,
-        ),
-
         buildEditor(),
+        TextField(decoration: InputDecoration(labelText: 'Email')),
       ],
     );
 
@@ -62,21 +49,16 @@ class _FormEmbeddedScreenState extends State<FormEmbeddedScreen> {
       ),
     );
 
-    return Container(
-      margin: EdgeInsets.symmetric(vertical: 8.0),
-      constraints: BoxConstraints.tightFor(height: 300.0),
-      decoration:
-          BoxDecoration(border: Border.all(color: Colors.grey.shade400)),
-      child: ZefyrTheme(
-        data: theme,
-        child: ZefyrEditor(
-          padding: EdgeInsets.all(8.0),
-          controller: _controller,
-          focusNode: _focusNode,
-          autofocus: false,
-          imageDelegate: new CustomImageDelegate(),
-          physics: ClampingScrollPhysics(),
-        ),
+    return ZefyrTheme(
+      data: theme,
+      child: ZefyrField(
+        height: 200.0,
+        decoration: InputDecoration(labelText: 'Description'),
+        controller: _controller,
+        focusNode: _focusNode,
+        autofocus: false,
+        imageDelegate: new CustomImageDelegate(),
+        physics: ClampingScrollPhysics(),
       ),
     );
   }

packages/zefyr/lib/src/widgets/field.dart

@@ -0,0 +1,86 @@
+import 'package:flutter/material.dart';
+
+import 'controller.dart';
+import 'editor.dart';
+import 'image.dart';
+import 'toolbar.dart';
+
+/// Zefyr editor with material design decorations.
+class ZefyrField extends StatefulWidget {
+  /// Decoration to paint around this editor.
+  final InputDecoration decoration;
+
+  /// Height of this editor field.
+  final double height;
+  final ZefyrController controller;
+  final FocusNode focusNode;
+  final bool autofocus;
+  final bool enabled;
+  final ZefyrToolbarDelegate toolbarDelegate;
+  final ZefyrImageDelegate imageDelegate;
+  final ScrollPhysics physics;
+
+  const ZefyrField({
+    Key key,
+    this.decoration,
+    this.height,
+    this.controller,
+    this.focusNode,
+    this.autofocus: false,
+    this.enabled,
+    this.toolbarDelegate,
+    this.imageDelegate,
+    this.physics,
+  }) : super(key: key);
+
+  @override
+  _ZefyrFieldState createState() => _ZefyrFieldState();
+}
+
+class _ZefyrFieldState extends State<ZefyrField> {
+  @override
+  Widget build(BuildContext context) {
+    Widget child = ZefyrEditor(
+      padding: EdgeInsets.symmetric(vertical: 6.0),
+      controller: widget.controller,
+      focusNode: widget.focusNode,
+      autofocus: widget.autofocus,
+      enabled: widget.enabled ?? true,
+      toolbarDelegate: widget.toolbarDelegate,
+      imageDelegate: widget.imageDelegate,
+      physics: widget.physics,
+    );
+
+    if (widget.height != null) {
+      child = ConstrainedBox(
+        constraints: BoxConstraints.tightFor(height: widget.height),
+        child: child,
+      );
+    }
+
+    return AnimatedBuilder(
+      animation:
+          Listenable.merge(<Listenable>[widget.focusNode, widget.controller]),
+      builder: (BuildContext context, Widget child) {
+        return InputDecorator(
+          decoration: _getEffectiveDecoration(),
+          isFocused: widget.focusNode.hasFocus,
+          isEmpty: widget.controller.document.length == 1,
+          child: child,
+        );
+      },
+      child: child,
+    );
+  }
+
+  InputDecoration _getEffectiveDecoration() {
+    final InputDecoration effectiveDecoration =
+        (widget.decoration ?? const InputDecoration())
+            .applyDefaults(Theme.of(context).inputDecorationTheme)
+            .copyWith(
+              enabled: widget.enabled ?? true,
+            );
+
+    return effectiveDecoration;
+  }
+}

packages/zefyr/lib/zefyr.dart

@@ -15,6 +15,7 @@ export 'src/widgets/common.dart';
 export 'src/widgets/controller.dart';
 export 'src/widgets/editable_text.dart';
 export 'src/widgets/editor.dart';
+export 'src/widgets/field.dart';
 export 'src/widgets/horizontal_rule.dart';
 export 'src/widgets/image.dart';
 export 'src/widgets/list.dart';
@@ -24,4 +25,3 @@ export 'src/widgets/scaffold.dart';
 export 'src/widgets/selection.dart' hide SelectionHandleDriver;
 export 'src/widgets/theme.dart';
 export 'src/widgets/toolbar.dart';
-//export 'src/widgets/render_context.dart';