FlexibleSpaceBar
sample.packages.flutter.lib.src.material.flexible_space_bar.58.
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.
import 'package:flutter/material.dart';
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: [
SliverAppBar(
stretch: true,
onStretchTrigger: () {
// Function callback for stretch
return Future.value();
},
expandedHeight: 300.0,
flexibleSpace: FlexibleSpaceBar(
stretchModes: const [
StretchMode.zoomBackground,
StretchMode.blurBackground,
StretchMode.fadeTitle,
],
centerTitle: true,
title: const Text('Flight Report'),
background: Stack(
fit: StackFit.expand,
children: [
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(0x60000000),
Color(0x00000000),
],
),
),
),
],
),
),
),
SliverList(
delegate: SliverChildListDelegate(
const [
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++
],
),
),
],
),
);
}
}
SHARE: