repository·master·Indexed 23 days ago
https://github.com/google/flutter.widgetsA collection of specialized Flutter UI components developed by Google teams outside the core framework. Includes packages such as flutter_simple_treeview for tree structures, linked_scroll_controller for synchronized scrolling, scrollable_positioned_list for index-based scrolling, self_storing_input for automatic data persistence, and visibility_detector for tracking widget visibility.
The linked_scroll_controller package allows you to synchronize the scrolling of multiple widgets. You can use a LinkedScrollControllerGroup to manage a set of controllers that move in unison.
Key Requirement for Dynamic Controllers:
If you add controllers to a group dynamically (for example, inside a ListView.builder), you must provide unique Keys to the corresponding scrollable widgets. Failure to do so may cause the scroll offsets to go out of sync.
class _LinkedScrollablesState extends State<LinkedScrollables> {
LinkedScrollControllerGroup _controllers;
ScrollController _letters;
ScrollController _numbers;
@override
void initState() {
super.initState();
_controllers = LinkedScrollControllerGroup();
_letters = _controllers.addAndGet();
_numbers = _controllers.addAndGet();
}
@override
void dispose() {
_letters.dispose();
_numbers.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
child: ListView(
controller: _letters,
children: [...],
),
),
Expanded(
child: ListView(
controller: _numbers,
children: [...],
),
),
],
);
}
}Callbacks in VisibilityDetector are not fired immediately upon visibility changes. Instead, they are deferred and coalesced.
VisibilityDetector will be invoked at most once per VisibilityDetectorController.updateInterval.VisibilityDetector widgets are fired together synchronously between frames.VisibilityDetectorController.notifyNow() to force all pending visibility callbacks to fire immediately. This is useful when tearing down the widget tree, such as when switching views or exiting the application.To use self-storing input widgets, you must first implement a Saver. A Saver is responsible for loading, validating, and saving data items identified by an itemKey.
The itemKey is a unique identifier for the data piece and can be any format, such as a resource URL string or a complex tuple like <connectionString, table, objectId, column>.
To synchronize multiple scrollables, follow this pattern:
LinkedScrollControllerGroup..addAndGet() method on the group to create and retrieve new ScrollController instances.controller property of your scrollable widgets (e.g., ListView, SingleChildScrollView)..dispose() on the individual controllers when they are no longer needed to prevent memory leaks.When writing widget tests involving VisibilityDetector, you may encounter issues with deferred callbacks or pending timers. You have three ways to handle this:
Set the updateInterval to Duration.zero. This makes visibility changes report immediately and prevents the "A Timer is still pending..." assertion during teardown.
VisibilityDetectorController.instance.updateInterval = Duration.zero;If you want to keep a non-zero interval, manually pump the widget tester for the duration of the interval to allow callbacks to fire.
await tester.pump(VisibilityDetectorController.instance.updateInterval);To avoid the "A Timer is still pending..." assertion without changing the interval, explicitly destroy the widget tree by pumping a placeholder before the test completes.
await tester.pumpWidget(Placeholder());The flutter_simple_treeview package provides a widget for visualizing tree structures in Flutter. Each node in the tree can display any arbitrary widget as its content, allowing for highly customizable tree views.
TreeView(nodes: [
TreeNode(content: Text("root1")),
TreeNode(
content: Text("root2"),
children: [
TreeNode(content: Text("child21")),
TreeNode(content: Text("child22")),
TreeNode(
content: Text("root23"),
children: [
TreeNode(content: Text("child231")),
],
),
],
),
]),To see the flutter_simple_treeview package in action, including how to control nodes and render JSON as a tree, you can run the provided demo application using the Flutter CLI.
flutter run -d chromeTo ensure that editing overlays close when a user taps elsewhere on the screen, follow these steps:
OverlayController in your screen state:OverlayController _controller = OverlayController();Scaffold (or widget body) with a GestureDetector that calls _controller.close() on tap._controller instance to each self-storing widget using the overlayController parameter.// 1. Define the controller in your state
OverlayController _controller = OverlayController();
// 2. Wrap the body in a GestureDetector
GestureDetector(
onTap: () async {
_controller.close();
},
child: Scaffold(
body: ...
),
);
// 3. Pass the controller to the widget
SelfStoringText(
overlayController: _controller,
// ... other parameters
)The ScrollablePositionedList is a Flutter list widget that functions similarly to a ListView.builder but provides the ability to scroll or jump to a specific item index.
To use it, you must provide controllers and listeners for item scrolling, item positions, scroll offsets, and offset changes.
Key capabilities:
itemScrollController.scrollTo.itemScrollController.jumpTo.itemPositionsListener.itemPositions.final ItemScrollController itemScrollController = ItemScrollController();
final ScrollOffsetController scrollOffsetController = ScrollOffsetController();
final ItemPositionsListener itemPositionsListener = ItemPositionsListener.create();
final ScrollOffsetListener scrollOffsetListener = ScrollOffsetListener.create();
ScrollablePositionedList.builder(
itemCount: 500,
itemBuilder: (context, index) => Text('Item $index'),
itemScrollController: itemScrollController,
scrollOffsetController: scrollOffsetController,
itemPositionsListener: itemPositionsListener,
scrollOffsetListener: scrollOffsetListener,
);Once a Saver is defined, you can add self-storing input widgets to your UI. You must parameterize each widget with your defined Saver and a unique itemKey.
These widgets automatically handle:
To run the demonstration application for the self_storing_input package in a web browser, use the Flutter CLI with the Chrome device specified.
flutter run -d chrome