Skip to content

fix: Adapted widgets for desktop #2765

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

Merged
merged 6 commits into from
Jul 7, 2025

Conversation

Yugesh-Kumar-S
Copy link
Collaborator

@Yugesh-Kumar-S Yugesh-Kumar-S commented Jul 3, 2025

Fixes #2764

Changes

  • made the instrument stats scrollable when app window is shrinked to a smaller size.
  • Modified the Gauge widget to resize correctly .

Screenshots / Recordings

image

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

Adapt gauge and instrument stats widgets to handle smaller window sizes by adding adaptive sizing and scrollability

Bug Fixes:

  • Prevent gauge overflow by fixing resize logic and clamping values within valid range
  • Enable instrument stats to remain accessible by making the stats list scrollable when the window is too small

Enhancements:

  • Refactor GaugeWidget to use LayoutBuilder and extract subcomponents for dynamic gauge and tick rendering
  • Refactor InstrumentStats to leverage LayoutBuilder, SingleChildScrollView, ConstrainedBox, and IntrinsicHeight for responsive layout

Copy link

sourcery-ai bot commented Jul 3, 2025

Reviewer's Guide

Introduces dynamic sizing and refactors widget layouts to adapt to varying window dimensions, using LayoutBuilder-driven clamping for the gauge and a scrollable, constrained layout for instrument stats.

Updated class diagram for GaugeWidget and Instrumentstats

classDiagram
  class GaugeWidget {
    +double gaugeSize
    +double currentValue
    +double minValue
    +double maxValue
    +String unit
    +double currentValueFontSize
    +build(BuildContext context)
    -_buildGauge(size, gaugeValue, fontSize, errorFontSize)
    -_buildAnimatedGauge(size, gaugeValue)
    -_buildCenterDisplay(size, fontSize, errorFontSize)
    -_buildTickMarks(size)
  }
  class Instrumentstats {
    +build(BuildContext context)
  }
  class StatItem {
    +String label
    +double value
    +double fontSize
    +build(BuildContext context)
  }
  GaugeWidget <|-- Instrumentstats : uses
  Instrumentstats *-- StatItem
Loading

File-Level Changes

Change Details Files
Adaptive gauge widget refactor with dynamic sizing
  • Wrapped build method in LayoutBuilder to compute adaptiveGaugeSize and font sizes
  • Replaced fixed MediaQuery constraints with min/clamp on width/height
  • Extracted submethods for gauge, animated gauge, center display, and tick marks
  • Applied FittedBox and clamped dimensions for texts and tick containers
lib/view/widgets/gauge_widget.dart
Make instrument stats scrollable under constrained heights
  • Wrapped stats column in LayoutBuilder to measure availableHeight and titleHeight
  • Replaced Expanded→Column with SingleChildScrollView inside ConstrainedBox
  • Used IntrinsicHeight to fill remaining space and enable scroll when needed
  • Added fixed title container and spacing for consistent layout
lib/view/widgets/instruments_stats.dart
Refactor StatItem for responsive text and overflow protection
  • Added padding wrapper and Flexible→Padding for vertical spacing
  • Centered labels and values with textAlign and ellipsis overflow
  • Introduced maxLines on labels to prevent overflow
  • Adjusted font weights and sizes consistently per screen width
lib/view/widgets/instruments_stats.dart

Assessment against linked issues

Issue Objective Addressed Explanation
#2764 Prevent pixel overflows in the Instrument stats widget when the app window is resized.
#2764 Ensure the Gauge widget correctly aligns with the axis line when the app window is resized.

Possibly linked issues

  • Adapt widgets for desktop #2764: The PR fixes the instrument stats pixel overflow by making it scrollable and the gauge widget resizing issue by making it adaptive.

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

Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

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

Hey @Yugesh-Kumar-S - I've reviewed your changes - here's some feedback:

  • Avoid using IntrinsicHeight inside the SingleChildScrollView in Instrumentstats—consider using a ListView with shrinkWrap or Flexible/Expanded to achieve a scrollable, adaptive layout without the performance overhead of IntrinsicHeight.
  • GaugeWidget has a lot of hard-coded clamp ranges and magic numbers—extract those into named constants or parameters (or move to theme/dimens) to improve readability and make future adjustments easier.
  • The build method in GaugeWidget is quite large; consider splitting the adaptive size calculations and widget composition into smaller, self-contained widgets or helper classes to simplify maintenance and testing.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Avoid using IntrinsicHeight inside the SingleChildScrollView in Instrumentstats—consider using a ListView with shrinkWrap or Flexible/Expanded to achieve a scrollable, adaptive layout without the performance overhead of IntrinsicHeight.
- GaugeWidget has a lot of hard-coded clamp ranges and magic numbers—extract those into named constants or parameters (or move to theme/dimens) to improve readability and make future adjustments easier.
- The build method in GaugeWidget is quite large; consider splitting the adaptive size calculations and widget composition into smaller, self-contained widgets or helper classes to simplify maintenance and testing.

## Individual Comments

### Comment 1
<location> `lib/view/widgets/instruments_stats.dart:26` </location>
<code_context>
-              fontWeight: FontWeight.bold,
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final availableHeight = constraints.maxHeight;
+        final titleHeight = titleFontSize * 1.5;
+        final remainingHeight = availableHeight - titleHeight - 16;
+
+        return Column(
</code_context>

<issue_to_address>
Calculation of remainingHeight may result in negative values.

If availableHeight is less than titleHeight + 16, remainingHeight becomes negative, which may cause layout issues. Consider explicitly handling this case, such as by enforcing a minimum overall height or providing a fallback layout.
</issue_to_address>

<suggested_fix>
<<<<<<< SEARCH
    return LayoutBuilder(
      builder: (context, constraints) {
        final availableHeight = constraints.maxHeight;
        final titleHeight = titleFontSize * 1.5;
        final remainingHeight = availableHeight - titleHeight - 16;

        return Column(
=======
    import 'dart:math' as math;

    return LayoutBuilder(
      builder: (context, constraints) {
        final availableHeight = constraints.maxHeight;
        final titleHeight = titleFontSize * 1.5;
        final remainingHeight = math.max(0, availableHeight - titleHeight - 16);

        if (availableHeight < titleHeight + 16) {
          // Fallback layout or message when not enough space
          return Center(
            child: Text(
              'Not enough space to display content.',
              style: TextStyle(fontSize: titleFontSize),
            ),
          );
        }

        return Column(
>>>>>>> REPLACE

</suggested_fix>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Comment on lines +24 to +30
return LayoutBuilder(
builder: (context, constraints) {
final availableHeight = constraints.maxHeight;
final titleHeight = titleFontSize * 1.5;
final remainingHeight = availableHeight - titleHeight - 16;

return Column(
Copy link

Choose a reason for hiding this comment

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

suggestion: Calculation of remainingHeight may result in negative values.

If availableHeight is less than titleHeight + 16, remainingHeight becomes negative, which may cause layout issues. Consider explicitly handling this case, such as by enforcing a minimum overall height or providing a fallback layout.

Suggested change
return LayoutBuilder(
builder: (context, constraints) {
final availableHeight = constraints.maxHeight;
final titleHeight = titleFontSize * 1.5;
final remainingHeight = availableHeight - titleHeight - 16;
return Column(
import 'dart:math' as math;
return LayoutBuilder(
builder: (context, constraints) {
final availableHeight = constraints.maxHeight;
final titleHeight = titleFontSize * 1.5;
final remainingHeight = math.max(0, availableHeight - titleHeight - 16);
if (availableHeight < titleHeight + 16) {
// Fallback layout or message when not enough space
return Center(
child: Text(
'Not enough space to display content.',
style: TextStyle(fontSize: titleFontSize),
),
);
}
return Column(

Copy link

github-actions bot commented Jul 3, 2025

@Yugesh-Kumar-S
Copy link
Collaborator Author

@AsCress Do you think making the instrumentStats widget scrollable is a good idea here? Do you have any suggestion...

@Yugesh-Kumar-S Yugesh-Kumar-S changed the title fix: Adapted widgets for windows fix: Adapted widgets for desktop Jul 3, 2025
@AsCress
Copy link
Collaborator

AsCress commented Jul 3, 2025

@Yugesh-Kumar-S Depends on how we're aiming to target larger screens: do we want to create alternate layouts for large screen sizes or if we want to tweak our existing ones to support large screen sizes.

@Yugesh-Kumar-S
Copy link
Collaborator Author

Yugesh-Kumar-S commented Jul 6, 2025

@AsCress @CloudyPadmal @marcnause Please have a look at this desktop layout design. Is it a good approach?

Screen.Recording.2025-07-06.184854.mp4

@marcnause
Copy link
Contributor

@AsCress @CloudyPadmal @marcnause Please have a look at this desktop layout design. Is it a good approach?

I am no expert in layouts (especially not Flutter), but I think this layout should work nicely with desktop apps and it might also be an improvement for phones and tables in landscape mode.

@AsCress
Copy link
Collaborator

AsCress commented Jul 6, 2025

@Yugesh-Kumar-S This one is much better. Let's go ahead with this style only: for larger screen sizes, we stack the widgets horizontally.
FYI, this is the same style followed in pslab-desktop.

@Yugesh-Kumar-S Yugesh-Kumar-S added flutter Status: Review Required Requested reviews from peers and maintainers labels Jul 6, 2025
@Yugesh-Kumar-S Yugesh-Kumar-S self-assigned this Jul 6, 2025
@Yugesh-Kumar-S Yugesh-Kumar-S requested a review from AsCress July 7, 2025 15:30
Copy link
Collaborator

@AsCress AsCress left a comment

Choose a reason for hiding this comment

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

@Yugesh-Kumar-S Nice job !

@AsCress AsCress merged commit 92134e4 into fossasia:flutter Jul 7, 2025
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
flutter Status: Review Required Requested reviews from peers and maintainers
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Adapt widgets for desktop
4 participants