Merge pull request #1020 from EnsembleUI/focusnode-update

Dismiss keyboard when tapping the non-interactive views
EnsembleUI · Dec 6, 2023 · 27839f1 · 27839f1
2 parents 1122530 + 478ff9b
commit 27839f1
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 23 deletions.
diff --git a/assets/schema/ensemble_schema.json b/assets/schema/ensemble_schema.json
@@ -166,6 +166,10 @@
                   "type": "boolean",
                   "description": "Specify if the content of this screen is scrollable with a global scrollbar. Using this also allow you to customize the scrolling experience of the header."
                 },
+                "unfocus": {
+                  "type": "boolean",
+                  "description": "Specify if the keyboard should dismissed automatically when tapping in the non interactive widgets. Default (false)"
+                },
                 "showNavigationIcon": {
                   "type": "boolean",
                   "description": "For a screen with header, the App will automatically show the Menu, Back, or Close icon (for modal screen) before the title. On modal screen without the header, the Close icon will be shown. Set this flag to false if you wish to hide the icons and handle the navigation yourself."

diff --git a/lib/framework/view/page.dart b/lib/framework/view/page.dart
@@ -19,6 +19,7 @@ import 'package:ensemble/page_model.dart';
 import 'package:ensemble/screen_controller.dart';
 import 'package:ensemble/util/utils.dart';
 import 'package:ensemble/widget/helpers/controllers.dart';
+import 'package:ensemble/widget/helpers/unfocus.dart';
 import 'package:ensemble/widget/helpers/widgets.dart';
 import 'package:flutter/material.dart';
 
@@ -409,29 +410,34 @@ class PageState extends State<Page>
 
     Widget rtn = DataScopeWidget(
       scopeManager: _scopeManager,
-      child: Scaffold(
-          resizeToAvoidBottomInset: true,
-          // slight optimization, if body background is set, let's paint
-          // the entire screen including the Safe Area
-          backgroundColor: backgroundColor,
-
-          // appBar is inside CustomScrollView if defined
-          appBar: fixedAppBar,
-          body: isScrollableView
-              ? buildScrollablePageContent(hasDrawer)
-              : buildFixedPageContent(fixedAppBar != null),
-          bottomNavigationBar: _bottomNavBar,
-          drawer: _drawer,
-          endDrawer: _endDrawer,
-          bottomSheet: _buildFooter(
-            _scopeManager,
-            widget._pageModel,
-          ),
-          floatingActionButton: closeModalButton,
-          floatingActionButtonLocation:
-              widget._pageModel.pageStyles?['navigationIconPosition'] == 'start'
-                  ? FloatingActionButtonLocation.startTop
-                  : FloatingActionButtonLocation.endTop),
+      child: Unfocus(
+        isUnfocus: Utils.getBool(widget._pageModel.pageStyles?['unfocus'],
+            fallback: false),
+        child: Scaffold(
+            resizeToAvoidBottomInset: true,
+            // slight optimization, if body background is set, let's paint
+            // the entire screen including the Safe Area
+            backgroundColor: backgroundColor,
+
+            // appBar is inside CustomScrollView if defined
+            appBar: fixedAppBar,
+            body: isScrollableView
+                ? buildScrollablePageContent(hasDrawer)
+                : buildFixedPageContent(fixedAppBar != null),
+            bottomNavigationBar: _bottomNavBar,
+            drawer: _drawer,
+            endDrawer: _endDrawer,
+            bottomSheet: _buildFooter(
+              _scopeManager,
+              widget._pageModel,
+            ),
+            floatingActionButton: closeModalButton,
+            floatingActionButtonLocation:
+                widget._pageModel.pageStyles?['navigationIconPosition'] ==
+                        'start'
+                    ? FloatingActionButtonLocation.startTop
+                    : FloatingActionButtonLocation.endTop),
+      ),
     );
 
     // selectableText at the root

diff --git a/lib/widget/helpers/unfocus.dart b/lib/widget/helpers/unfocus.dart
@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+
+/// [Unfocus] - A gesture detector widget
+///
+/// It hides the keyboard when tapping outside of non intractive widgetss
+class Unfocus extends StatelessWidget {
+  const Unfocus({
+    Key? key,
+    required this.child,
+    this.isUnfocus = true,
+  }) : super(key: key);
+
+  final Widget child;
+  final bool isUnfocus;
+
+  @override
+  Widget build(BuildContext context) {
+    // If false, Just return the child
+    if (!isUnfocus) return child;
+
+    return Listener(
+      behavior: HitTestBehavior.opaque,
+      onPointerDown: (_) => FocusManager.instance.primaryFocus?.unfocus(),
+      child: child,
+    );
+  }
+}