186 lines
3.5 KiB
Markdown
186 lines
3.5 KiB
Markdown
---
|
|
name: features-slivers
|
|
description: Flutter Sliver widgets - CustomScrollView, SliverList, SliverGrid, and advanced scrolling effects
|
|
---
|
|
|
|
# Sliver Widgets
|
|
|
|
Sliver widgets provide advanced scrolling effects and custom scroll behaviors.
|
|
|
|
## CustomScrollView
|
|
|
|
Create custom scroll effects with slivers.
|
|
|
|
```dart
|
|
CustomScrollView(
|
|
slivers: [
|
|
SliverAppBar(
|
|
expandedHeight: 200,
|
|
floating: false,
|
|
pinned: true,
|
|
flexibleSpace: FlexibleSpaceBar(
|
|
title: Text('Title'),
|
|
background: Image.network('url'),
|
|
),
|
|
),
|
|
SliverList(
|
|
delegate: SliverChildBuilderDelegate(
|
|
(context, index) {
|
|
return ListTile(title: Text('Item $index'));
|
|
},
|
|
childCount: 100,
|
|
),
|
|
),
|
|
],
|
|
)
|
|
```
|
|
|
|
## SliverAppBar
|
|
|
|
App bar that responds to scrolling.
|
|
|
|
```dart
|
|
SliverAppBar(
|
|
expandedHeight: 200,
|
|
floating: true, // Appears when scrolling up
|
|
pinned: true, // Stays at top when scrolling
|
|
snap: true, // Snaps when floating
|
|
flexibleSpace: FlexibleSpaceBar(
|
|
title: Text('Title'),
|
|
background: Image.network('url'),
|
|
),
|
|
)
|
|
```
|
|
|
|
## SliverList
|
|
|
|
List of widgets in a sliver.
|
|
|
|
```dart
|
|
SliverList(
|
|
delegate: SliverChildBuilderDelegate(
|
|
(context, index) {
|
|
return ListTile(title: Text('Item $index'));
|
|
},
|
|
childCount: 100,
|
|
),
|
|
)
|
|
|
|
// With separator
|
|
SliverList(
|
|
delegate: SliverChildBuilderDelegate(
|
|
(context, index) {
|
|
return ListTile(title: Text('Item $index'));
|
|
},
|
|
childCount: 100,
|
|
),
|
|
)
|
|
```
|
|
|
|
## SliverGrid
|
|
|
|
Grid of widgets in a sliver.
|
|
|
|
```dart
|
|
SliverGrid(
|
|
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
|
crossAxisCount: 2,
|
|
crossAxisSpacing: 10,
|
|
mainAxisSpacing: 10,
|
|
),
|
|
delegate: SliverChildBuilderDelegate(
|
|
(context, index) {
|
|
return Container(color: Colors.blue);
|
|
},
|
|
childCount: 20,
|
|
),
|
|
)
|
|
```
|
|
|
|
## SliverPadding
|
|
|
|
Add padding to slivers.
|
|
|
|
```dart
|
|
SliverPadding(
|
|
padding: const EdgeInsets.all(16),
|
|
sliver: SliverList(...),
|
|
)
|
|
```
|
|
|
|
## SliverToBoxAdapter
|
|
|
|
Convert regular widget to sliver.
|
|
|
|
```dart
|
|
SliverToBoxAdapter(
|
|
child: Container(
|
|
height: 100,
|
|
color: Colors.blue,
|
|
child: Center(child: Text('Header')),
|
|
),
|
|
)
|
|
```
|
|
|
|
## SliverPersistentHeader
|
|
|
|
Persistent header that changes size.
|
|
|
|
```dart
|
|
SliverPersistentHeader(
|
|
pinned: true,
|
|
delegate: _SliverHeaderDelegate(
|
|
minHeight: 60,
|
|
maxHeight: 200,
|
|
),
|
|
)
|
|
```
|
|
|
|
## Complete Example
|
|
|
|
```dart
|
|
CustomScrollView(
|
|
slivers: [
|
|
SliverAppBar(
|
|
expandedHeight: 200,
|
|
pinned: true,
|
|
flexibleSpace: FlexibleSpaceBar(
|
|
title: Text('Title'),
|
|
background: Image.network('url'),
|
|
),
|
|
),
|
|
SliverToBoxAdapter(
|
|
child: Container(
|
|
padding: EdgeInsets.all(16),
|
|
child: Text('Header content'),
|
|
),
|
|
),
|
|
SliverList(
|
|
delegate: SliverChildBuilderDelegate(
|
|
(context, index) {
|
|
return ListTile(title: Text('Item $index'));
|
|
},
|
|
childCount: 100,
|
|
),
|
|
),
|
|
],
|
|
)
|
|
```
|
|
|
|
## Key Points
|
|
|
|
- Use `CustomScrollView` for custom scroll effects
|
|
- Use `SliverAppBar` for app bars that respond to scrolling
|
|
- Use `SliverList` for lists in slivers
|
|
- Use `SliverGrid` for grids in slivers
|
|
- Use `SliverPadding` to add padding
|
|
- Use `SliverToBoxAdapter` to convert widgets to slivers
|
|
- Slivers provide advanced scrolling effects
|
|
- Combine multiple slivers for complex layouts
|
|
|
|
<!--
|
|
Source references:
|
|
- https://github.com/flutter/flutter/tree/main/packages/flutter/lib/src/widgets/sliver.dart
|
|
- https://docs.flutter.dev/development/ui/advanced/slivers
|
|
-->
|