ScrollView

A scrollable viewport onto a single child.

See also: ListView for virtualized, selectable lists.

Learn more: Lists & scrolling

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

ScrollView(child: Column(children: [/* tall content */]))

Details

When the viewport itself is focused, claims:

• Up / Down (vertical), Left / Right (horizontal) — scroll one cell.
• PageUp / PageDown — scroll a viewport’s worth.
• Home / End — jump to the start / end.

With a focused descendant, unhandled arrows navigate between controls and reveal the next control, including one outside the viewport. Other scroll chords still scroll this view when the descendant does not handle them. Editors and lists receive their keys before this enclosing viewport.

At either edge, edgeBehavior decides whether the key is consumed (contain) or returned to the focus chain (bubble) so an ancestor — e.g. a pane coordinator — can move focus instead.

Constructors

ScrollView()

Parameter	Type	Default	Description
child:	Widget	required	The full content subtree; it is laid out eagerly and clipped to the viewport.
controller:	ScrollController?	—	External controller. If null, the widget creates and disposes its own.
scrollDirection:	Axis	Axis.vertical	The axis along which content scrolls. The other axis stays constrained.
focusNode:	FocusNode?	—	External focus node. If null, the widget creates and disposes its own.
autofocus:	bool	false	Whether to request focus on first mount.
edgeBehavior:	EdgeBehavior	EdgeBehavior.bubble	How scroll keys and wheel gestures behave at an edge. With a focused descendant, main-axis arrows first navigate controls within this view; when no target remains, contain stops the arrow and bubble lets an enclosing traversal group move focus outside. Tab is unaffected.
scrollbar:	bool	false	When true, wrap the viewport in a Scrollbar gutter that reflects the scroll position and lets the mouse drag/click to scroll. A one-line opt-in sharing this view’s own controller. More
showScrollbarWhenFits:	bool	true	Whether an enabled scrollbar draws a full thumb when content fits. False keeps the gutter stable but draws the bar only while overflowing.

• scrollbar: The gutter is on the right for vertical scrolling and below the content for horizontal scrolling. It needs a bounded cross axis: width for a vertical view, height for a horizontal one.

Source

ScrollView is defined in packages/fleury/lib/src/widgets/scroll_view.dart.

Category: Lists & data · All widgets

Live demo

scroll_edges.dart

Restart Run Expand

Example · editable Revert Format

import 'package:fleury/fleury_core.dart';

class ScrollEdges extends StatefulWidget {
  const ScrollEdges({super.key});

  @override
  State<ScrollEdges> createState() => _ScrollEdgesState();
}

class _ScrollEdgesState extends State<ScrollEdges> {
  final scroll = ScrollController();
  EdgeBehavior edgeBehavior = EdgeBehavior.bubble;
  bool paneFocused = false;
  bool continued = false;

  @override
  void dispose() {
    scroll.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => FocusTraversalGroup(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text('Edge behavior'),
        Select<EdgeBehavior>(
          semanticLabel: 'Edge behavior',
          value: edgeBehavior,
          options: const [
            SelectOption(
              value: EdgeBehavior.bubble,
              label: 'Bubble (leave pane)',
            ),
            SelectOption(
              value: EdgeBehavior.contain,
              label: 'Contain (stay in pane)',
            ),
          ],
          onChanged: (value) =>
              setState(() => edgeBehavior = value),
        ),
        const SizedBox(height: 1),
        NotifierBuilder(
          notifier: scroll,
          builder: (context, _) {
            final first = scroll.offset + 1;
            final last =
                scroll.offset + scroll.viewportExtent;
            final edge = scroll.atStart
                ? 'TOP'
                : scroll.atEnd
                ? 'BOTTOM'
                : 'MIDDLE';
            return Text('Rows $first–$last / 8 · $edge');
          },
        ),
        Panel(
          title: 'Scroll pane',
          expandChild: false,
          focused: paneFocused,
          child: FocusDetector(
            onFocusChange: (value) =>
                setState(() => paneFocused = value),
            child:
                SizedBox(
                  height: 4,
                  child: ScrollView(
                    controller: scroll,
                    autofocus: true,
                    scrollbar: true,
                    edgeBehavior: edgeBehavior,
                    child: Column(
                      crossAxisAlignment:
                          CrossAxisAlignment.start,
                      children: [
                        const Text('1 ─── TOP'),
                        for (var n = 2; n < 8; n++)
                          Text('$n'),
                        const Text('8 ─── BOTTOM'),
                      ],
                    ),
                  ),
                ),
          ),
        ),
        Button(
          text: 'Next',
          onPressed: () => setState(() => continued = true),
        ),
        Text(
          paneFocused
              ? 'Focus: scroll pane'
              : 'Focus: controls',
        ),
        if (continued) const Text('Next selected'),
      ],
    ),
  );
}

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand