Skip to content
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

Fix ScrollbarPainter thumbExtent calculation and add padding #31763

Merged

Conversation

LongCatIsLooong
Copy link
Contributor

@LongCatIsLooong LongCatIsLooong commented Apr 29, 2019

Description

  • Fixed extentInside calculation in ScrollMetrics
  • Added asserts to extentInside getter, as well as ScrollPosition.applyContentDimensions to enforce minScrollExtent <= maxScrollExtent
  • Added padding to ScrollbarPainter, updated implementation. Took care of some edge cases.
  • Changed some scroll bar constants on Cupertino side.

Related Issues

Fixes #31430, partially fixes #13253 and #25802

Tests

I added the following tests:

  • Scrollbar is not smaller than minLength with large scroll views, if minLength is small
  • When scrolling normally, the size of the scrollbar stays the same, and it scrolls evenly
  • mainAxisMargin is respected
  • crossAxisMargin & text direction are respected
  • Padding works for all scroll directions
  • Should scroll towards the right direction
  • Handles MediaQuery well

Checklist

Before you create this PR confirm that it meets all requirements listed below by checking the relevant checkboxes ([x]). This will ensure a smooth and quick review process.

  • I read the Contributor Guide and followed the process outlined there for submitting PRs.
  • I signed the CLA.
  • I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
  • I updated/added relevant documentation (doc comments with ///).
  • All existing and new tests are passing.
  • The analyzer (flutter analyze --flutter-repo) does not report any problems on my PR.
  • I am willing to follow-up on review comments in a timely manner.

Breaking Change

Does your PR require Flutter developers to manually update their apps to accommodate your change?

  • Yes, this is a breaking change (Please read Handling breaking changes). Replace this with a link to the e-mail where you asked for input on this proposed change.
  • No, this is not a breaking change.

Appendix: Screenshots from iPhone XR running iOS 12.1

  1. Both horizontal and vertical scrollbars are visible and overscrolling
    Simulator Screen Shot - iPhone XR - 2019-04-30 at 15 00 14

  2. Only the horizontal scrollbars is visible and overscrolling
    Simulator Screen Shot - iPhone XR - 2019-04-30 at 15 12 06

  3. Only the vertical scrollbars is visible and overscrolling
    Simulator Screen Shot - iPhone XR - 2019-04-30 at 17 53 40

@LongCatIsLooong LongCatIsLooong added d: api docs Issues with https://api.flutter.dev/ f: scrolling Viewports, list views, slivers, etc. framework flutter/packages/flutter repository. See also f: labels. labels Apr 29, 2019
@Piinks Piinks added f: cupertino flutter/packages/flutter/cupertino repository f: material design flutter/packages/flutter/material repository. labels Apr 29, 2019
@xster
Copy link
Member

xster commented Apr 30, 2019

Can you rebase to head to solve the merge conflict?

@LongCatIsLooong LongCatIsLooong force-pushed the scrollable-obstructions branch 3 times, most recently from aa0a16f to 21dda78 Compare May 7, 2019 19:02
@LongCatIsLooong
Copy link
Contributor Author

LongCatIsLooong commented May 9, 2019

@xster @HansMuller removed some randomly made-up terms in documentation. Could you take a look?

Copy link
Member

@xster xster left a comment

Choose a reason for hiding this comment

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

LGTM

@@ -12,7 +12,10 @@ import 'scroll_metrics.dart';

const double _kMinThumbExtent = 18.0;

/// A [CustomPainter] for painting scrollbars.
/// A [CustomPainter] for painting scrollbars. The size of the scrollbar along
Copy link
Member

Choose a reason for hiding this comment

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

Let the dartdoc's first sentence be a one line summary paragraph.

await tester.pump(const Duration(milliseconds: 500));

expect(find.byType(CupertinoScrollbar), paints..rrect(
color: _kScrollbarColor,
Copy link
Member

Choose a reason for hiding this comment

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

2 indents

@@ -7,32 +7,74 @@ import 'package:flutter/material.dart';

import '../rendering/mock_canvas.dart';

Widget _buildSingleChildScrollViewWithScrollbar({
TextDirection textDirection = TextDirection.ltr,
Copy link
Member

Choose a reason for hiding this comment

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

2 indents

Copy link
Contributor

@HansMuller HansMuller left a comment

Choose a reason for hiding this comment

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

This looks good, although I'm not claiming to have combed through all of the new tests. Just some minor feedback.

@@ -60,14 +60,16 @@ abstract class ScrollMetrics {
///
/// The actual [pixels] value might be [outOfRange].
///
/// This value can be negative infinity, if the scroll is unbounded.
/// This value must not be null and must be less than or equal to [maxScrollExtent].
/// It can be negative infinity, if the scroll is unbounded.
double get minScrollExtent;
Copy link
Contributor

Choose a reason for hiding this comment

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

FixedScrollMetrics should assert that these constraints are true.

packages/flutter/lib/src/widgets/scroll_metrics.dart Outdated Show resolved Hide resolved
packages/flutter/lib/src/widgets/scrollbar.dart Outdated Show resolved Hide resolved
packages/flutter/lib/src/widgets/scrollbar.dart Outdated Show resolved Hide resolved
);
// Thumb extent reflects fraction of content visible, as long as this
// isn't less than the absolute minimum size.
// contentExtent >= viewportDimension, so (contentExtent - mainAxisPadding) > 0
Copy link
Contributor

Choose a reason for hiding this comment

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

NICE

packages/flutter/test/widgets/slivers_evil_test.dart Outdated Show resolved Hide resolved
viewportBuilder: (BuildContext context, ViewportOffset offset) {
return Viewport(
await tester.pumpWidget(
MediaQuery(
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm hoping that the only change to this test is just adding the MediaQuery

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think that's the case. Should I make the MediaQuery dependency optional?

Copy link
Contributor

Choose a reason for hiding this comment

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

It's fine as is; just difficult to read github diffs sometimes.

Copy link
Contributor

@HansMuller HansMuller left a comment

Choose a reason for hiding this comment

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

LGTM

@LongCatIsLooong LongCatIsLooong merged commit 22ea031 into flutter:master May 29, 2019
@LongCatIsLooong LongCatIsLooong deleted the scrollable-obstructions branch May 29, 2019 23:52
kiku-jw pushed a commit to kiku-jw/flutter that referenced this pull request Jun 14, 2019
…#31763)

- Fixed extentInside calculation in ScrollMetrics
- Added asserts to extentInside getter, as well as ScrollPosition.applyContentDimensions to enforce minScrollExtent <= maxScrollExtent
- Added padding to ScrollbarPainter, updated implementation. Took care of some edge cases.
- Changed some scroll bar constants on Cupertino side.
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 6, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
d: api docs Issues with https://api.flutter.dev/ f: cupertino flutter/packages/flutter/cupertino repository f: material design flutter/packages/flutter/material repository. f: scrolling Viewports, list views, slivers, etc. framework flutter/packages/flutter repository. See also f: labels.
Projects
None yet
5 participants