SliverAppBar.large constructor

const SliverAppBar.large({ Key? key, Widget? leading, bool automaticallyImplyLeading = true, Widget? title, List<Widget>? actions, bool automaticallyImplyActions = true, Widget? flexibleSpace, PreferredSizeWidget? bottom, double? elevation, double? scrolledUnderElevation, Color? shadowColor, Color? surfaceTintColor, bool forceElevated = false, Color? backgroundColor, Color? foregroundColor, IconThemeData? iconTheme, IconThemeData? actionsIconTheme, bool primary = true, bool? centerTitle, bool excludeHeaderSemantics = false, double? titleSpacing, double? collapsedHeight, double? expandedHeight, bool floating = false, bool pinned = true, bool snap = false, bool stretch = false, double stretchTriggerOffset = 100.0, AsyncCallback? onStretchTrigger, ShapeBorder? shape, double toolbarHeight = _LargeScrollUnderFlexibleConfig.collapsedHeight, double? leadingWidth, TextStyle? toolbarTextStyle, TextStyle? titleTextStyle, SystemUiOverlayStyle? systemOverlayStyle, bool forceMaterialTransparency = false, bool useDefaultSemanticsOrder = true, Clip? clipBehavior, EdgeInsetsGeometry? actionsPadding, })

Creates a Material Design large top app bar that can be placed in a CustomScrollView.

Returns a SliverAppBar configured with appropriate defaults for a large top app bar as defined in Material 3. It starts fully expanded with the title in an area underneath the main row of icons. When the CustomScrollView is scrolled, the title will be scrolled under the main row. When it is fully collapsed, a smaller version of the title will fade in on the main row. The reverse will happen if it is expanded again.

This sample shows how to use SliverAppBar.large in a CustomScrollView.

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

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [SliverAppBar.large].

void main() {
  runApp(const AppBarLargeApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(colorSchemeSeed: const Color(0xff6750A4)),
      home: Material(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar.large(
              leading: IconButton(
                icon: const Icon(Icons.menu),
                onPressed: () {},
              ),
              title: const Text('Large App Bar'),
              actions: <Widget>[
                IconButton(icon: const Icon(Icons.more_vert), onPressed: () {}),
              ],
            ),
            // Just some content big enough to have something to scroll.
            SliverToBoxAdapter(
              child: Card(
                child: SizedBox(
                  height: 1200,
                  child: Padding(
                    padding: const .fromLTRB(8, 100, 8, 100),
                    child: Text(
                      'Here be scrolling content...',
                      style: Theme.of(context).textTheme.headlineSmall,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

See also:

• AppBar, for a small or center-aligned top app bar.
• SliverAppBar.medium, for a medium top app bar.
• https://m3.material.io/components/top-app-bar/overview, the Material 3 app bar specification.

Implementation

// TODO(framework): Replace the following block with a @dartpad directive
// when it's supported. https://github.com/dart-lang/dartdoc/issues/4123
/// {@macro material_ui.dartpad_guide}
///
/// {@example /example/lib/app_bar/sliver_app_bar.3.dart#body}
///
/// </callout-box>
///
/// See also:
///
///   * [AppBar], for a small or center-aligned top app bar.
///   * [SliverAppBar.medium], for a medium top app bar.
///   * https://m3.material.io/components/top-app-bar/overview, the Material 3
///     app bar specification.
const SliverAppBar.large({
  super.key,
  this.leading,
  this.automaticallyImplyLeading = true,
  this.title,
  this.actions,
  this.automaticallyImplyActions = true,
  this.flexibleSpace,
  this.bottom,
  this.elevation,
  this.scrolledUnderElevation,
  this.shadowColor,
  this.surfaceTintColor,
  this.forceElevated = false,
  this.backgroundColor,
  this.foregroundColor,
  this.iconTheme,
  this.actionsIconTheme,
  this.primary = true,
  this.centerTitle,
  this.excludeHeaderSemantics = false,
  this.titleSpacing,
  this.collapsedHeight,
  this.expandedHeight,
  this.floating = false,
  this.pinned = true,
  this.snap = false,
  this.stretch = false,
  this.stretchTriggerOffset = 100.0,
  this.onStretchTrigger,
  this.shape,
  this.toolbarHeight = _LargeScrollUnderFlexibleConfig.collapsedHeight,
  this.leadingWidth,
  this.toolbarTextStyle,
  this.titleTextStyle,
  this.systemOverlayStyle,
  this.forceMaterialTransparency = false,
  this.useDefaultSemanticsOrder = true,
  this.clipBehavior,
  this.actionsPadding,
}) : assert(floating || !snap, 'The "snap" argument only makes sense for floating app bars.'),
     assert(stretchTriggerOffset > 0.0),
     assert(
       collapsedHeight == null || collapsedHeight >= toolbarHeight,
       'The "collapsedHeight" argument has to be larger than or equal to [toolbarHeight].',
     ),
     _variant = _SliverAppVariant.large;