| // 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. |
| |
| // Template: dev/snippets/config/templates/freeform.tmpl |
| // |
| // Comment lines marked with "▼▼▼" and "▲▲▲" are used for authoring |
| // of samples, and may be ignored if you are just exploring the sample. |
| |
| // Flutter code sample for FlexibleSpaceBar |
| // |
| //*************************************************************************** |
| //* ▼▼▼▼▼▼▼▼ description ▼▼▼▼▼▼▼▼ (do not modify or remove section marker) |
| |
| // 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. |
| |
| //* ▲▲▲▲▲▲▲▲ description ▲▲▲▲▲▲▲▲ (do not modify or remove section marker) |
| //*************************************************************************** |
| |
| //**************************************************************************** |
| //* ▼▼▼▼▼▼▼▼ code-imports ▼▼▼▼▼▼▼▼ (do not modify or remove section marker) |
| |
| import 'package:flutter/material.dart'; |
| |
| //* ▲▲▲▲▲▲▲▲ code-imports ▲▲▲▲▲▲▲▲ (do not modify or remove section marker) |
| //**************************************************************************** |
| |
| //******************************************************************** |
| //* ▼▼▼▼▼▼▼▼ code ▼▼▼▼▼▼▼▼ (do not modify or remove section marker) |
| |
| void main() => runApp(const MaterialApp(home: MyApp())); |
| |
| class MyApp extends StatelessWidget { |
| const MyApp({Key? key}) : super(key: key); |
| |
| @override |
| Widget build(BuildContext context) { |
| return 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>[ |
| StretchMode.zoomBackground, |
| StretchMode.blurBackground, |
| StretchMode.fadeTitle, |
| ], |
| centerTitle: true, |
| title: const Text('Flight Report'), |
| background: Stack( |
| fit: StackFit.expand, |
| children: <Widget>[ |
| Image.network( |
| 'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg', |
| fit: BoxFit.cover, |
| ), |
| const DecoratedBox( |
| decoration: BoxDecoration( |
| gradient: LinearGradient( |
| begin: Alignment(0.0, 0.5), |
| end: Alignment.center, |
| colors: <Color>[ |
| Color(0x60000000), |
| Color(0x00000000), |
| ], |
| ), |
| ), |
| ), |
| ], |
| ), |
| ), |
| ), |
| SliverList( |
| delegate: SliverChildListDelegate( |
| 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++ |
| ], |
| ), |
| ), |
| ], |
| ), |
| ); |
| } |
| } |
| |
| //* ▲▲▲▲▲▲▲▲ code ▲▲▲▲▲▲▲▲ (do not modify or remove section marker) |
| //******************************************************************** |