// Copyright 2014 The Flutter Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import 'package:flutter/material.dart'; /// Flutter code sample for [SliverAppBar]. void main() => runApp(const AppBarApp()); class AppBarApp extends StatelessWidget { const AppBarApp({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( home: SliverAppBarExample(), ); } } class SliverAppBarExample extends StatefulWidget { const SliverAppBarExample({super.key}); @override State<SliverAppBarExample> createState() => _SliverAppBarExampleState(); } class _SliverAppBarExampleState extends State<SliverAppBarExample> { bool _pinned = true; bool _snap = false; bool _floating = false; // [SliverAppBar]s are typically used in [CustomScrollView.slivers], which in // turn can be placed in a [Scaffold.body]. @override Widget build(BuildContext context) { return Scaffold( body: CustomScrollView( slivers: <Widget>[ SliverAppBar( pinned: _pinned, snap: _snap, floating: _floating, expandedHeight: 160.0, flexibleSpace: const FlexibleSpaceBar( title: Text('SliverAppBar'), background: FlutterLogo(), ), ), const SliverToBoxAdapter( child: SizedBox( height: 20, child: Center( child: Text('Scroll to see the SliverAppBar in effect.'), ), ), ), SliverList( delegate: SliverChildBuilderDelegate( (BuildContext context, int index) { return Container( color: index.isOdd ? Colors.white : Colors.black12, height: 100.0, child: Center( child: Text('$index', textScaler: const TextScaler.linear(5)), ), ); }, childCount: 20, ), ), ], ), bottomNavigationBar: BottomAppBar( child: Padding( padding: const EdgeInsets.all(8), child: OverflowBar( overflowAlignment: OverflowBarAlignment.center, children: <Widget>[ Row( mainAxisSize: MainAxisSize.min, children: <Widget>[ const Text('pinned'), Switch( onChanged: (bool val) { setState(() { _pinned = val; }); }, value: _pinned, ), ], ), Row( mainAxisSize: MainAxisSize.min, children: <Widget>[ const Text('snap'), Switch( onChanged: (bool val) { setState(() { _snap = val; // Snapping only applies when the app bar is floating. _floating = _floating || _snap; }); }, value: _snap, ), ], ), Row( mainAxisSize: MainAxisSize.min, children: <Widget>[ const Text('floating'), Switch( onChanged: (bool val) { setState(() { _floating = val; _snap = _snap && _floating; }); }, value: _floating, ), ], ), ], ), ), ), ); } }