Flutter makes it easy and fast to build beautiful apps for mobile and beyond
Go to file
Hans Muller 92f8455ff8
Scrollbar thumb drag gestures now produce one start and one end scroll notification (#146654)
The scroll notification events reported for a press-drag-release gesture within a scrollable on a touch screen device begin with a `ScrollStartNotification`, followed by a series of `ScrollUpdateNotifications`, and conclude with a `ScrollEndNotification`. This protocol can be used to defer work until an interactive scroll gesture ends. For example, you might defer updating a scrollable's contents via network requests until the scroll has ended, or you might want to automatically auto-scroll at that time. 

In the example that follows the CustomScrollView automatically scrolls so that the last partially visible fixed-height item is completely visible when the scroll gesture ends. Many iOS applications do this kind of thing. It only makes sense to auto-scroll when the user isn't actively dragging the scrollable around.

It's easy enough to do this by reacting to a ScrollEndNotifcation by auto-scrolling to align the last fixed-height list item ([source code](https://gist.github.com/HansMuller/13e2a7adadc9afb3803ba7848b20c410)).

https://github.com/flutter/flutter/assets/1377460/a6e6fc77-6742-4f98-81ba-446536535f73

Dragging the scrollbar thumb in a desktop application is a similar user gesture. Currently it's not possible to defer work or auto-scroll (or whatever) while the scrollable is actively being dragged via the scrollbar thumb because each scrollbar thumb motion is mapped to a scroll start - scroll update - scroll end series of notifications.  On a desktop platform, the same code behaves quite differently when the scrollbar thumb is dragged.

https://github.com/flutter/flutter/assets/1377460/2593d8a3-639c-407f-80c1-6e6f67fb8c5f

The stream of scroll-end events triggers auto-scrolling every time the thumb moves. From the user's perspective this feels like a losing struggle.

One can also detect the beginning and end of a touch-drag by listening to the value of a ScrollPosition's `isScrollingNotifier`. This approach suffers from a similar problem: during a scrollbar thumb-drag, the `isScrollingNotifier` value isn't updated at all.

This PR refactors the RawScrollbar implementation to effectively use a ScrollDragController to manage scrolls caused by dragging the scrollbar's thumb. Doing so means that dragging the thumb will produce the same notifications as dragging the scrollable on a touch device.

Now desktop applications can choose to respond to scrollbar thumb drags in the same that they respond to drag scrolling on a touch screen. With the changes included here, the desktop or web version of the app works as expected, whether you're listing to scroll notifications or the scroll position's `isScrollingNotifier`.

https://github.com/flutter/flutter/assets/1377460/67435c40-a866-4735-a19b-e3d68eac8139

This PR also makes the second [ScrollPosition API doc example](https://api.flutter.dev/flutter/widgets/ScrollPosition-class.html#cupertino.ScrollPosition.2) work as expected when used with the DartPad that's  part of API doc page.

Desktop applications also see scroll start-update-end notifications due to the mouse wheel.  There is no touch screen analog for the mouse wheel, so an application that wanted to enable this kind of auto-scrolling alignment would have to include a heuristic that dealt with the sequence of small scrolls triggered by the mouse wheel. Here's an example of that: [source code](https://gist.github.com/HansMuller/ce5c474a458f5f4bcc07b0d621843165). This version of the app does not auto-align in response to small changes, wether they're triggered by dragging the scrollbar thumb of the mouse wheel.

Related sliver utility PRs: https://github.com/flutter/flutter/pull/143538,  https://github.com/flutter/flutter/pull/143196, https://github.com/flutter/flutter/pull/143325.
2024-06-04 22:02:12 +00:00
.github Bump github/codeql-action from 3.25.6 to 3.25.7 (#149444) 2024-05-31 22:38:04 +00:00
.vscode Adjust repo config for VS Code formatting (#122758) 2023-04-14 12:35:42 +02:00
bin Roll Flutter Engine from e211c43f3dc1 to fe00f023666c (3 revisions) (#149680) 2024-06-04 21:45:21 +00:00
dev Disable sandboxing for macOS apps and tests in CI (#149618) 2024-06-04 21:51:19 +00:00
docs Switch to triage-* labels for platform package triage (#149614) 2024-06-03 22:36:09 +00:00
examples Scrollbar thumb drag gestures now produce one start and one end scroll notification (#146654) 2024-06-04 22:02:12 +00:00
packages Scrollbar thumb drag gestures now produce one start and one end scroll notification (#146654) 2024-06-04 22:02:12 +00:00
.ci.yaml Move some benchmarks from MotoG4 to Mokey (#149567) 2024-06-03 08:51:58 -07:00
.gitattributes Add pre-stable support for create on Windows (#51895) 2020-03-23 10:42:26 -07:00
.gitignore add .pub-cache back to .gitignore (#128894) 2023-06-15 19:21:05 +00:00
analysis_options.yaml Add missing_code_block_language_in_doc_comment lint. (#145354) 2024-04-03 16:00:25 -07:00
AUTHORS Add Valentin Vignal to AUTHORS (#147314) 2024-04-24 15:16:49 -07:00
CODE_OF_CONDUCT.md Update list of CoC contacts. (#130630) 2023-07-16 23:39:20 +00:00
CODEOWNERS Reverts "Refactor external_uiexternal_textures" (#142173) 2024-01-24 21:41:17 +00:00
CONTRIBUTING.md Add a DevTools section to CONTRIBUTING.md (#137193) 2023-11-13 21:51:07 +00:00
dartdoc_options.yaml Move snippets package back into flutter repo (#147690) 2024-05-03 06:09:03 +00:00
flutter_console.bat License update (#45373) 2019-11-27 15:04:02 -08:00
LICENSE License update (#45373) 2019-11-27 15:04:02 -08:00
PATENT_GRANT Rename patent file (#38686) 2019-08-16 16:54:58 +01:00
README.md Reland: Update link branches to main (#146882) 2024-04-17 13:16:33 +00:00
TESTOWNERS Adds benchmark for rrect_blur. (#149261) 2024-05-29 22:19:10 +00:00

Flutter

Flutter CI Status Discord badge Twitter handle codecov CII Best Practices OpenSSF Scorecard SLSA 1

Flutter is Google's SDK for crafting beautiful, fast user experiences for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

Documentation

For announcements about new releases, follow the flutter-announce@googlegroups.com mailing list. Our documentation also tracks breaking changes across releases.

Terms of service

The Flutter tool may occasionally download resources from Google servers. By downloading or using the Flutter SDK, you agree to the Google Terms of Service: https://policies.google.com/terms

For example, when installed from GitHub (as opposed to from a prepackaged archive), the Flutter tool will download the Dart SDK from Google servers immediately when first run, as it is used to execute the flutter tool itself. This will also occur when Flutter is upgraded (e.g. by running the flutter upgrade command).

About Flutter

We think Flutter will help you create beautiful, fast apps, with a productive, extensible and open development model, whether you're targeting iOS or Android, web, Windows, macOS, Linux or embedding it as the UI toolkit for a platform of your choice.

Beautiful user experiences

We want to enable designers to deliver their full creative vision without being forced to water it down due to limitations of the underlying framework. Flutter's layered architecture gives you control over every pixel on the screen and its powerful compositing capabilities let you overlay and animate graphics, video, text, and controls without limitation. Flutter includes a full set of widgets that deliver pixel-perfect experiences whether you're building for iOS (Cupertino) or other platforms (Material), along with support for customizing or creating entirely new visual components.

Reflectly hero image

Fast results

Flutter is fast. It's powered by hardware-accelerated 2D graphics libraries like Skia (that underpins Chrome and Android) and Impeller. We architected Flutter to support glitch-free, jank-free graphics at the native speed of your device.

Flutter code is powered by the world-class Dart platform, which enables compilation to 32-bit and 64-bit ARM machine code for iOS and Android, JavaScript and WebAssembly for the web, as well as Intel x64 and ARM for desktop devices.

Dart diagram

Productive development

Flutter offers stateful hot reload, allowing you to make changes to your code and see the results instantly without restarting your app or losing its state.

Hot reload animation

Extensible and open model

Flutter works with any development tool (or none at all), and also includes editor plug-ins for both Visual Studio Code and IntelliJ / Android Studio. Flutter provides tens of thousands of packages to speed your development, regardless of your target platform. And accessing other native code is easy, with support for both FFI (on Android, on iOS, on macOS, and on Windows) as well as platform-specific APIs.

Flutter is a fully open-source project, and we welcome contributions. Information on how to get started can be found in our contributor guide.