fix(DropdownInput): Do not display dropdown options under the keyboard

* fix(DropdownInput): Scroll dropdown input to top on click * feat(DropdownInputField): Migrate to Flutter Typeahead
FH-SWE-2023 · Jan 4, 2024 · a07b4a4 · a07b4a4
1 parent 22e408a
commit a07b4a4
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 93 deletions.
diff --git a/lib/components/DropdownInputField.dart b/lib/components/DropdownInputField.dart
@@ -1,6 +1,6 @@
 import 'package:biersommelier/components/CustomTextField.dart';
-import 'package:biersommelier/theme/theme.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_typeahead/flutter_typeahead.dart';
 
 abstract class DropdownOption {
   final String name;
@@ -34,104 +34,48 @@ class DropdownInputField<Option extends DropdownOption> extends StatelessWidget
     this.defaultValue,
   });
 
-  final _formFieldKey = GlobalKey();
-
   @override
   Widget build(BuildContext context) {
-    return Autocomplete<Option>(
-      displayStringForOption: (Option option) => option.name,
-      optionsBuilder: (TextEditingValue textEditingValue) {
-        return optionsList.where((Option option) {
-          return (option.name + (option.address ?? ""))
-              .toLowerCase()
-              .contains(textEditingValue.text.toLowerCase());
-        });
-      },
-      fieldViewBuilder: (
-          BuildContext context,
-          TextEditingController controller,
-          FocusNode focusNode,
-          VoidCallback onFieldSubmitted,
-          ) {
-        final textEditingCon = controller;
+    return TypeAheadField(
+      builder: (context, TextEditingController controller, FocusNode focusNode) {
         if (defaultValue != null) {
-          textEditingCon.text = defaultValue!;
+          controller.text = defaultValue!;
+          focusNode.unfocus();
         }
         return TextFormField(
-          key: _formFieldKey,
-          controller: textEditingCon,
+          controller: controller,
           focusNode: focusNode,
-          onFieldSubmitted: (String value) {
-            onFieldSubmitted();
-          },
+          autofocus: false,
           decoration: getCustomInputDecoration(context, labelText),
         );
       },
-      optionsViewBuilder: (
-          BuildContext context,
-          AutocompleteOnSelected<Option> onSelected,
-          Iterable<Option> options,
-          ) {
-        return Align(
-          alignment: Alignment.topLeft,
-          child: LayoutBuilder(
-            builder: (context, viewportConstraints) {
-              RenderBox renderBox = _formFieldKey.currentContext!.findRenderObject() as RenderBox;
-              double formFieldWidth = renderBox.size.width;
-              return ConstrainedBox(
-                constraints: BoxConstraints(
-                    maxHeight: 320,
-                    maxWidth: formFieldWidth
-                ),
-                child: Container(
-                  padding: const EdgeInsets.only(top: 3),
-                  child: Material(
-                    elevation: 4.0,
-                    shape: const RoundedRectangleBorder(
-                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
-                    ),
-                    child: Container(
-                      decoration: BoxDecoration(
-                        border: Border.all(
-                          color: Theme.of(context).colorScheme.lightBorder,
-                          style: BorderStyle.solid,
-                          width: 1.0,
-                        ),
-                        borderRadius: BorderRadius.circular(10.0),
-                      ),
-                      child: ListView(
-                        shrinkWrap: true,
-                        padding: EdgeInsets.zero,
-                        children: options.map((Option option) => GestureDetector(
-                          onTap: () {
-                            onSelected(option);
-                            onOptionSelected(option);
-                          },
-                          child: ListTile(
-                            dense: true,
-                            title: Row(
-                              children: [
-                                Image.asset('assets/icons/${option.icon}', width: 21, color: Theme.of(context).colorScheme.secondary),
-                                const SizedBox(width: 16),
-                                Flexible(
-                                  child: Text("${option.name} ", style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 16, overflow: TextOverflow.ellipsis)),
-                                ),
-                                Flexible(
-                                    child: Text(option.address ?? "", style: TextStyle(color: Theme.of(context).colorScheme.secondary, fontSize: 16, overflow: TextOverflow.ellipsis))
-                                ),
-                              ],
-                            ),
-                          ),
-                        )).toList(),
-                      ),
-                    ),
-                  ),
-                ),
-              );
-            }
+      suggestionsCallback: (pattern) async {
+        return optionsList.where((Option option) {
+          return (option.name + (option.address ?? ""))
+              .toLowerCase()
+              .contains(pattern.toLowerCase());
+        }).toList();
+      },
+      itemBuilder: (context, Option option) {
+        return ListTile(
+          dense: true,
+          title: Row(
+            children: [
+              Image.asset('assets/icons/${option.icon}', width: 21, color: Theme.of(context).colorScheme.secondary),
+              const SizedBox(width: 16),
+              Flexible(
+                child: Text("${option.name} ", style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 16, overflow: TextOverflow.ellipsis)),
+              ),
+              Flexible(
+                  child: Text(option.address ?? "", style: TextStyle(color: Theme.of(context).colorScheme.secondary, fontSize: 16, overflow: TextOverflow.ellipsis))
+              ),
+            ],
           ),
         );
       },
+      onSelected: (Option option) {
+        onOptionSelected(option);
+      },
     );
   }
 }
diff --git a/lib/components/Post/Form.dart b/lib/components/Post/Form.dart
@@ -207,9 +207,7 @@ class _PostFormState extends State<PostForm> {
                         _bar = selectedBar;
                       });
                     },
-                        _isEditing
-                            ? _bar?.name
-                            : null), // set default value to the bar of the initial post if editing
+                        _bar?.name),
                     buildPaddedDropdownInputField(
                         context, "Bier", Beer.getAll(), (selectedBeer) {
                       // block routing
@@ -219,9 +217,7 @@ class _PostFormState extends State<PostForm> {
                         _beer = selectedBeer;
                       });
                     },
-                        _isEditing
-                            ? _beer?.name
-                            : null), // set default value to the beer of the initial post if editing
+                        _beer?.name),
                     CustomRatingField(
                       initialRating: _rating,
                       onRatingSelected: (rating) {

diff --git a/pubspec.lock b/pubspec.lock
@@ -320,6 +320,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_typeahead:
+    dependency: "direct main"
+    description:
+      name: flutter_typeahead
+      sha256: "1f6b248bb4f3ebb4cf1ee0354aa23c77be457fb2d26d6847ecc33a917f65e58e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.0.1"
   flutter_web_plugins:
     dependency: transitive
     description: flutter
@@ -685,6 +693,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.7"
+  pointer_interceptor:
+    dependency: transitive
+    description:
+      name: pointer_interceptor
+      sha256: adf7a637f97c077041d36801b43be08559fd4322d2127b3f20bb7be1b9eebc22
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.9.3+7"
   polylabel:
     dependency: transitive
     description:

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -56,6 +56,7 @@ dependencies:
   flutter_keyboard_visibility: ^5.4.1
   provider: ^6.1.1
   image_picker_android: ^0.8.9+1
+  flutter_typeahead: ^5.0.1
 
 dev_dependencies:
   flutter_test: