flutter/examples/api/lib/widgets/sliver/sliver_resizing_header.0.dart
Hans Muller 7e3e30929a
SliverResizingHeader (#143325)
A sliver that is pinned to the start of its `CustomScrollView` and reacts to scrolling by resizing between the intrinsic sizes of its min and max extent prototypes.

The minimum and maximum sizes of this sliver are defined by `minExtentPrototype` and `maxExtentPrototype`, a pair of widgets that are laid out once. You can use `SizedBox` widgets to define the size limits.

This sliver is preferable to the general purpose `SliverPersistentHeader` for its relatively narrow use case because there's no need to create a `SliverPersistentHeaderDelegate` or to predict the header's minimum or maximum size.

The sample shows how this sliver's two extent prototype properties can be used to create a resizing header whose minimum and maximum sizes match small and large configurations of the same header widget.

https://github.com/flutter/flutter/assets/1377460/fa7ced98-9d92-4d13-b093-50392118c213

Related sliver utility PRs: https://github.com/flutter/flutter/pull/143538, https://github.com/flutter/flutter/pull/143196, https://github.com/flutter/flutter/pull/127340.
2024-06-06 22:35:12 +00:00

146 lines
3.6 KiB
Dart

// 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';
void main() {
runApp(const SliverResizingHeaderApp());
}
class SliverResizingHeaderApp extends StatelessWidget {
const SliverResizingHeaderApp({ super.key });
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: ResizingHeaderExample(),
);
}
}
class ResizingHeaderExample extends StatefulWidget {
const ResizingHeaderExample({ super.key });
@override
State<ResizingHeaderExample> createState() => _ResizingHeaderExampleState();
}
class _ResizingHeaderExampleState extends State<ResizingHeaderExample> {
late final ScrollController scrollController;
@override
void initState() {
super.initState();
scrollController = ScrollController();
}
@override
void dispose() {
scrollController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(4),
child: Scrollbar(
controller: scrollController,
child: CustomScrollView(
controller: scrollController,
slivers: const <Widget>[
SliverResizingHeader(
minExtentPrototype: ListHeader(
text: 'One',
),
maxExtentPrototype: ListHeader(
text: 'One\nTwo\nThree'
),
child: ListHeader(
text: 'SliverResizingHeader\nWith Two Optional\nLines of Text',
),
),
ItemList(),
],
),
),
),
),
);
}
}
// A widget that displays its text within a thick rounded rectangle border
class ListHeader extends StatelessWidget {
const ListHeader({
super.key,
required this.text,
});
final String text;
@override
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
final ColorScheme colorScheme = theme.colorScheme;
return Container(
color: colorScheme.background,
padding: const EdgeInsets.symmetric(horizontal: 4),
child: Material(
color: colorScheme.primaryContainer,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
side: BorderSide(
width: 7,
color: colorScheme.outline,
),
),
child: Container(
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(vertical: 16),
child: Text(
text,
textAlign: TextAlign.center,
style: theme.textTheme.headlineMedium!.copyWith(
color: colorScheme.onPrimaryContainer,
),
),
),
),
);
}
}
// A placeholder SliverList of 50 items.
class ItemList extends StatelessWidget {
const ItemList({
super.key,
this.itemCount = 50,
});
final int itemCount;
@override
Widget build(BuildContext context) {
final ColorScheme colorScheme = Theme.of(context).colorScheme;
return SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Card(
color: colorScheme.onSecondary,
child: ListTile(
textColor: colorScheme.secondary,
title: Text('Item $index'),
),
);
},
childCount: itemCount,
),
);
}
}