Turning textfield multiline #828

TeeWrath · 2025-04-23T10:38:21Z

PR Description

This is in reference to the issue #826 recently opened. I have started applying this the textfields present throughout the app. First I started with the text field in URL card. After my changes, it looks like this:

I will move forward with other textfield, while I would love to get reviews on this. I am contributing to API Dash for the first time, hence I'm planning to move ahead with reviews.

Next I will focus on:

Url params text fields (size changes if required, since multi-line in these fields are implemented from the same widget i,e, EnvironmentTriggerField which I already modified to multi-line for the url field.)
Headers text fields (size changes if required)
Request name text field in the collection pane.
Variable name text field.

Checklist

I have gone through the contributing guide
I have updated my branch and synced it with project main branch before making this PR
I am using the latest Flutter stable branch (run flutter upgrade and verify)
I have run the tests (flutter test) and all tests are passing

OS on which you have developed and tested the feature?

Windows
macOS
Linux

…one as per instructions

BalaSubramaniam12007 · 2025-04-23T18:55:16Z

@TeeWrath Hey, really appreciate your first contribution to API Dash — welcome aboard! .I noticed you added maxLines: null to ExtendedTextField, which helps display long values like URLs during editing or selection—that’s a good improvement.
But for better UX, we also need to ensure that the field size resets to its original height after editing is done.
Once expanded, the field stays that way, even after focus is lost, which doesn’t look clean.

Just try typing a long text in the Google Search bar as @animator provides the example image — it expands while editing, then resets to its original size on focus loss.
That’s the smooth UX we’re aiming for in our TextFields

TeeWrath · 2025-04-23T19:47:33Z

Thank you so much for such a warm welcome and your review @BalaSubramaniam12007 and @animator . I totally understand the importance of good UX and as per your suggestion, I have used the FocusNode widget's properties by listening to it's state (whether it is being focused on or not) and determined the maxLines property value as per that.

I have also set the minLines to 1.

To further smoothen the UX I have wrapped the ExtendedTextField widget with AnimatedSize for ease of in and out.

below is a video demonstration of how it looks now:

multiline.mp4

Please let me know if any changes are required further.

WannaCry016 · 2025-04-24T07:42:59Z

@TeeWrath yeah it looks good also when the send button is clicked then also it should go to normal state then it would be perfect

TeeWrath · 2025-04-24T07:54:15Z

@TeeWrath yeah it looks good also when the send button is clicked then also it should go to normal state then it would be perfect

@WannaCry016 @BalaSubramaniam12007
That functionality is already implemented. Hitting the send button sends it back to 1 liner state smoothly with AnimatedSize

Should I move forward with a similar pattern for other TextFields too ?

animator · 2025-04-24T16:33:45Z

Test this feature in mobile.

TeeWrath · 2025-04-25T16:04:39Z

@animator @BalaSubramaniam12007 Hi, as per the directions given to me, I have implemented multi-line textfields for :

url card textfield
url params textfield
headers textfield
variable names and values textfield

The fields revert back to 1 liners when not focused upon and are multi-line during editing, as per the desired UX.

@animator on testing on mobile I found that this works on mobile too. I am attaching a screen recording here for the reference.

multi-line.mobile.mp4

Next I will implement similar multi-line functionality in the Request name text field in the collection pane.
Please review this and let me know if anything else is necessary. Thank you

BalaSubramaniam12007 · 2025-04-25T16:18:06Z

@animator @BalaSubramaniam12007 Hi, as per the directions given to me, I have implemented multi-line textfields for :

url card textfield

url params textfield

headers textfield

variable names and values textfield

The fields revert back to 1 liners when not focused upon and are multi-line during editing, as per the desired UX.

Next I will implement similar multi-line functionality in the Request name text field in the collection pane.
Please review this and let me know if anything else is necessary. Thank you

That’s great to hear! The output looks good to me as well. Just have a quick discussion with the mentors @animator sir @ashitaprasad mam and confirm the expected outcome and align on any final tweaks.

TeeWrath · 2025-04-25T16:55:35Z

With this commit, I have also turned the side pane search field to multi-line while following the pattern recommended. A preview :

Current checklist:

I request @animator sir and @ashitaprasad mam to review this and give me further instructions if any for improvement. Thank you.

animator · 2025-04-26T15:20:12Z

@animator @BalaSubramaniam12007 Hi, as per the directions given to me, I have implemented multi-line textfields for :

url card textfield

url params textfield

headers textfield

variable names and values textfield

The fields revert back to 1 liners when not focused upon and are multi-line during editing, as per the desired UX.

@animator on testing on mobile I found that this works on mobile too. I am attaching a screen recording here for the reference.

multi-line.mobile.mp4

Next I will implement similar multi-line functionality in the Request name text field in the collection pane. Please review this and let me know if anything else is necessary. Thank you

In the demo video, for the URL it is fine, but the variable implementation is not useful .. what is the point of having it multiline if all the text content is not visible and you have to scroll vertically inside the text field.

BalaSubramaniam12007 · 2025-04-26T15:38:39Z

In the demo video, for the URL it is fine, but the variable implementation is not useful .. what is the point of having it multiline if all the text content is not visible and you have to scroll vertically inside the text field.

I was thinking the same, @TeeWrath . For your extra reference, please see how Postman handles this .

TeeWrath · 2025-04-27T14:09:23Z

@BalaSubramaniam12007 @animator Right sir, I will adjust this as per your suggestions. I will try to make it look similar to how it is on Postman. Have an exam tomorrow, will fix this after coming back. Thank you.

…ne, need cursor and interaction yet

…multi-line

TeeWrath · 2025-05-02T22:59:24Z

@animator hello sir, I have implemented an overlay kind of like it is in postman for the variable textfields. Would be great if you could give some reviews on it. Preview is below.

var.mp4

animator · 2025-05-03T04:32:11Z

@TeeWrath Test it on mobile and upload video.

TeeWrath · 2025-05-03T17:17:59Z

@animator I noticed a small glitch in the mobile version. Working on it. Currently I am occupied with some personal engagements, will promptly tweak this once I am done with it. Thanks for your patience.

animator · 2025-05-17T07:29:45Z

@TeeWrath Any updates?

TeeWrath · 2025-05-17T07:40:13Z

@animator sir, I'm traveling right now, have made a few changes and will push them as soon as I reach home. Most probably by the 19th if that is not a problem?

Thank you sir.

animator · 2025-05-17T07:57:57Z

No problem @TeeWrath 👍

TeeWrath · 2025-05-17T08:40:58Z

Nevermind @animator sir! I have pushed the changes. Below is the video. It works both on mobile and desktop. I request you to kindly review the changes and let me know if any changes are required further. Thank you

mobfield.mp4

TeeWrath · 2025-06-07T14:18:17Z

Hi @ashitaprasad mam and @animator sir,

Just checking in on the status of this PR. It's been under review for three weeks. Any updates or feedback? Thanks!

animator · 2025-07-13T21:34:25Z

This PR is in the review queue. We are still on it.
@DenserMeerkat can you please take a look and provide your feedback as well.

TeeWrath · 2025-08-20T16:54:48Z

@animator @DenserMeerkat I have resolved the merge conflict. Kindly provide your valuable feedback.

Copilot

Pull Request Overview

This PR adds multiline support to text fields throughout the API Dash app by converting StatelessWidget text field components to StatefulWidget. The implementation includes animated resizing when text fields gain focus and display multi-line content, along with overlay functionality for better multiline editing experience.

Converts text field widgets from StatelessWidget to StatefulWidget to manage focus and multiline states
Adds animated size transitions and overlay support for enhanced multiline editing
Updates environment variable editing interface to support the new multiline behavior

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
packages/apidash_design_system/lib/widgets/textfield_raw.dart	Converts to StatefulWidget with focus tracking and animated multiline support
packages/apidash_design_system/lib/widgets/textfield_outlined.dart	Major refactor to StatefulWidget with complex overlay system and multiline detection
lib/widgets/field_cell.dart	Adds overlay callback support and wraps field in SizedBox
lib/screens/envvar/editor_pane/variables_pane.dart	Implements overlay management system and updates data table configuration
lib/screens/common_widgets/env_trigger_field.dart	Adds focus tracking and animated multiline behavior with null safety fixes

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-27T10:50:26Z

packages/apidash_design_system/lib/widgets/textfield_raw.dart

+  bool isFocused = false;
+  @override
+  void initState() {
+    isFocused = false;


The isFocused field is already initialized to false at declaration (line 27), making this assignment in initState() redundant.

Suggested change

isFocused = false;

Copilot · 2025-09-27T10:50:27Z

packages/apidash_design_system/lib/widgets/textfield_raw.dart

-        hintStyle: hintTextStyle,
-        contentPadding: kPv8,
+    return AnimatedSize(
+      duration: Duration(milliseconds: 200),


Use const constructor for Duration to improve performance: const Duration(milliseconds: 200).

Suggested change

duration: Duration(milliseconds: 200),

duration: const Duration(milliseconds: 200),

Copilot · 2025-09-27T10:50:27Z

packages/apidash_design_system/lib/widgets/textfield_outlined.dart

+        TextStyle(),
+        Theme.of(context).colorScheme,
+        _focusNode,
+        _controller,
+        InputDecoration(),


Empty TextStyle() and InputDecoration() objects are passed to onOverlayToggle callback. Consider using meaningful values or make these parameters optional to avoid confusion.

Copilot · 2025-09-27T10:50:27Z

packages/apidash_design_system/lib/widgets/textfield_outlined.dart

+    final contentPadding = widget.contentPadding ?? const EdgeInsets.symmetric(horizontal: 8, vertical: 8);
+
+    return RawKeyboardListener(
+      focusNode: FocusNode(),


A new FocusNode is created on every build without proper disposal. This creates a resource leak. Consider reusing the existing _focusNode or create and manage the FocusNode properly.

Copilot · 2025-09-27T10:50:27Z

packages/apidash_design_system/lib/widgets/textfield_outlined.dart

+        },
+        onTap: () {
+          if (!_isFocused) {
+            FocusScope.of(context).requestFocus(FocusNode());


Creating and requesting focus on an anonymous FocusNode before requesting focus on _focusNode is unnecessary and potentially problematic. Remove line 247 and only use _focusNode.requestFocus().

Suggested change

FocusScope.of(context).requestFocus(FocusNode());

Copilot · 2025-09-27T10:50:28Z

lib/screens/envvar/editor_pane/variables_pane.dart

      ),
      DataColumn2(
-        label: Text("Variable value"),
+        label: Text(" jars value"),


The label text ' jars value' appears to be a typo and should be 'Variable value' to match the original functionality.

Suggested change

label: Text(" jars value"),

label: Text("Variable value"),

Copilot · 2025-09-27T10:50:28Z

lib/screens/envvar/editor_pane/variables_pane.dart

-                    rows: dataRows,
+    return GestureDetector(
+      onTap: () {
+        FocusScope.of(context).requestFocus(FocusNode());


Creating a new FocusNode without disposal causes a resource leak. Use FocusScope.of(context).unfocus() instead to clear focus.

Suggested change

FocusScope.of(context).requestFocus(FocusNode());

FocusScope.of(context).unfocus();

Copilot · 2025-09-27T10:50:28Z

lib/screens/common_widgets/env_trigger_field.dart

+            onTapOutside: (event) {
+              _focusNode.unfocus();
+            },
+          ),


Missing readOnly and obscureText properties that were present in the original implementation. These properties should be passed to ExtendedTextField to maintain backward compatibility.

feat: url card envfield textfield turned multiline, further will be d…

cc4aa0c

…one as per instructions

TeeWrath mentioned this pull request Apr 23, 2025

Textfields should become multiline when tapped on or when the user is editing #826

Open

TeeWrath added 2 commits April 24, 2025 00:50

fix: field becomes single line when not focused

ad7b3ca

feat: smoothen variation in textfield size

adb9ea8

feat: environment edit textfields turned multiline

667651c

feat: collection pane/side pane search field turned multi-line

2763823

animator linked an issue Apr 26, 2025 that may be closed by this pull request

Textfields should become multiline when tapped on or when the user is editing #826

Open

Merge branch 'foss42:main' into main

b093d4b

TeeWrath added 6 commits April 30, 2025 15:32

feat: multi-line box above the field appears (still some issues persist)

e0fce1e

merge issues

477ec39

update: textformfield overlay not hidden by other fields and works fi…

7d476f6

…ne, need cursor and interaction yet

update: overlay is textfield now but on re-focusing it does not show …

14f6924

…multi-line

update: on focusing again, the overlay displays itself correctly.

626cb4c

fix: border of overlay

f987c95

TeeWrath added 2 commits May 5, 2025 22:49

Merge branch 'foss42:main' into main

38764bd

Merge branch 'foss42:main' into main

aeb1c86

fix: fixed multi-focus issues in the text field

dff4789

ashitaprasad added the under review label May 17, 2025

Merge branch 'foss42:main' into main

b3e125d

Merge branch 'main' into main

09e8781

animator requested a review from Copilot September 27, 2025 10:48

Copilot AI reviewed Sep 27, 2025

View reviewed changes

	duration: Duration(milliseconds: 200),
	duration: const Duration(milliseconds: 200),

	FocusScope.of(context).requestFocus(FocusNode());
	FocusScope.of(context).unfocus();

Turning textfield multiline #828

Are you sure you want to change the base?

Turning textfield multiline #828

Uh oh!

Conversation

TeeWrath commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Description

Checklist

OS on which you have developed and tested the feature?

Uh oh!

BalaSubramaniam12007 commented Apr 23, 2025

Uh oh!

TeeWrath commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

WannaCry016 commented Apr 24, 2025

Uh oh!

TeeWrath commented Apr 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

animator commented Apr 24, 2025

Uh oh!

TeeWrath commented Apr 25, 2025

Uh oh!

BalaSubramaniam12007 commented Apr 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

TeeWrath commented Apr 25, 2025

Uh oh!

animator commented Apr 26, 2025

Uh oh!

BalaSubramaniam12007 commented Apr 26, 2025

Uh oh!

TeeWrath commented Apr 27, 2025

Uh oh!

TeeWrath commented May 2, 2025

Uh oh!

animator commented May 3, 2025

Uh oh!

TeeWrath commented May 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

animator commented May 17, 2025

Uh oh!

TeeWrath commented May 17, 2025

Uh oh!

animator commented May 17, 2025

Uh oh!

TeeWrath commented May 17, 2025

Uh oh!

TeeWrath commented Jun 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

animator commented Jul 13, 2025

Uh oh!

TeeWrath commented Aug 20, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 27, 2025

Choose a reason for hiding this comment

TeeWrath commented Apr 23, 2025 •

edited

Loading

TeeWrath commented Apr 23, 2025 •

edited

Loading

TeeWrath commented Apr 24, 2025 •

edited

Loading

BalaSubramaniam12007 commented Apr 25, 2025 •

edited

Loading

TeeWrath commented May 3, 2025 •

edited

Loading

TeeWrath commented Jun 7, 2025 •

edited

Loading