-
Notifications
You must be signed in to change notification settings - Fork 816
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
Conversation
Reviewer's GuideIntroduces 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 InstrumentstatsclassDiagram
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
File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
There was a problem hiding this 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>
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
return LayoutBuilder( | ||
builder: (context, constraints) { | ||
final availableHeight = constraints.maxHeight; | ||
final titleHeight = titleFontSize * 1.5; | ||
final remainingHeight = availableHeight - titleHeight - 16; | ||
|
||
return Column( |
There was a problem hiding this comment.
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.
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( |
Build successful. APKs to test: https://github.com/fossasia/pslab-android/actions/runs/16100143653/artifacts/3472341873 |
@AsCress Do you think making the instrumentStats widget scrollable is a good idea here? Do you have any suggestion... |
@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. |
@AsCress @CloudyPadmal @marcnause Please have a look at this desktop layout design. Is it a good approach? Screen.Recording.2025-07-06.184854.mp4 |
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. |
@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. |
There was a problem hiding this 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 !
Fixes #2764
Changes
Screenshots / Recordings
Checklist:
strings.xml
,dimens.xml
andcolors.xml
without hard coding any value.strings.xml
,dimens.xml
orcolors.xml
.Summary by Sourcery
Adapt gauge and instrument stats widgets to handle smaller window sizes by adding adaptive sizing and scrollability
Bug Fixes:
Enhancements: