En Flutter, con slivers, podemos crear diferentes efectos de desplazamiento. Los fragmentos brindan una vista increíble de las listas cuando se desplazan hacia arriba o hacia abajo. Los fragmentos nos permiten impactar la experiencia de desplazamiento de listas y cuadrículas. En este artículo, veremos las funciones de Slivers que ofrece el paquete sliver_tools. Las características que ofrece sliver_tools son las siguientes:
- multiplataforma
- pila de astillas
- AstillaClip
- SliverAnimatedPaintExtent
Agregar la dependencia
En el archivo pubspec.yaml , agregue sliver_tools como una dependencia y luego configúrelo ejecutando pub get.
Dart
dependencies: sliver_tools: ^0.2.5
Dependencia de importación
En el archivo main.dart , agregue la dependencia de la siguiente manera:
Dart
import 'package:sliver_tools/sliver_tools.dart';
Implementación
Los fragmentos deben envolverse dentro de CustomScrollView para dar un efecto de desplazamiento a las listas o cuadrículas. CustomScrollView envuelve el widget Slivers que incluye todos los fragmentos que creamos.
multiplataforma
El widget MultiSliver() permite envolver varias astillas juntas. Por ejemplo, en el siguiente código estamos creando un SliverPinnedHeader(): un encabezado que se adherirá a la lista superior incluso llega al final de la pantalla y los widgets SliverList() dentro de un único widget MultiSliver().
Dart
MultiSliver(
// defaults to false
pushPinnedChildren: true,
children: <Widget>[
SliverPinnedHeader(
child: Container(
color: Colors.yellow,
height: 100,
child: Text(
"I am a Pinned Header",
style: TextStyle(fontSize: 30),
))),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color:
index % 2 == 0 ? Colors.green : Colors.greenAccent,
height: 80,
alignment: Alignment.center,
child: Text(
"Item $index",
style: const TextStyle(fontSize: 30),
),
),
);
},
// 40 list items
childCount: 40,
),
),
],
)
Producción:
pila de astillas
El SliverStack() permite poner una astilla sobre otra. En el siguiente ejemplo, a través de SliverPositioned() estamos creando el diseño completo de color amarillo sobre el cual estamos representando los elementos de la lista usando SliverList(). SliverList() toma un delegado como parámetro para dar los elementos a la lista para desplazarse.
Dart
SliverStack(
// defaults to false
insetOnOverlap: true,
children: <Widget>[
SliverPositioned.fill(
child: Container(color: Colors.yellow),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(15.0),
child: Container(
color:
index % 2 == 0 ? Colors.green : Colors.greenAccent,
height: 40,
alignment: Alignment.center,
child: Text(
"Item $index",
style: const TextStyle(fontSize: 30),
),
),
);
},
// 40 list items
childCount: 40,
),
),
],
)
Producción:
SliverGrid
SliverGrid() coloca los elementos en un sistema 2D. Requiere gridDelegate que estructura el diseño de la cuadrícula y un delegado que pasa los elementos que se presentarán en la pantalla para desplazarse. El parámetro childCount es el número de elementos que se mostrarán.
Dart
SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 2.0,
),
delegate: SliverChildBuilderDelegate(
(context, index) {
return Container(
height: 20,
color: Colors.amber[100],
alignment: Alignment.center,
child: Text(index.toString()),
);
},
childCount: 41,
),
)
Producción:
Un ejemplo completo
Dart
import 'package:flutter/material.dart';
import 'package:sliver_tools/sliver_tools.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'SliverList in Flutter',
theme: ThemeData(primarySwatch: Colors.green),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GeeksForGeeks"),
centerTitle: true,
),
body: CustomScrollView(slivers: [
SliverPinnedHeader(
child: Container(
color: Colors.blue[100],
height: 100,
child: Text(
"I am a Pinned Header",
style: TextStyle(fontSize: 30),
))),
SliverAnimatedPaintExtent(
duration: const Duration(milliseconds: 150),
child: SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(15.0),
child: Container(
color: Colors.pink[100],
height: 40,
alignment: Alignment.center,
child: Text(
"$index",
style: const TextStyle(fontSize: 30),
),
),
);
},
// 40 list items
childCount: 10,
),
),
),
SliverStack(
// defaults to false
insetOnOverlap: true,
children: <Widget>[
SliverPositioned.fill(
child: Container(color: Colors.yellow),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(15.0),
child: Container(
color:
index % 2 == 0 ? Colors.green : Colors.greenAccent,
height: 40,
alignment: Alignment.center,
child: Text(
"Item $index",
style: const TextStyle(fontSize: 30),
),
),
);
},
// 40 list items
childCount: 10,
),
),
],
),
SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 2.0,
),
delegate: SliverChildBuilderDelegate(
(context, index) {
return Container(
height: 20,
color: Colors.amber[100],
alignment: Alignment.center,
child: Text(index.toString()),
);
},
childCount: 41,
),
)
]));
}
}
Producción: