refactor: minor UI enhancements

[rahul31124]

Fixes #2711

Changes

• Fixed minor bugs in the RoboticArmScreen.
• Added PSLab documentation link to the navigation drawer.
• Reduced the horizontal spacing of the FAQ link text to prevent RenderFlex overflow on smaller devices.

Overflow

Checklist:

• No hard coding: I have used resources from strings.xml, dimens.xml and colors.xml without hard coding any value.
• No end of file edits: No modifications done at end of resource files strings.xml, dimens.xml or colors.xml.
• Code reformatting: I have reformatted code and fixed indentation in every file included in this pull request.
• No extra space: My code does not contain any extra lines or extra spaces than the ones that are necessary.

Summary by Sourcery

Replace the external sleek_circular_slider with a custom ServoSlider widget and apply various UI refinements across the app

New Features:

• Introduce ServoSlider widget for a fully customizable circular control
• Add PSLab documentation link to the navigation drawer with URL launching and error handling

Bug Fixes:

• Resolve RenderFlex overflow issue on smaller devices for the FAQ link text

Enhancements:

• Refactor ServoCard to StatefulWidget, integrate ServoSlider and localization for degree display and tap-to-edit prompt
• Adjust slider sizing logic, update FAQ link spacing, and correct RoboticArmScreen title localization key
• Add new localization strings for documentation link, error message, and tap-to-edit
• Reorder timeline degree initialization in RoboticArmStateProvider

Build:

• Remove sleek_circular_slider dependency from pubspec.yaml

[sourcery-ai]

Reviewer's Guide

Refactored the circular slider by introducing a custom ServoSlider, extended localization for new UI strings, added a documentation link with error handling in the navigation drawer, and applied minor UI spacing and bug fixes.

Class diagram for ServoSlider refactor and related UI changes

classDiagram
    class ServoCard {
        - double value
        - Function(double) onChanged
        - VoidCallback onTap
        - String label
        - int servoId
        - double cardHeight
    }
    ServoCard <|-- _ServoCardState
    class ServoSlider {
        +double progress
        +double maxProgress
        +double startAngle
        +double sweepAngle
        +double trackWidth
        +double thumbRadius
        +double size
        +bool clockwise
        +ValueChanged<double> onChanged
        +Color trackColor
        +Color progressColor
        +Color thumbColor
    }
    ServoSlider <|-- _ServoSliderState
    class _ServoSliderPainter {
        +double angle
        +double startAngle
        +double sweepAngle
        +double trackWidth
        +double thumbRadius
        +bool clockwise
        +Color trackColor
        +Color progressColor
        +Color thumbColor
    }
    ServoSlider o-- _ServoSliderPainter : uses
    ServoCard o-- ServoSlider : uses
    class AppLocalizations {
        +String documentationLink
        +String documentationError
        +String tapToEdit
    }

Loading

File-Level Changes

Change	Details	Files
Replaced third-party circular slider with custom ServoSlider widget	Removed sleek_circular_slider dependency and imports Converted ServoCard to StatefulWidget with internal currentValue state Replaced SleekCircularSlider usage with ServoSlider component Adjusted slider sizing logic based on maxAngle	lib/view/widgets/servo_card.dart lib/view/widgets/servo_slider.dart pubspec.yaml
Extended localization support and updated UI texts	Added documentationLink, documentationError, and tapToEdit keys in AppLocalizations Provided English translations in app_localizations_en.dart Retrieved AppLocalizations via service locator in ServoCard Updated RoboticArmScreen title to use corrected localization key	lib/l10n/app_localizations.dart lib/l10n/app_localizations_en.dart lib/view/widgets/servo_card.dart lib/view/robotic_arm_screen.dart
Added PSLab documentation link in navigation drawer with error handling	Inserted launchUrl call for documentationLink Displayed localized Snackbar on failure to open link	lib/view/widgets/navigation_drawer.dart
Applied minor UI adjustments and bug fixes	Reduced horizontal spacing in FAQ link to prevent overflow Reordered _initTimelineDegrees initialization in RoboticArmStateProvider Fixed RoboticArmScreen title key and minor layout tweaks	lib/view/faq_screen.dart lib/providers/robotic_arm_state_provider.dart lib/view/robotic_arm_screen.dart

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @rahul31124 - I've reviewed your changes and they look great!

Prompt for AI Agents

Please address the comments from this code review:
## Individual Comments

### Comment 1
<location> `lib/view/widgets/servo_slider.dart:92` </location>
<code_context>
+      width: widget.size,
+      height: widget.size,
+      child: GestureDetector(
+        onPanUpdate: (details) => _onPanUpdate(details.localPosition),
+        child: CustomPaint(
+          painter: _ServoSliderPainter(
</code_context>

<issue_to_address>
Using onPanUpdate may not capture initial touch events accurately for the slider.

Also handle onPanStart to update the slider as soon as the user touches it for better responsiveness.
</issue_to_address>

<suggested_fix>
<<<<<<< SEARCH
      child: GestureDetector(
        onPanUpdate: (details) => _onPanUpdate(details.localPosition),
        child: CustomPaint(
=======
      child: GestureDetector(
        onPanStart: (details) => _onPanUpdate(details.localPosition),
        onPanUpdate: (details) => _onPanUpdate(details.localPosition),
        child: CustomPaint(
>>>>>>> REPLACE

</suggested_fix>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[github-actions]

Build successful. APKs to test: https://github.com/fossasia/pslab-app/actions/runs/16853195845/artifacts/3726787761

[CloudyPadmal]

Hello @rahul31124 , do you think is it better if we omit the "tap to edit" text and use that space to make the degree value a bit bigger?

[rahul31124]

Hello @CloudyPadmal, I think it would be better to reduce the size of the 'Tap to edit' text and increase the size of the degree value.

[rahul31124]

@CloudyPadmal, I have increased the size of the degree