mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00

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.
146 lines
3.6 KiB
Dart
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,
|
|
),
|
|
);
|
|
}
|
|
}
|