FlexibleSpaceBar class

The part of a Material Design AppBar that expands, collapses, and stretches.

Learn more about FlexibleSpaceBar on the Flutter YouTube channel.

Most commonly used in the SliverAppBar.flexibleSpace field, a flexible space bar expands and contracts as the app scrolls so that the AppBar reaches from the top of the app to the top of the scrolling contents of the app. When using SliverAppBar.flexibleSpace, the SliverAppBar.expandedHeight must be large enough to accommodate the SliverAppBar.flexibleSpace widget.

Furthermore is included functionality for stretch behavior. When SliverAppBar.stretch is true, and your ScrollPhysics allow for overscroll, this space will stretch with the overscroll.

The widget that sizes the AppBar must wrap it in the widget returned by FlexibleSpaceBar.createSettings, to convey sizing information down to the FlexibleSpaceBar.

This sample application demonstrates the different features of the FlexibleSpaceBar when used in a SliverAppBar. This app bar is configured to stretch into the overscroll space, and uses the FlexibleSpaceBar.stretchModes to apply fadeTitle, blurBackground and zoomBackground. The app bar also makes use of CollapseMode.parallax by default.

To see it in action, copy and run this code snippet on DartPad.

import 'package:flutter/gestures.dart';
import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [FlexibleSpaceBar].

void main() => runApp(const FlexibleSpaceBarExampleApp());

class FlexibleSpaceBarExampleApp extends StatelessWidget {
  const FlexibleSpaceBarExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: const MaterialScrollBehavior().copyWith(
        dragDevices: PointerDeviceKind.values.toSet(),
      ),
      home: Scaffold(
        body: CustomScrollView(
          physics: const BouncingScrollPhysics(
            parent: AlwaysScrollableScrollPhysics(),
          ),
          slivers: <Widget>[
            SliverAppBar(
              stretch: true,
              onStretchTrigger: () {
                // Function callback for stretch
                return Future<void>.value();
              },
              expandedHeight: 300.0,
              flexibleSpace: FlexibleSpaceBar(
                stretchModes: const <StretchMode>[
                  .zoomBackground,
                  .blurBackground,
                  .fadeTitle,
                ],
                centerTitle: true,
                title: const Text('Flight Report'),
                background: Stack(
                  fit: .expand,
                  children: <Widget>[
                    Image.network(
                      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
                      fit: .cover,
                    ),
                    const DecoratedBox(
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          begin: Alignment(0.0, 0.5),
                          end: .center,
                          colors: <Color>[Color(0x60000000), Color(0x00000000)],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            SliverList.list(
              children: const <Widget>[
                ListTile(
                  leading: Icon(Icons.wb_sunny),
                  title: Text('Sunday'),
                  subtitle: Text('sunny, h: 80, l: 65'),
                ),
                ListTile(
                  leading: Icon(Icons.wb_sunny),
                  title: Text('Monday'),
                  subtitle: Text('sunny, h: 80, l: 65'),
                ),
                // ListTiles++
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Constructors

FlexibleSpaceBar({Key? key, Widget? title, Widget? background, bool? centerTitle, EdgeInsetsGeometry? titlePadding, CollapseMode collapseMode = CollapseMode.parallax, List<StretchMode> stretchModes = const <StretchMode>[StretchMode.zoomBackground], double expandedTitleScale = 1.5}): Creates a flexible space bar.
const

Properties

background → Widget?: Shown behind the title when expanded.
final
centerTitle → bool?: Whether the title should be centered.
final
collapseMode → CollapseMode: Collapse effect while scrolling.
final
expandedTitleScale → double: Defines how much the title is scaled when the FlexibleSpaceBar is expanded due to the user scrolling downwards. The title is scaled uniformly on the x and y axes while maintaining its bottom-left position (bottom-center if centerTitle is true).
final
hashCode → int: The hash code for this object.
no setterinherited
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
stretchModes → List<StretchMode>: Stretch effect while over-scrolling.
final
title → Widget?: The primary contents of the flexible space bar when expanded.
final
titlePadding → EdgeInsetsGeometry?: Defines how far the title is inset from either the widget's bottom-left or its center.
final

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<FlexibleSpaceBar>: Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited

Static Methods

createSettings({double? toolbarOpacity, double? minExtent, double? maxExtent, bool? isScrolledUnder, bool? hasLeading, required double currentExtent, required Widget child}) → Widget: Wraps a widget that contains an AppBar to convey sizing information down to the FlexibleSpaceBar.