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.

Sign up for GitHub

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

Jump to bottom

Scrollbar 3.0.0 #62

Merged
merged 2 commits into from
Aug 24, 2021
Merged

Scrollbar 3.0.0 #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8f0bbb7
Update scrollbar style
bdlukaa Aug 24, 2021
d3ef734
Update documentation
bdlukaa Aug 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ Date format: DD/MM/YYYY
- Updated Acrylic to support the web
- Update `Checkbox` design
- Update `ToggleSwitch` design
- Update `Scrollbar` design

## [2.2.1] - [26/06/2021]

Expand Down
9 changes: 5 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1298,11 +1298,14 @@ A scrollbar thumb indicates which portion of a [ScrollView] is actually visible.

Depending on the situation, the scrollbar uses two different visualizations, shown in the following illustration: the panning indicator (left) and the traditional scrollbar (right).

![Scrollbar Preview](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/images/scrollbar.png)
> Note that the arrows aren't visible. See [this](https://github.com/flutter/flutter/issues/80370) and [this](https://github.com/bdlukaa/fluent_ui/issues/14) issues for more info.

![Scrollbar Panning Indicator](https://docs.microsoft.com/en-us/windows/apps/design/controls/images/scrollbar-panning.png)
![Traditional Scrollbar](https://docs.microsoft.com/en-us/windows/apps/design/controls/images/scrollbar-traditional.png)

> When the scrollbar is visible it is overlaid as 16px on top of the content inside your ScrollView. In order to ensure good UX design you will want to ensure that no interactive content is obscured by this overlay. Additionally if you would prefer not to have UX overlap, leave 16px of padding on the edge of the viewport to allow for the scrollbar.

### Example
Here's an example of how to add a scrollbar to a ScrollView:

```dart
final _controller = ScrollController();
Expand All @@ -1326,8 +1329,6 @@ Which produces the following:

You can change the `isAlwaysVisible` property to either enable or disable the fade effect. It's disabled by default.

> Note: Currently, the leading and trailing arrows are not implemented. See [this issue](https://github.com/bdlukaa/fluent_ui/issues/14) to learn more

## List Tile

You can use a `ListTile` in a `ListView`.
Expand Down
13 changes: 6 additions & 7 deletions lib/src/controls/utils/scrollbar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,7 @@ class _ScrollbarState extends RawScrollbarState<Scrollbar> {
}

Color _trackColor(ButtonStates state) {
if (state == ButtonStates.none) return Colors.transparent;
return _scrollbarTheme.backgroundColor ?? Colors.transparent;
return Colors.transparent;
}

Color _thumbColor(ButtonStates state) {
Expand Down Expand Up @@ -341,16 +340,16 @@ class ScrollbarThemeData with Diagnosticable {
? const Color(0xFF5d5d5d)
: const Color(0xFFa4a4a4),
thickness: 2.0,
hoveringThickness: 16.0,
hoveringThickness: 6.0,
backgroundColor: brightness.isLight
? const Color(0xFFe9e9e9)
: const Color(0xFF1b1b1b),
radius: const Radius.circular(100.0),
hoveringRadius: const Radius.circular(0.0),
crossAxisMargin: 2.0,
hoveringCrossAxisMargin: 0.0,
hoveringRadius: const Radius.circular(100.0),
crossAxisMargin: 4.0,
hoveringCrossAxisMargin: 4.0,
mainAxisMargin: 2.0,
hoveringMainAxisMargin: 0.0,
hoveringMainAxisMargin: 2.0,
minThumbLength: 48.0,
trackBorderColor: Colors.transparent,
hoveringTrackBorderColor: Colors.transparent,
Expand Down