Turning textfield multiline

lib/screens/common_widgets/env_trigger_field.dart

@@ -41,20 +41,29 @@ class EnvironmentTriggerField extends StatefulWidget {
 class EnvironmentTriggerFieldState extends State<EnvironmentTriggerField> {
   late TextEditingController controller;
   late FocusNode _focusNode;
+  bool _isFocused = false;
 
   @override
   void initState() {
     super.initState();
     controller = widget.controller ??
         TextEditingController.fromValue(TextEditingValue(
-            text: widget.initialValue!,
-            selection:
-                TextSelection.collapsed(offset: widget.initialValue!.length)));
+            text: widget.initialValue ?? '',
+            selection: TextSelection.collapsed(
+                offset: widget.initialValue?.length ?? 0)));
     _focusNode = widget.focusNode ?? FocusNode();
+    _focusNode.addListener(_handleFocusChange);
+  }
+
+  void _handleFocusChange() {
+    setState(() {
+      _isFocused = _focusNode.hasFocus;
+    });
   }
 
   @override
   void dispose() {
+    _focusNode.removeListener(_handleFocusChange);
     controller.dispose();
     _focusNode.dispose();
     super.dispose();
@@ -67,9 +76,9 @@ class EnvironmentTriggerFieldState extends State<EnvironmentTriggerField> {
         (oldWidget.initialValue != widget.initialValue)) {
       controller = widget.controller ??
           TextEditingController.fromValue(TextEditingValue(
-              text: widget.initialValue!,
+              text: widget.initialValue ?? '',
               selection: TextSelection.collapsed(
-                  offset: widget.initialValue!.length)));
+                  offset: widget.initialValue?.length ?? 0)));
     }
   }
 
@@ -114,19 +123,25 @@ class EnvironmentTriggerFieldState extends State<EnvironmentTriggerField> {
             }),
       ],
       fieldViewBuilder: (context, textEditingController, focusnode) {
-        return ExtendedTextField(
-          controller: textEditingController,
-          focusNode: focusnode,
-          decoration: widget.decoration,
-          style: widget.style,
-          onChanged: widget.onChanged,
-          onSubmitted: widget.onFieldSubmitted,
-          specialTextSpanBuilder: EnvRegExpSpanBuilder(),
-          onTapOutside: (event) {
-            _focusNode.unfocus();
-          },
+        return AnimatedSize(
+          duration: const Duration(milliseconds: 200),
+          curve: Curves.easeInOut,
+          child: ExtendedTextField(
+            controller: textEditingController,
+            focusNode: focusnode,
+            maxLines: _isFocused ? null : 1,
+            minLines: 1,
+            decoration: widget.decoration,
+            style: widget.style,
+            onChanged: widget.onChanged,
+            onSubmitted: widget.onFieldSubmitted,
+            specialTextSpanBuilder: EnvRegExpSpanBuilder(),
+            onTapOutside: (event) {
+              _focusNode.unfocus();
+            },
+          ),
         );
       },
     );
   }
-}
+}

lib/screens/envvar/editor_pane/variables_pane.dart

@@ -23,13 +23,101 @@ class EditEnvironmentVariablesState
   final random = Random.secure();
   late List<EnvironmentVariableModel> variableRows;
   bool isAddingRow = false;
+  OverlayEntry? _overlayEntry;
+  FocusNode? _currentFocusNode;
 
   @override
   void initState() {
     super.initState();
     seed = random.nextInt(kRandMax);
   }
 
+  @override
+  void dispose() {
+    _removeOverlay();
+    super.dispose();
+  }
+
+  void _removeOverlay() {
+    _overlayEntry?.remove();
+    _overlayEntry = null;
+    _currentFocusNode?.removeListener(_handleOverlayFocusChange);
+    _currentFocusNode = null;
+  }
+
+  void _handleOverlayFocusChange() {
+    if (_currentFocusNode != null && !_currentFocusNode!.hasFocus) {
+      _removeOverlay();
+    }
+  }
+
+  void _showOverlay(
+    GlobalKey key,
+    String text,
+    TextStyle textStyle,
+    ColorScheme clrScheme,
+    FocusNode focusNode,
+    TextEditingController controller,
+    InputDecoration decoration,
+  ) {
+    _removeOverlay();
+
+    final RenderBox renderBox = key.currentContext!.findRenderObject() as RenderBox;
+    final position = renderBox.localToGlobal(Offset.zero);
+    final size = renderBox.size;
+
+    _currentFocusNode = focusNode;
+    _currentFocusNode?.addListener(_handleOverlayFocusChange);
+
+    _overlayEntry = OverlayEntry(
+      builder: (context) => Positioned(
+        left: position.dx,
+        top: position.dy,
+        width: size.width,
+        child: Material(
+          elevation: 8,
+          borderRadius: BorderRadius.circular(8),
+          child: Container(
+            // padding: const EdgeInsets.all(8),
+            decoration: BoxDecoration(
+              color: clrScheme.surface,
+              // borderRadius: BorderRadius.circular(8),
+              // border: Border.all(color: kColorWhite.withOpacity(0.5)),
+            ),
+            child: TextField(
+              controller: controller,
+              focusNode: focusNode,
+              style: textStyle,
+              decoration: decoration,
+              maxLines: null,
+              keyboardType: TextInputType.multiline,
+              autofocus: true,
+            ),
+          ),
+        ),
+      ),
+    );
+
+    Overlay.of(context).insert(_overlayEntry!);
+  }
+
+  void _onOverlayToggle(
+    bool show,
+    GlobalKey key,
+    String text,
+    TextStyle textStyle,
+    ColorScheme clrScheme,
+    FocusNode focusNode,
+    TextEditingController controller,
+    InputDecoration decoration,
+  ) {
+    if (show) {
+      _showOverlay(key, text, textStyle, clrScheme, focusNode, controller, decoration);
+    } else {
+      _removeOverlay();
+    }
+  }
+
   void _onFieldChange(String selectedId) {
     final environment = ref.read(selectedEnvironmentModelProvider);
     final secrets = getEnvironmentSecrets(environment);
@@ -67,7 +155,7 @@ class EditEnvironmentVariablesState
         fixedWidth: 30,
       ),
       DataColumn2(
-        label: Text("Variable value"),
+        label: Text(" jars value"),
       ),
       DataColumn2(
         label: Text(''),
@@ -118,6 +206,7 @@ class EditEnvironmentVariablesState
                   _onFieldChange(selectedId!);
                 },
                 colorScheme: Theme.of(context).colorScheme,
+                onOverlayToggle: _onOverlayToggle,
               ),
             ),
             DataCell(
@@ -146,6 +235,7 @@ class EditEnvironmentVariablesState
                   _onFieldChange(selectedId!);
                 },
                 colorScheme: Theme.of(context).colorScheme,
+                onOverlayToggle: _onOverlayToggle,
               ),
             ),
             DataCell(
@@ -195,7 +285,7 @@ class EditEnvironmentVariablesState
                     dividerThickness: 0,
                     horizontalMargin: 0,
                     headingRowHeight: 0,
-                    dataRowHeight: kDataTableRowHeight,
+                    dataRowHeight: null,
                     bottomMargin: kDataTableBottomPadding,
                     isVerticalScrollBarVisible: true,
                     columns: columns,
@@ -227,4 +317,4 @@ class EditEnvironmentVariablesState
       ],
     );
   }
-}
+}

lib/widgets/field_cell.dart

@@ -9,23 +9,39 @@ class CellField extends StatelessWidget {
     this.hintText,
     this.onChanged,
     this.colorScheme,
+    this.onOverlayToggle,
   });
 
   final String keyId;
   final String? initialValue;
   final String? hintText;
   final void Function(String)? onChanged;
   final ColorScheme? colorScheme;
+  final void Function(
+    bool,
+    GlobalKey<State<StatefulWidget>>,
+    String,
+    TextStyle,
+    ColorScheme,
+    FocusNode,
+    TextEditingController,
+    InputDecoration,
+  )? onOverlayToggle;
 
   @override
   Widget build(BuildContext context) {
-    return ADOutlinedTextField(
-      keyId: keyId,
-      initialValue: initialValue,
-      hintText: hintText,
-      hintTextFontSize: Theme.of(context).textTheme.bodySmall?.fontSize,
-      onChanged: onChanged,
-      colorScheme: colorScheme,
+    return SizedBox(
+      width: double.infinity,
+      child: ADOutlinedTextField(
+        keyId: keyId,
+        initialValue: initialValue,
+        hintText: hintText,
+        hintTextFontSize: Theme.of(context).textTheme.bodySmall?.fontSize,
+        onChanged: onChanged,
+        onOverlayToggle: onOverlayToggle,
+        colorScheme: colorScheme,
+        isDense: true,
+      ),
     );
   }
-}
+}