Skip to content

Turning textfield multiline #828

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

Turning textfield multiline #828

wants to merge 12 commits into from

Conversation

TeeWrath
Copy link

@TeeWrath TeeWrath commented Apr 23, 2025

Hi @animator

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:

image

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

@BalaSubramaniam12007
Copy link
Contributor

@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.

image

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
Copy link
Author

TeeWrath commented Apr 23, 2025

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
Copy link
Contributor

@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
Copy link
Author

TeeWrath commented Apr 24, 2025

@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
Copy link
Member

Test this feature in mobile.

@TeeWrath
Copy link
Author

@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
Copy link
Contributor

BalaSubramaniam12007 commented Apr 25, 2025

@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
Copy link
Author

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

Current checklist:

  • url card textfield
  • url params textfield
  • headers textfield
  • variable names and values textfield
  • side pane search text field

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

Sorry, something went wrong.

@animator
Copy link
Member

@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
Copy link
Contributor

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 .

image

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
@TeeWrath
Copy link
Author

@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.

@TeeWrath
Copy link
Author

TeeWrath commented May 2, 2025

@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
Copy link
Member

animator commented May 3, 2025

@TeeWrath Test it on mobile and upload video.

@TeeWrath
Copy link
Author

TeeWrath commented May 3, 2025

@animator I noticed a small glitch in the mobile version. Working on it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Textfields should become multiline when tapped on or when the user is editing
4 participants