add dropdown field 2

Author: haonguyensc

.flutter-plugins

@@ -0,0 +1,4 @@
+# This is a generated file; do not edit or check into version control.
+webview_flutter=/Users/haonguyen/.pub-cache/hosted/pub.dev/webview_flutter-4.2.2/
+webview_flutter_android=/Users/haonguyen/.pub-cache/hosted/pub.dev/webview_flutter_android-3.9.1/
+webview_flutter_wkwebview=/Users/haonguyen/.pub-cache/hosted/pub.dev/webview_flutter_wkwebview-3.7.1/

.flutter-plugins-dependencies

@@ -0,0 +1 @@
+{"info":"This is a generated file; do not edit or check into version control.","plugins":{"ios":[{"name":"webview_flutter_wkwebview","path":"/Users/haonguyen/.pub-cache/hosted/pub.dev/webview_flutter_wkwebview-3.7.1/","native_build":true,"dependencies":[]}],"android":[{"name":"webview_flutter_android","path":"/Users/haonguyen/.pub-cache/hosted/pub.dev/webview_flutter_android-3.9.1/","native_build":true,"dependencies":[]}],"macos":[],"linux":[],"windows":[],"web":[]},"dependencyGraph":[{"name":"webview_flutter","dependencies":["webview_flutter_android","webview_flutter_wkwebview"]},{"name":"webview_flutter_android","dependencies":[]},{"name":"webview_flutter_wkwebview","dependencies":[]}],"date_created":"2023-07-25 19:34:13.822748","version":"3.10.4"}

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.1.16
+
+### Added
+
+* Add Dropdown Field 2
+
 ## 0.1.15
 
 ### Added

lib/src/components/tf_dropdown_field_2.dart

@@ -0,0 +1,155 @@
+part of 'tf_form.dart';
+
+/// [TFDropdownField2] widget allows the user to pick a value from a dropdown list
+class TFDropdownField2<T extends TFDropdonwnItem> extends StatefulWidget {
+  TFDropdownField2({
+    Key? key,
+    this.title,
+    this.hintText,
+    required this.items,
+    this.selectedItem,
+    this.onChanged,
+    this.validationTypes = const <TFValidationType>[],
+    this.relatedController,
+    this.style,
+    this.enabled = true,
+    this.showError = true,
+  }) : super(key: key) {
+    if (validationTypes.contains(TFValidationType.requiredIfHas) && relatedController == null) {
+      throw ArgumentError("requiredIfHas type and relatedController should both be set.");
+    }
+  }
+
+  final String? title;
+  final String? hintText;
+  final List<T> items;
+  final T? selectedItem;
+  final Function(T selectedItem)? onChanged;
+  final List<TFValidationType> validationTypes;
+  final TextEditingController? relatedController;
+  final TFFieldStyle? style;
+  final bool enabled;
+  final bool showError;
+
+  @override
+  State<TFDropdownField2<T>> createState() => _TFDropdownFieldState2<T>();
+}
+
+class _TFDropdownFieldState2<T extends TFDropdonwnItem> extends State<TFDropdownField2<T>> {
+  final LayerLink _dropdownLink = LayerLink();
+  final TextEditingController _titleController = TextEditingController();
+  OverlayEntry? _dropdownOverlay;
+
+  void _showDropdown() {
+    _dropdownOverlay = _buildDropListOverlay();
+    Overlay.of(context).insert(_dropdownOverlay!);
+  }
+
+  void _hideDropdown() {
+    _dropdownOverlay?.remove();
+    _dropdownOverlay = null;
+  }
+
+  void _toggleDropdown() {
+    if (_dropdownOverlay == null) {
+      _showDropdown();
+    } else {
+      _hideDropdown();
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _titleController.text = widget.selectedItem?.displayTitle ?? "";
+  }
+
+  @override
+  void dispose() {
+    _titleController.dispose();
+    _dropdownOverlay?.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CompositedTransformTarget(
+      link: _dropdownLink,
+      child: TFTextField(
+        title: widget.title,
+        hintText: widget.hintText,
+        controller: _titleController,
+        validationTypes: widget.validationTypes,
+        relatedController: widget.relatedController,
+        readOnly: true,
+        style: widget.style,
+        enabled: widget.enabled,
+        showError: widget.showError,
+        suffix: GestureDetector(
+          onTap: _toggleDropdown,
+          child: const Icon(
+            Icons.arrow_drop_down,
+            color: Colors.grey,
+          ),
+        ),
+        onTap: _toggleDropdown,
+        onFocusChanged: (hasFocus) {
+          if (!hasFocus) _hideDropdown();
+        },
+      ),
+    );
+  }
+
+  OverlayEntry _buildDropListOverlay() {
+    final renderBox = context.findRenderObject() as RenderBox;
+    final size = renderBox.size;
+    final offset = renderBox.localToGlobal(Offset.zero);
+    final topOffset = offset.dy + size.height + 5;
+
+    return OverlayEntry(
+      builder: (context) => GestureDetector(
+        onTap: () => _hideDropdown(),
+        behavior: HitTestBehavior.translucent,
+        child: SizedBox(
+          height: MediaQuery.of(context).size.height,
+          width: MediaQuery.of(context).size.width,
+          child: Stack(
+            children: [
+              Positioned(
+                left: offset.dx,
+                top: topOffset,
+                width: size.width,
+                child: CompositedTransformFollower(
+                  link: _dropdownLink,
+                  showWhenUnlinked: false,
+                  offset: Offset(0.0, size.height + 5.0),
+                  child: Material(
+                    elevation: 2,
+                    color: _tffStyle.fieldStyle.backgroundColor,
+                    child: Column(
+                      children: List.generate(widget.items.length, (index) {
+                        final item = widget.items[index];
+                        final isSelected = widget.selectedItem?.id == item.id;
+                        return ListTile(
+                          title: Text(item.displayTitle),
+                          selected: isSelected,
+                          selectedColor: Theme.of(context).colorScheme.onPrimary,
+                          selectedTileColor: Theme.of(context).colorScheme.primary,
+                          trailing: isSelected ? const Icon(Icons.check, size: 18) : null,
+                          onTap: () {
+                            widget.onChanged?.call(item);
+                            _hideDropdown();
+                          },
+                        );
+                      }),
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/src/components/tf_form.dart

@@ -14,6 +14,8 @@ part 'tf_checkbox_group.dart';
 
 part 'tf_dropdown_field.dart';
 
+part 'tf_dropdown_field_2.dart';
+
 part 'tf_date_field.dart';
 
 part 'tf_error_text.dart';

lib/src/models/tf_option_item.dart

@@ -8,3 +8,9 @@ class TFOptionItem<T> {
   final String title;
   final T value;
 }
+
+abstract class TFDropdonwnItem {
+  String get displayTitle;
+
+  String get id;
+}

pubspec.yaml

@@ -1,6 +1,6 @@
 name: tf_form
 description: TechFusion's form builder and validator
-version: 0.1.15
+version: 0.1.16
 homepage: https://github.com/TechFusionHQ/tf_form
 
 environment: