feat: mobile support (WIP)

[DenserMeerkat]

PR Description

Implementing the Figma Link design with maximum (almost all) available components, to discuss the design decisions.

demo.mp4

Related Issues

• Related Issue Mobile Android/ iOS Support #33
• Closes Mobile Android/ iOS Support #33

Checklist

• I have gone through the contributing guide
• I have run the tests (flutter test) and all tests are passing

Added/updated tests?

• Yes
• No, and this is why: the features are still in implementation phase.
• I need help with writing tests

[DenserMeerkat]

Currently, I have tried to make the most of existing widgets by adding kIsMobile conditions. Are we supposed to go full on this much or can we create some second level layout widgets(widgets that composite low level widgets) specific to mobile?
Expample: RequestEditor()

[animator]

@DenserMeerkat Thanks for the PR. We will review it and get back.

[animator]

@DenserMeerkat You are going in the right direction. I recommend you to continue thinking about the end user and improve the UI/UX to make his life easier and the app more intuitive to use.

Some feedback points:

• Click on rename button. Enter nothing and press OK. You get an error screen.
  
  

• Type something in the body text field. click outside the textfield. You will not be able to unfocus and hide the keyboard to access the send button.

• Add a lot of header rows now scroll. A strange error happens. Investigate.

227.header.rangeerror.mov

• Click on URL field. Click outside. keyboard still visible (unable to unfocus)
• Appbar: Chat symbol for response is not intuitive. Appbar title should be the name of the request (with edit/delete options) rather than just a generic name Requests.
• Rethink the buttons at the bottom of the request page from UX perspective. The send button is smaller than View Code button

• In the collection pane (drawer) clicking on a request does not transition to the request page until the user explicitly swipes left.

[DenserMeerkat]

@animator Thanks for taking the time to review my implementation! I appreciate you pointing out the scrolling and focus problems in the widgets. I too noticed these and I'm already working on solutions to ensure these widgets work flawlessly with touch interactions and deliver the intended functionality.

---

Response Icon

I spent some time trying to find an icon which represents API Response but couldn't find a particular one so settled with the Comment icon. Will try finding alternatives.

View Code button

Initially just had the "< >" icon in button for a clean layout and clear button hierarchy, but added "View Code" label for user's clarity of the button's function. Happy to revert based on your feedback.

---

Will get back to you if I have any updates/doubts on fixes.

[DenserMeerkat]

(with edit/delete options)

@animator
If I understood it right, users should be able to perform all below actions from Appbar?

[ashitaprasad]

Yes, all three should be there.