apidash
apidash copied to clipboard
foss42
Turning textfield multiline
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:
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,
EnvironmentTriggerFieldwhich 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
- [X] I have gone through the contributing guide
- [X] I have updated my branch and synced it with project
mainbranch before making this PR - [X] I am using the latest Flutter stable branch (run
flutter upgradeand verify) - [X] I have run the tests (
flutter test) and all tests are passing
OS on which you have developed and tested the feature?
- [ ] Windows
- [ ] macOS
- [X] Linux
@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
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:
https://github.com/user-attachments/assets/1d2a7728-e18e-4607-a541-5a6cde2b4a85
Please let me know if any changes are required further.
@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 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 @BalaSubramaniam12007 Hi, as per the directions given to me, I have implemented multi-line textfields for :
- [X] url card textfield
- [X] url params textfield
- [X] headers textfield
- [X] 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.
https://github.com/user-attachments/assets/3fe4c475-12f4-4ea4-ab1b-5cafea8f600c
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
@animator @BalaSubramaniam12007 Hi, as per the directions given to me, I have implemented multi-line textfields for :
- [X] url card textfield
- [X] url params textfield
- [X] headers textfield
- [X] 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.
With this commit, I have also turned the side pane search field to multi-line while following the pattern recommended. A preview :
Current checklist:
- [X] url card textfield
- [X] url params textfield
- [X] headers textfield
- [X] variable names and values textfield
- [X] 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.
@animator @BalaSubramaniam12007 Hi, as per the directions given to me, I have implemented multi-line textfields for :
- [x] url card textfield
- [x] url params textfield
- [x] headers textfield
- [x] 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.
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 .
@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.
@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.
https://github.com/user-attachments/assets/b3da6041-58b0-4eeb-9ec9-41c699a89186
@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 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.
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
https://github.com/user-attachments/assets/c2fa51cb-7861-4802-aa50-df4d816e8104
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!
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.
@animator @DenserMeerkat I have resolved the merge conflict. Kindly provide your valuable feedback.
@animator Thank you for the review sir, I will work on these suggestions shortly.