Moved editor toolbar to overlay

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

@@ -424,6 +424,7 @@ class _LinkButtonState extends State<LinkButton> {
   }
 
   Widget buildOverlay(BuildContext context) {
+
     final toolbar = ZefyrToolbar.of(context);
     final style = toolbar.editor.selectionStyle;
 

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

@@ -184,6 +184,37 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
   final FocusNode _toolbarFocusNode = new FocusNode();
   ZefyrImageDelegate _imageDelegate;
   ZefyrEditorScope _scope;
+  ZefyrThemeData _themeData;
+
+  OverlayEntry _toolbar;
+  OverlayState _overlay;
+
+  void showToolbar() {
+    _toolbar = new OverlayEntry(
+      builder: (context) => _ZefyrToolbarContainer(
+            theme: _themeData,
+            toolbar: ZefyrToolbar(
+              focusNode: _toolbarFocusNode,
+              editor: _scope,
+              delegate: widget.toolbarDelegate,
+            ),
+          ),
+    );
+    _overlay.insert(_toolbar);
+  }
+
+  void hideToolbar() {
+    _toolbar?.remove();
+    _toolbar = null;
+  }
+
+  void _handleChange() {
+    if (_scope.focusOwner == FocusOwner.none) {
+      hideToolbar();
+    } else if (_toolbar == null) {
+      showToolbar();
+    }
+  }
 
   @override
   void initState() {
@@ -195,6 +226,7 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
       controller: widget.controller,
       focusNode: widget.focusNode,
     );
+    _scope.addListener(_handleChange);
   }
 
   @override
@@ -208,8 +240,28 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
     }
   }
 
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+
+    final parentTheme = ZefyrTheme.of(context, nullOk: true);
+    final fallbackTheme = ZefyrThemeData.fallback(context);
+    _themeData = (parentTheme != null)
+        ? fallbackTheme.merge(parentTheme)
+        : fallbackTheme;
+
+    final overlay = Overlay.of(context, debugRequiredFor: widget);
+    if (_overlay != overlay) {
+      hideToolbar();
+      _overlay = overlay;
+      // TODO: update toolbar.
+    }
+  }
+
   @override
   void dispose() {
+    hideToolbar();
+    _scope.removeListener(_handleChange);
     _scope.dispose();
     _toolbarFocusNode.dispose();
     super.dispose();
@@ -228,21 +280,18 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
 
     final children = <Widget>[];
     children.add(Expanded(child: editable));
-    final toolbar = ZefyrToolbar(
-      editor: _scope,
-      focusNode: _toolbarFocusNode,
-      delegate: widget.toolbarDelegate,
-    );
-    children.add(toolbar);
-
-    final parentTheme = ZefyrTheme.of(context, nullOk: true);
-    final fallbackTheme = ZefyrThemeData.fallback(context);
-    final actualTheme = (parentTheme != null)
-        ? fallbackTheme.merge(parentTheme)
-        : fallbackTheme;
+    if (_toolbar != null) {
+      children.add(SizedBox(height: ZefyrToolbar.kToolbarHeight));
+    }
+//    final toolbar = ZefyrToolbar(
+//      editor: _scope,
+//      focusNode: _toolbarFocusNode,
+//      delegate: widget.toolbarDelegate,
+//    );
+//    children.add(toolbar);
 
     return ZefyrTheme(
-      data: actualTheme,
+      data: _themeData,
       child: _ZefyrEditorScope(
         scope: _scope,
         child: Column(children: children),
@@ -250,3 +299,22 @@ class _ZefyrEditorState extends State<ZefyrEditor> {
     );
   }
 }
+
+class _ZefyrToolbarContainer extends StatelessWidget {
+  final ZefyrThemeData theme;
+  final Widget toolbar;
+
+  const _ZefyrToolbarContainer({Key key, this.theme, this.toolbar})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final media = MediaQuery.of(context);
+    return Positioned(
+      bottom: media.viewInsets.bottom,
+      left: 0.0,
+      right: 0.0,
+      child: ZefyrTheme(data: theme, child: toolbar),
+    );
+  }
+}

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

@@ -82,7 +82,6 @@ class _ZefyrSelectionOverlayState extends State<ZefyrSelectionOverlay>
               editable: editable,
               controls: widget.controls,
               delegate: this,
-              visible: true,
             ),
           ),
     );
@@ -423,13 +422,11 @@ class _SelectionToolbar extends StatefulWidget {
     @required this.editable,
     @required this.controls,
     @required this.delegate,
-    @required this.visible,
   }) : super(key: key);
 
   final ZefyrEditableTextScope editable;
   final TextSelectionControls controls;
   final TextSelectionDelegate delegate;
-  final bool visible;
 
   @override
   _SelectionToolbarState createState() => new _SelectionToolbarState();