// 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 MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); static const String _title = 'Flutter Code Sample'; @override Widget build(BuildContext context) { return const MaterialApp( title: _title, home: MyStatefulWidget(), ); } } class MyStatefulWidget extends StatefulWidget { const MyStatefulWidget({Key? key}) : super(key: key); @override State createState() => _MyStatefulWidgetState(); } class _MyStatefulWidgetState extends State { 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: [ 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: [ Row( mainAxisSize: MainAxisSize.min, children: [ const Text('pinned'), Switch( onChanged: (bool val) { setState(() { _pinned = val; }); }, value: _pinned, ), ], ), Row( mainAxisSize: MainAxisSize.min, children: [ 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: [ const Text('floating'), Switch( onChanged: (bool val) { setState(() { _floating = val; _snap = _snap && _floating; }); }, value: _floating, ), ], ), ], ), ), ), ); } }