Skip to main content
Mapagam

Controlling Scroll Behavior

1. Using ScrollController

Property Description Usage
ScrollController Manages scroll position and listening to scroll events. final ScrollController controller = ScrollController();
animateTo Animates the scroll position to a specific offset. controller.animateTo(100.0, duration: Duration(milliseconds: 300), curve: Curves.easeInOut);
jumpTo Jumps to a specific scroll offset instantly. controller.jumpTo(200.0);
position Current scroll position and related properties. double current = controller.position.pixels;

Example: ScrollController in ListView

ListView.builder(
  controller: ScrollController(),
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(title: Text('Item $index'));
  },
)

Example: Scroll to Top

final ScrollController controller = ScrollController();

// Animate to top
ElevatedButton(
  onPressed: () {
    controller.animateTo(0.0, duration: Duration(milliseconds: 500), curve: Curves.easeInOut);
  },
  child: Text('Scroll to Top'),
)
Note: Always dispose of ScrollController to prevent memory leaks. 
@override
void dispose() {
  controller.dispose();
  super.dispose();
}

2. Listening to Scroll Events

Property Description Values
onScrollNotification Callback function triggered when a scroll notification is received NotificationListener<ScrollNotification>

Example: Listening to Scroll Events

NotificationListener<ScrollNotification>(
  onScrollNotification: (ScrollNotification notification) {
    if (notification is ScrollStartEvent) {
      print('Scroll started');
    } else if (notification is ScrollUpdateEvent) {
      print('Scroll updated: ${notification.scrollDelta}');
    } else if (notification is ScrollEndEvent) {
      print('Scroll ended');
    }
  },
  child: ListView.builder(
    itemCount: 100,
    itemBuilder: (context, index) {
      return ListTile(title: Text('Item $index'));
    },
  ),
)

3. Scrolling to Position

Property Values Description
controller ScrollController Controller used to manage scroll position and listen to scroll events.
position double Current scroll position in pixels.

Example: Scroll to a specific position

final ScrollController controller = ScrollController();

// Scroll to position 200 pixels
controller.animateTo(
  200.0,
  duration: Duration(milliseconds: 500),
  curve: Curves.easeInOut,
);

Example: Scroll to top of list

final ScrollController controller = ScrollController();

// Scroll to the beginning of the scrollable
controller.animateTo(
  0.0,
  duration: Duration(milliseconds: 300),
  curve: Curves.easeOut,
);
Note: The animateTo method uses a curve to animate the scroll, providing a smooth transition.
Warning: Ensure that the ScrollController is properly disposed to avoid memory leaks.

Scrolling to Position - Key Points

  • ScrollController is used to manage scroll position.
  • animateTo provides smooth scrolling to a specific pixel value.
  • Use duration and curve to customize the animation.

4. Using ScrollPhysics

Property Values Description
physics ScrollPhysics Controls how the scrollable widget behaves when scrolled.

Example: Custom ScrollPhysics

CustomScrollView(
  physics: BouncingScrollPhysics(),
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Item $index')),
        childCount: 50,
      ),
    ),
  ],
)
Note: BouncingScrollPhysics provides a bouncing effect similar to iOS.

Common ScrollPhysics Types

  • ClampingScrollPhysics – Default physics, clamps scroll to boundaries.
  • BouncingScrollPhysics – Adds bounce effect on iOS.
  • NeverScrollableScrollPhysics – Disables scrolling entirely.

5. Using ScrollNotification

ScrollNotification is a powerful mechanism in Flutter that allows you to listen to scroll events and react to them. It's part of the Notification system, which enables widgets to communicate with their ancestors.

Class Description Usage
ScrollNotification Base class for all scroll-related notifications. Extend or listen to specific subclasses like ScrollUpdateNotification.
ScrollUpdateNotification Dispatched when the scroll position changes. Useful for tracking scroll progress or updating UI elements.
ScrollStartNotification Dispatched when scrolling starts. Can be used to trigger animations or UI changes at scroll start.
ScrollEndNotification Dispatched when scrolling ends. Useful for actions that should happen after scrolling completes.

Example: Listening to Scroll Notifications

class ScrollListenerExample extends StatefulWidget {
  @override
  _ScrollListenerExampleState createState() => _ScrollListenerExampleState();
}

class _ScrollListenerExampleState extends State<ScrollListenerExample> {
  double scrollPosition = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Scroll Listener Example')),
      body: NotificationListener<ScrollNotification>(
        onNotification: (ScrollNotification notification) {
          setState(() {
            scrollPosition = notification.metrics.pixels;
          });
          return false; // Don't consume the event
        },
        child: ListView.builder(
          itemCount: 100,
          itemBuilder: (context, index) {
            return ListTile(title: Text('Item $index'));
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text('${scrollPosition.toStringAsFixed(0)}'),
        onPressed: () {},
      ),
    );
  }
}
Note: The onNotification callback returns a boolean indicating whether the notification was consumed. Returning true prevents further propagation of the notification, which is generally not desired for scroll notifications.

Key Points

  • ScrollNotification is part of Flutter's Notification system.
  • It allows you to respond to scroll events like updates, starts, and ends.
  • Use NotificationListener to listen for scroll notifications in your widget tree.
  • Scroll position can be accessed via notification.metrics.pixels.

6. Implementing Scroll-to-Top Functionality

Property Description Usage
ScrollController Manages scroll position and behavior for scrollable widgets. final ScrollController _controller = ScrollController();
ScrollPosition Represents the current scroll position within a scrollable widget. _controller.position.pixels

Example: Scroll to Top Button

class ScrollToTopExample extends StatelessWidget {
  final ScrollController _controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Scroll Example')),
      body: ListView.builder(
        controller: _controller,
        itemCount: 100,
        itemBuilder: (context, index) {
          return ListTile(title: Text('Item $index'));
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller.animateTo(
            0.0,
            duration: Duration(milliseconds: 300),
            curve: Curves.easeInOut,
          );
        },
        child: Icon(Icons.arrow_upward),
      ),
    );
  }
}
Note: The animateTo method smoothly scrolls to the specified position over a given duration.

Key Points

  • ScrollController is essential for managing scroll behavior in Flutter.
  • animateTo provides a smooth scrolling animation to any scroll position.
  • Floating action buttons are commonly used to trigger scroll-to-top functionality.

7. Using KeepAlive

Property Values Description
keepAlive true / false Determines whether the widget should be kept alive when removed from the tree

Example: Using KeepAlive in a TabBar

class MyTabBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: [
              Tab(text: 'Tab 1'),
              Tab(text: 'Tab 2'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            ScrollablePage(keepAlive: true),
            ScrollablePage(keepAlive: false),
          ],
        ),
      ),
    );
  }
}

class ScrollablePage extends StatefulWidget {
  final bool keepAlive;

  ScrollablePage({this.keepAlive = false});

  @override
  _ScrollablePageState createState() => _ScrollablePageState();
}

class _ScrollablePageState extends State<ScrollablePage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => widget.keepAlive;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return ListView.builder(
      itemCount: 50,
      itemBuilder: (context, index) {
        return ListTile(title: Text('Item $index'));
      },
    );
  }
}

8. Implementing Infinite Scrolling

Property Description Usage
ScrollController Manages scroll position and listens to scroll events. final ScrollController _controller = ScrollController();
ListView.builder Builds list items on demand, ideal for infinite lists. ListView.builder(itemBuilder: (context, index) => itemBuilder(index));
onScroll Callback when the user scrolls to the end of the list. _controller.addListener(_onScroll);

Example: Basic Infinite Scroll Implementation

class InfiniteScrollExample extends StatefulWidget {
  @override
  _InfiniteScrollExampleState createState() => _InfiniteScrollExampleState();
}

class _InfiniteScrollExampleState extends State<InfiniteScrollExample> {
  final ScrollController _controller = ScrollController();
  List<String> items = [];

  @override
  void initState() {
    super.initState();
    _controller.addListener(_onScroll);
    _loadMoreItems(10); // Load initial items
  }

  void _onScroll() {
    if (_controller.position.pixels == _controller.position.maxScrollExtent) {
      _loadMoreItems(10); // Load more items when scrolled to end
    }
  }

  void _loadMoreItems(int count) {
    setState(() {
      for (int i = 0; i < count; i++) {
        items.add('Item ${items.length + i + 1}');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: _controller,
      itemCount: items.length,
      itemBuilder: (context, index) {
        return ListTile(title: Text(items[index]));
      },
    );
  }
}
Note: Ensure that _controller is properly disposed to avoid memory leaks.
Warning: Avoid loading too many items at once to prevent performance issues.

9. Using ScrollConfiguration Widget

The ScrollConfiguration widget in Flutter allows you to customize the scrolling behavior of scrollable widgets within its subtree. It provides a way to control how scrolling behaves, including the scroll physics and whether the scroll view should show scrollbars.

Property Description Values
behavior Defines the scroll behavior for the scrollable widgets within this configuration. ScrollBehavior
scrollbars Controls whether scrollbars are shown or hidden. true or false
physics Defines the physics of scrolling, such as how it behaves when scrolled beyond its bounds. ScrollPhysics

Example: Using ScrollConfiguration to Hide Scrollbars

ScrollConfiguration(
  scrollbars: false,
  child: ListView.builder(
    itemCount: 50,
    itemBuilder: (context, index) {
      return ListTile(title: Text('Item $index'));
    },
  ),
)

Example: Custom Scroll Physics

ScrollConfiguration(
  physics: BouncingScrollPhysics(),
  child: SingleChildScrollView(
    child: Text('This uses bouncing scroll physics'),
  ),
)

10. Implementing Nested Scrolling

Example: Nested Scroll with ListView and SingleChildScrollView

import &#x27;package:flutter/material.dart&#x27;;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Nested Scroll Example")),
        body: NestedScrollView(
          headerSliverBuilder: (context, innerBoxIsScrolled) => [
            SliverAppBar(
              title: Text("Header"),
              floating: true,
            ),
          ],
          body: ListView.builder(
            itemCount: 20,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text("Item $index"),
              );
            },
          ),
        ),
      ),
    );
  }
}
Property Description Usage
NestedScrollView Widget that allows nested scrolling behavior Wrap with SliverAppBar and scrollable content
headerSliverBuilder Builder for slivers to appear at the top Used with SliverAppBar or other slivers
body Scrollable content below the header Can be ListView, GridView, or other scrollable widgets
Note: NestedScrollView is ideal for complex layouts where a header scrolls independently from content.
Warning: Avoid nesting multiple scrollable widgets directly; it can cause performance issues.

Was this article helpful?

Related Cheat Sheets