Search bar improved: alignment option added, search settings changed from icons to checkboxes with titles, search happens on the fly, other minor improvements

lib/src/models/config/toolbar/buttons/search_configurations.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart' show Color;
 
 import '../../../../../flutter_quill.dart';
@@ -24,6 +25,7 @@ class QuillToolbarSearchButtonOptions extends QuillToolbarBaseButtonOptions<
     super.iconButtonFactor,
     this.dialogBarrierColor,
     this.customOnPressedCallback,
+    this.searchBarAlignment,
   });
 
   final QuillDialogTheme? dialogTheme;
@@ -34,6 +36,8 @@ class QuillToolbarSearchButtonOptions extends QuillToolbarBaseButtonOptions<
   /// By default we will show simple search dialog ui
   /// you can pass value to this callback to change this
   final QuillToolbarSearchButtonOnPressedCallback? customOnPressedCallback;
+
+  final AlignmentGeometry? searchBarAlignment;
 }
 
 typedef QuillToolbarSearchButtonOnPressedCallback = Future<void> Function(

lib/src/widgets/raw_editor/raw_editor_actions.dart

@@ -462,7 +462,6 @@ class QuillEditorOpenSearchAction extends ContextAction<OpenSearchIntent> {
       context: context,
       builder: (_) => QuillToolbarSearchDialog(
         controller: state.controller,
-        text: '',
       ),
     );
   }

lib/src/widgets/toolbar/buttons/search/search_button.dart

@@ -124,13 +124,13 @@ class QuillToolbarSearchButton extends StatelessWidget {
       return;
     }
     await showDialog<String>(
-      barrierColor: _dialogBarrierColor(context),
+      barrierColor: Colors.transparent,
       context: context,
       builder: (_) => FlutterQuillLocalizationsWidget(
         child: QuillToolbarSearchDialog(
           controller: controller,
           dialogTheme: _dialogTheme(context),
-          text: '',
+          searchBarAlignment: options.searchBarAlignment,
         ),
       ),
     );

lib/src/widgets/toolbar/buttons/search/search_dialog.dart

@@ -1,5 +1,8 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 
+import '../../../../../extensions.dart';
 import '../../../../l10n/extensions/localizations.dart';
 import '../../../../l10n/widgets/localizations.dart';
 import '../../../../models/documents/document.dart';
@@ -42,15 +45,15 @@ class QuillToolbarSearchDialog extends StatefulWidget {
   const QuillToolbarSearchDialog({
     required this.controller,
     this.dialogTheme,
-    this.text,
     this.childBuilder,
+    this.searchBarAlignment,
     super.key,
   });
 
   final QuillController controller;
   final QuillDialogTheme? dialogTheme;
-  final String? text;
   final QuillToolbarSearchDialogChildBuilder? childBuilder;
+  final AlignmentGeometry? searchBarAlignment;
 
   @override
   QuillToolbarSearchDialogState createState() =>
@@ -58,39 +61,24 @@ class QuillToolbarSearchDialog extends StatefulWidget {
 }
 
 class QuillToolbarSearchDialogState extends State<QuillToolbarSearchDialog> {
-  late String _text;
+  final TextEditingController _textController = TextEditingController();
-  late TextEditingController _controller;
+  String _text = '';
-  late List<int>? _offsets;
+  List<int> _offsets = [];
-  late int _index;
+  int _index = 0;
   bool _caseSensitive = false;
   bool _wholeWord = false;
-
+  bool _searchSettingsUnfolded = false;
-  @override
+  Timer? _searchTimer;
-  void initState() {
-    super.initState();
-    _text = widget.text ?? '';
-    _offsets = null;
-    _index = 0;
-    _controller = TextEditingController(text: _text);
-  }
 
   @override
   void dispose() {
-    _controller.dispose();
+    _textController.dispose();
+    _searchTimer?.cancel();
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
-    var matchShown = '';
-    if (_offsets != null) {
-      if (_offsets!.isEmpty) {
-        matchShown = '0/0';
-      } else {
-        matchShown = '${_index + 1}/${_offsets!.length}';
-      }
-    }
-
     final childBuilder = widget.childBuilder;
     if (childBuilder != null) {
       return childBuilder(
@@ -99,7 +87,7 @@ class QuillToolbarSearchDialogState extends State<QuillToolbarSearchDialog> {
           onEditingComplete: _findText,
           onTextChanged: _textChanged,
           caseSensitive: _caseSensitive,
-          textEditingController: _controller,
+          textEditingController: _textController,
           index: _index,
           offsets: _offsets,
           text: _text,
@@ -110,100 +98,170 @@ class QuillToolbarSearchDialogState extends State<QuillToolbarSearchDialog> {
       );
     }
 
-    return Dialog(
+    final searchBarAlignment =
-      shape: RoundedRectangleBorder(
+        widget.searchBarAlignment ?? Alignment.bottomCenter;
-        borderRadius: BorderRadius.circular(5),
+    final searchBarAtBottom = (searchBarAlignment == Alignment.bottomCenter) ||
-      ),
+        (searchBarAlignment == Alignment.bottomLeft) ||
-      backgroundColor: widget.dialogTheme?.dialogBackgroundColor,
+        (searchBarAlignment == Alignment.bottomRight);
-      alignment: Alignment.bottomCenter,
+    final addBottomPadding = searchBarAtBottom && isMobile(supportWeb: true);
-      insetPadding: EdgeInsets.zero,
+    var matchShown = '';
-      child: FlutterQuillLocalizationsWidget(
+    if (_text.isNotEmpty) {
-        child: Builder(
+      if (_offsets.isEmpty) {
-          builder: (context) {
+        matchShown = '0/0';
-            return SizedBox(
+      } else {
-              height: 45,
+        matchShown = '${_index + 1}/${_offsets.length}';
+      }
+    }
+
+    final searchBar = Container(
+      height: addBottomPadding ? 50 : 45,
+      padding: addBottomPadding ? const EdgeInsets.only(bottom: 12) : null,
       child: Row(
         children: [
-                  Tooltip(
+          IconButton(
-                    message: context.loc.caseSensitivityAndWholeWordSearch,
+            icon: const Icon(Icons.close),
-                    child: ToggleButtons(
+            tooltip: 'Close',
-                      onPressed: (index) {
+            visualDensity: VisualDensity.compact,
-                        if (index == 0) {
+            onPressed: () {
-                          _changeCaseSensitivity();
+              Navigator.of(context).pop();
-                        } else if (index == 1) {
-                          _changeWholeWord();
-                        }
             },
-                      borderRadius: const BorderRadius.all(Radius.circular(2)),
-                      isSelected: [_caseSensitive, _wholeWord],
-                      children: const [
-                        Text(
-                          '\u0391\u03b1',
-                          style: TextStyle(
-                            fontFamily: 'MaterialIcons',
-                            fontSize: 24,
-                          ),
-                        ),
-                        Text(
-                          '\u201c\u2026\u201d',
-                          style: TextStyle(
-                            fontFamily: 'MaterialIcons',
-                            fontSize: 24,
-                          ),
-                        ),
-                      ],
           ),
+          IconButton(
+            icon: const Icon(Icons.more_vert),
+            isSelected: _caseSensitive || _wholeWord,
+            tooltip: 'Search settings',
+            visualDensity: VisualDensity.compact,
+            onPressed: () {
+              setState(() {
+                _searchSettingsUnfolded = !_searchSettingsUnfolded;
+              });
+            },
           ),
           Expanded(
-                    child: Padding(
-                      padding: const EdgeInsets.only(bottom: 12, left: 5),
             child: TextField(
               style: widget.dialogTheme?.inputTextStyle,
               decoration: InputDecoration(
                 isDense: true,
-                          suffixText: (_offsets != null) ? matchShown : '',
+                suffixText: matchShown,
                 suffixStyle: widget.dialogTheme?.labelTextStyle,
               ),
               autofocus: true,
               onChanged: _textChanged,
               textInputAction: TextInputAction.done,
               keyboardType: TextInputType.text,
-                        onEditingComplete: _findText,
+              controller: _textController,
-                        controller: _controller,
             ),
           ),
-                  ),
-                  if (_offsets == null)
-                    IconButton(
-                      icon: const Icon(Icons.search),
-                      tooltip: context.loc.findText,
-                      onPressed: _findText,
-                    ),
-                  if (_offsets != null)
           IconButton(
             icon: const Icon(Icons.keyboard_arrow_up),
             tooltip: context.loc.moveToPreviousOccurrence,
-                      onPressed:
+            onPressed: (_offsets.isNotEmpty) ? _moveToPrevious : null,
-                          (_offsets!.isNotEmpty) ? _moveToPrevious : null,
           ),
-                  if (_offsets != null)
           IconButton(
             icon: const Icon(Icons.keyboard_arrow_down),
             tooltip: context.loc.moveToNextOccurrence,
-                      onPressed: (_offsets!.isNotEmpty) ? _moveToNext : null,
+            onPressed: (_offsets.isNotEmpty) ? _moveToNext : null,
           ),
         ],
       ),
     );
+
+    final searchSettings = SizedBox(
+      height: 45,
+      child: Row(
+        children: [
+          Expanded(
+            child: CheckboxListTile(
+              controlAffinity: ListTileControlAffinity.leading,
+              visualDensity: VisualDensity.compact,
+              contentPadding: EdgeInsets.zero,
+              title: const Text(
+                'Case sensitive',
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+              ),
+              value: _caseSensitive,
+              onChanged: (value) {
+                setState(() {
+                  _caseSensitive = value!;
+                  _findText();
+                });
+              },
+            ),
+          ),
+          Expanded(
+            child: CheckboxListTile(
+              controlAffinity: ListTileControlAffinity.leading,
+              visualDensity: VisualDensity.compact,
+              contentPadding: EdgeInsets.zero,
+              title: const Text(
+                'Whole word',
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+              ),
+              value: _wholeWord,
+              onChanged: (value) {
+                setState(() {
+                  _wholeWord = value!;
+                  _findText();
+                });
+              },
+            ),
+          ),
+        ],
+      ),
+    );
+
+    return Dialog(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(5),
+      ),
+      backgroundColor: widget.dialogTheme?.dialogBackgroundColor,
+      alignment: searchBarAlignment,
+      insetPadding: EdgeInsets.zero,
+      child: FlutterQuillLocalizationsWidget(
+        child: Builder(
+          builder: (context) {
+            return Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                if (_searchSettingsUnfolded && searchBarAtBottom)
+                  searchSettings,
+                searchBar,
+                if (_searchSettingsUnfolded && !searchBarAtBottom)
+                  searchSettings,
+              ],
+            );
           },
         ),
       ),
     );
   }
 
+  void _textChanged(String text) {
+    _text = text;
+    if (_searchTimer?.isActive ?? false) {
+      _searchTimer?.cancel();
+    }
+    _searchTimer = Timer(
+      const Duration(milliseconds: 300),
+      _findText,
+    );
+  }
+
   void _findText() {
-    _text = _controller.text;
     if (_text.isEmpty) {
+      setState(() {
+        _offsets = [];
+        _index = 0;
+        widget.controller.updateSelection(
+          TextSelection(
+            baseOffset: widget.controller.selection.baseOffset,
+            extentOffset: widget.controller.selection.baseOffset,
+          ),
+          ChangeSource.local,
+        );
+      });
       return;
     }
     setState(() {
@@ -214,7 +272,7 @@ class QuillToolbarSearchDialogState extends State<QuillToolbarSearchDialog> {
       );
       _index = 0;
     });
-    if (_offsets!.isNotEmpty) {
+    if (_offsets.isNotEmpty) {
       _moveToPosition();
     }
   }
@@ -222,33 +280,33 @@ class QuillToolbarSearchDialogState extends State<QuillToolbarSearchDialog> {
   void _moveToPosition() {
     widget.controller.updateSelection(
       TextSelection(
-        baseOffset: _offsets![_index],
+        baseOffset: _offsets[_index],
-        extentOffset: _offsets![_index] + _text.length,
+        extentOffset: _offsets[_index] + _text.length,
       ),
       ChangeSource.local,
     );
   }
 
   void _moveToPrevious() {
-    if (_offsets!.isEmpty) {
+    if (_offsets.isEmpty) {
       return;
     }
     setState(() {
       if (_index > 0) {
         _index -= 1;
       } else {
-        _index = _offsets!.length - 1;
+        _index = _offsets.length - 1;
       }
     });
     _moveToPosition();
   }
 
   void _moveToNext() {
-    if (_offsets!.isEmpty) {
+    if (_offsets.isEmpty) {
       return;
     }
     setState(() {
-      if (_index < _offsets!.length - 1) {
+      if (_index < _offsets.length - 1) {
         _index += 1;
       } else {
         _index = 0;
@@ -256,28 +314,4 @@ class QuillToolbarSearchDialogState extends State<QuillToolbarSearchDialog> {
     });
     _moveToPosition();
   }
-
-  void _textChanged(String value) {
-    setState(() {
-      _text = value;
-      _offsets = null;
-      _index = 0;
-    });
-  }
-
-  void _changeCaseSensitivity() {
-    setState(() {
-      _caseSensitive = !_caseSensitive;
-      _offsets = null;
-      _index = 0;
-    });
-  }
-
-  void _changeWholeWord() {
-    setState(() {
-      _wholeWord = !_wholeWord;
-      _offsets = null;
-      _index = 0;
-    });
-  }
 }