Turning textfield multiline

lib/screens/common_widgets/env_trigger_field.dart

@@ -45,20 +45,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();
@@ -71,9 +80,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)));
     }
   }
 
@@ -118,22 +127,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();
-          },
-          readOnly: widget.readOnly,
-          obscureText: widget.obscureText
-
+        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,102 @@ 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(
+            decoration: BoxDecoration(
+              color: clrScheme.surface,
+            ),
+            child: TextField(
+              controller: controller,
+              focusNode: focusNode,
+              style: textStyle,
+              decoration: decoration,
+              maxLines: null,
+              keyboardType: TextInputType.multiline,
+              autofocus: true,
+              onSubmitted: (_) {
+                focusNode.unfocus();
+                _removeOverlay();
+              },
+            ),
+          ),
+        ),
+      ),
+    );
+
+    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 +156,7 @@ class EditEnvironmentVariablesState
         fixedWidth: 30,
       ),
       DataColumn2(
-        label: Text("Variable value"),
+        label: Text(" jars value"),
       ),
       DataColumn2(
         label: Text(''),
@@ -118,6 +207,7 @@ class EditEnvironmentVariablesState
                   _onFieldChange(selectedId!);
                 },
                 colorScheme: Theme.of(context).colorScheme,
+                onOverlayToggle: _onOverlayToggle,
               ),
             ),
             DataCell(
@@ -146,6 +236,7 @@ class EditEnvironmentVariablesState
                   _onFieldChange(selectedId!);
                 },
                 colorScheme: Theme.of(context).colorScheme,
+                onOverlayToggle: _onOverlayToggle,
               ),
             ),
             DataCell(
@@ -175,57 +266,63 @@ class EditEnvironmentVariablesState
       },
     );
 
-    return Stack(
-      children: [
-        Container(
-          decoration: BoxDecoration(
-            color: Theme.of(context).colorScheme.surface,
-            borderRadius: kBorderRadius12,
-          ),
-          margin: kPh10t10,
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.stretch,
-            children: [
-              Expanded(
-                child: Theme(
-                  data: Theme.of(context)
-                      .copyWith(scrollbarTheme: kDataTableScrollbarTheme),
-                  child: DataTable2(
-                    columnSpacing: 12,
-                    dividerThickness: 0,
-                    horizontalMargin: 0,
-                    headingRowHeight: 0,
-                    dataRowHeight: kDataTableRowHeight,
-                    bottomMargin: kDataTableBottomPadding,
-                    isVerticalScrollBarVisible: true,
-                    columns: columns,
-                    rows: dataRows,
+    return GestureDetector(
+      onTap: () {
+        FocusScope.of(context).requestFocus(FocusNode());
+        _removeOverlay();
+      },
+      child: Stack(
+        children: [
+          Container(
+            decoration: BoxDecoration(
+              color: Theme.of(context).colorScheme.surface,
+              borderRadius: kBorderRadius12,
+            ),
+            margin: kPh10t10,
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                Expanded(
+                  child: Theme(
+                    data: Theme.of(context)
+                        .copyWith(scrollbarTheme: kDataTableScrollbarTheme),
+                    child: DataTable2(
+                      columnSpacing: 12,
+                      dividerThickness: 0,
+                      horizontalMargin: 0,
+                      headingRowHeight: 0,
+                      dataRowHeight: null,
+                      bottomMargin: kDataTableBottomPadding,
+                      isVerticalScrollBarVisible: true,
+                      columns: columns,
+                      rows: dataRows,
+                    ),
                   ),
                 ),
-              ),
-              if (!kIsMobile) kVSpacer40,
-            ],
+                if (!kIsMobile) kVSpacer40,
+              ],
+            ),
           ),
-        ),
-        if (!kIsMobile)
-          Align(
-            alignment: Alignment.bottomCenter,
-            child: Padding(
-              padding: kPb15,
-              child: ElevatedButton.icon(
-                onPressed: () {
-                  variableRows.add(kEnvironmentVariableEmptyModel);
-                  _onFieldChange(selectedId!);
-                },
-                icon: const Icon(Icons.add),
-                label: const Text(
-                  kLabelAddVariable,
-                  style: kTextStyleButton,
+          if (!kIsMobile)
+            Align(
+              alignment: Alignment.bottomCenter,
+              child: Padding(
+                padding: kPb15,
+                child: ElevatedButton.icon(
+                  onPressed: () {
+                    variableRows.add(kEnvironmentVariableEmptyModel);
+                    _onFieldChange(selectedId!);
+                  },
+                  icon: const Icon(Icons.add),
+                  label: const Text(
+                    kLabelAddVariable,
+                    style: kTextStyleButton,
+                  ),
                 ),
               ),
             ),
-          ),
-      ],
+        ],
+      ),
     );
   }
-}
+}

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,
+      ),
     );
   }
-}
+}