| // 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. |
| |
| /// Flutter code sample for [SliverAppBar]. |
| |
| import 'package:flutter/material.dart'; |
| |
| 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', textScaleFactor: 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, |
| ), |
| ], |
| ), |
| ], |
| ), |
| ), |
| ), |
| ); |
| } |
| } |