feat: mobile support #227

DenserMeerkat · 2024-02-28T19:21:58Z

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 · 2024-02-28T20:29:15Z

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 · 2024-02-28T21:48:50Z

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

animator · 2024-03-13T21:01:10Z

@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 · 2024-03-14T06:41:53Z

@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 · 2024-03-15T11:17:34Z

(with edit/delete options)

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

ashitaprasad · 2024-03-15T17:55:07Z

Yes, all three should be there.

ashitaprasad · 2024-06-03T01:16:06Z

lib/providers/ui_providers.dart


+final mobileDrawerKeyProvider = Provider<GlobalKey<InnerDrawerState>>(


Use StateProvider

ashitaprasad · 2024-06-03T01:17:43Z

lib/screens/home_page/collection_pane.dart

@@ -72,7 +72,6 @@ class CollectionPane extends ConsumerWidget {
          ),
          kVSpacer10,
          Container(
-            height: 30,
            margin: const EdgeInsets.only(right: 8),


Why this height was removed.

Having a fixed height caused this offset due to TextField's internal contentPadding in the mobile device I tested.

The height of the field was very narrow and difficult to focus on tap.
Hence for a fair tap target size I removed the height.
( Also I couldn't find any difference on removing the height in desktop devices too, so felt it was redundant and let the textfield itself take suitable height )

ashitaprasad · 2024-06-03T01:21:36Z

lib/screens/home_page/collection_pane.dart

@@ -143,14 +142,21 @@ class _RequestListState extends ConsumerState<RequestList> {
    final alwaysShowCollectionPaneScrollbar = ref.watch(settingsProvider
        .select((value) => value.alwaysShowCollectionPaneScrollbar));
    final filterQuery = ref.watch(searchQueryProvider).trim();
+    final isMobile =
+        kIsMobile && MediaQuery.sizeOf(context).width < kMinWindowSize.width;


Is it possible to create an extension over context like context.isMobile

context.isMobile = kIsMobile && MediaQuery.sizeOf(context).width < kMinWindowSize.width

as this code will be used in a lot of places

ashitaprasad · 2024-06-03T01:22:18Z

lib/screens/home_page/collection_pane.dart

@@ -166,6 +172,19 @@ class _RequestListState extends ConsumerState<RequestList> {
              },
              itemBuilder: (context, index) {
                var id = requestSequence[index];
+                if (kIsMobile) {
+                  return ReorderableDelayedDragStartListener(


Why used ReorderableDelayedDragStartListener

Having ReorderableDragStartListener in touch devices causes drag event to reorder request which collides with the scroll functionality required if there are a large number of requests in the request list. Hence used the ReorderableDelayedDragStartListener to avoid this collision of gestures.

ashitaprasad · 2024-06-03T01:49:31Z

lib/screens/mobile/left_drawer.dart

Create a widgets folder inside mobile for mobile related widgets. All Stateful & Stateless widgets will go there.

ashitaprasad · 2024-06-03T01:53:26Z

lib/screens/mobile/requests_page/requests_page.dart

What is the purpose of this folder requests_page?

In desktop version there is no such folder.

Initially wanted to segregate widgets into

Request page widgets :

request list (left menu)

reqquest editor

response viewer

Environment page widgets

environment list (left menu)

environment editor

but as you mentioned since we are gonna have a separate folder for environments, yes, it doesn't make sense to have it inside the requests_page folder

ashitaprasad · 2024-06-03T01:54:18Z

lib/screens/mobile/requests_page/response_drawer.dart

Why is ResponseDrawer inside requests_page?

ashitaprasad · 2024-06-03T01:56:37Z

lib/utils/http_utils.dart

@@ -7,14 +7,14 @@ import '../models/models.dart';
 import 'convert_utils.dart' show rowsToMap;
 import '../consts.dart';

-String getRequestTitleFromUrl(String? url) {
+String getRequestTitleFromUrl(String? url, {bool capitalize = false}) {
  if (url == null || url.trim() == "") {


Why this unnecessary change?

Felt the lowercase 'untitled' Appbar title didn't look nice, but as you said, yes, it was an unnecessary change will remove it.

ashitaprasad · 2024-06-03T01:57:58Z

lib/widgets/dropdowns.dart

            child: Text(
              value.name.toUpperCase(),
              style: kCodeStyle.copyWith(
+                fontSize: isMobile ? 13 : null,


Why font size is being hard coded here just for dropdown .. it should properly flow from consts.dart?

ashitaprasad · 2024-06-03T01:59:25Z

lib/widgets/intro_message.dart

@@ -23,6 +23,8 @@ class IntroMessage extends StatelessWidget {
    return FutureBuilder(
      future: introData(),
      builder: (BuildContext context, AsyncSnapshot<void> snapshot) {
+        final isMobile = kIsMobile &&
+            MediaQuery.sizeOf(context).width < kMinWindowSize.width;


again .. needs to be shortened everywhere by defining an extension over context.

wip: mobile support

54508de

DenserMeerkat and others added 5 commits March 1, 2024 20:09

fix: nav bar selectedIcon, color

981328d

Merge branch 'main' into add-feature-mobile-layout

3ef2fef

Merge branch 'foss42:main' into add-feature-mobile-layout

6179820

Merge branch 'main' into add-feature-mobile-layout

3ddef91

fix: padding & overflow

5476d56

animator added under review and removed under review labels Mar 10, 2024

DenserMeerkat and others added 6 commits March 14, 2024 14:08

Merge branch 'foss42:main' into add-feature-mobile-layout

0b54831

fix: unfocus URL field, request drawer close

7da594e

fix: collection pane scroll/drag issue

a331172

Merge branch 'foss42:main' into add-feature-mobile-layout

4751f1b

fix: rename dialog pop issue

5b07796

fix: drag direction update

158a4ca

DenserMeerkat added 2 commits March 15, 2024 20:25

chore: appbar request title

c0e0948

fix: dispose valuenotifiers

8af676d

DenserMeerkat and others added 5 commits March 16, 2024 02:32

fix: TextFieldEditor OnTapOutside

8639553

Merge branch 'main' into add-feature-mobile-layout

fb284d9

Merge branch 'main' into add-feature-mobile-layout

ebdd9b8

Merge branch 'foss42:main' into add-feature-mobile-layout

1b1ad25

Merge branch 'foss42:main' into add-feature-mobile-layout

e1027da

DenserMeerkat marked this pull request as draft March 29, 2024 21:19

DenserMeerkat and others added 2 commits April 11, 2024 19:27

Merge branch 'main' into add-feature-mobile-layout

22630b2

merge: fix merge changes

5e8daee

DenserMeerkat and others added 3 commits May 9, 2024 16:22

Merge branch 'foss42:main' into add-feature-mobile-layout

80c32fc

feat: large mobile device responsiveness

5ef3791

refactor: MediaQuery as InheritedModel

5a81509

DenserMeerkat marked this pull request as ready for review June 1, 2024 14:28

Merge branch 'foss42:main' into add-feature-mobile-layout

4373464

DenserMeerkat changed the title ~~feat: mobile support (WIP)~~ feat: mobile support Jun 2, 2024

ashitaprasad reviewed Jun 3, 2024

View reviewed changes

lib/screens/mobile/requests_page/response_drawer.dart Outdated

Copy link

Member

ashitaprasad Jun 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is ResponseDrawer inside requests_page?

ashitaprasad reviewed Jun 3, 2024

View reviewed changes

DenserMeerkat added 2 commits June 3, 2024 23:52

fix: review changes

e1e93e9

fix: missed extension replacement

38f6eca

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: mobile support #227

feat: mobile support #227

DenserMeerkat commented Feb 28, 2024 •

edited

DenserMeerkat commented Feb 28, 2024 •

edited

animator commented Feb 28, 2024

animator commented Mar 13, 2024 •

edited

DenserMeerkat commented Mar 14, 2024 •

edited

DenserMeerkat commented Mar 15, 2024

ashitaprasad commented Mar 15, 2024

ashitaprasad Jun 3, 2024

ashitaprasad Jun 3, 2024 •

edited

DenserMeerkat Jun 3, 2024

ashitaprasad Jun 3, 2024

ashitaprasad Jun 3, 2024

DenserMeerkat Jun 3, 2024

ashitaprasad Jun 3, 2024

ashitaprasad Jun 3, 2024

ashitaprasad Jun 3, 2024

DenserMeerkat Jun 3, 2024 •

edited

ashitaprasad Jun 3, 2024

ashitaprasad Jun 3, 2024

DenserMeerkat Jun 3, 2024 •

edited

ashitaprasad Jun 3, 2024

ashitaprasad Jun 3, 2024


		final mobileDrawerKeyProvider = Provider<GlobalKey<InnerDrawerState>>(

feat: mobile support #227

Are you sure you want to change the base?

feat: mobile support #227

Conversation

DenserMeerkat commented Feb 28, 2024 • edited

PR Description

Related Issues

Checklist

Added/updated tests?

DenserMeerkat commented Feb 28, 2024 • edited

animator commented Feb 28, 2024

animator commented Mar 13, 2024 • edited

DenserMeerkat commented Mar 14, 2024 • edited

Response Icon

View Code button

DenserMeerkat commented Mar 15, 2024

ashitaprasad commented Mar 15, 2024

Choose a reason for hiding this comment

ashitaprasad Jun 3, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DenserMeerkat Jun 3, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DenserMeerkat Jun 3, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DenserMeerkat commented Feb 28, 2024 •

edited

DenserMeerkat commented Feb 28, 2024 •

edited

animator commented Mar 13, 2024 •

edited

DenserMeerkat commented Mar 14, 2024 •

edited

ashitaprasad Jun 3, 2024 •

edited

DenserMeerkat Jun 3, 2024 •

edited

DenserMeerkat Jun 3, 2024 •

edited