Mi árbol de widgets actual es algo como esto:
return Container(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
myCarouselWidget(),
GridView.count(
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 2,
padding: EdgeInsets.all(8),
childAspectRatio: 3 / 4,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
children: myDummyProductList,
),
],
),
),
);
Ahora lo que quiero es que a medida que me desplazo, el carrusel debería desplazarse hacia arriba y el gridView debería cubrir gradualmente toda la página.
Lo que probé:
- física: NeverScrollableScrollPhysics ()
- Eliminar el SingleChildScrollView y envolver el GridView en un widget expandido funcionó pero el carrusel no se desplazará hacia arriba.
Gracias por su ayuda de antemano.
2 respuestas
Encontré una solución después de algunos retoques e investigaciones. En resumen, utilicé un CustomScrollView y puse el carrusel en SliverAppBar que se oculta a medida que me desplazo hacia arriba. Este es mi árbol de widgets a partir de ahora:
return Container(
child: CustomScrollView(
slivers: [
SliverAppBar(
floating: false,
pinned: true,
elevation: 4,
backgroundColor: Theme.of(context).primaryColor,
expandedHeight: carouselHeight,
title: Text(
"MyTitle",
),
flexibleSpace: FlexibleSpaceBar(
background: myCarousel
),
),
SliverPadding(
padding: EdgeInsets.all(14),
sliver: SliverGrid.count(
crossAxisCount: 2,
childAspectRatio: 3 / 4,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
children: myDummyProductList,
),
),
],
),
);
La dirección del eje principal de una cuadrícula es la dirección en la que se desplaza. Los diseños de cuadrícula más utilizados son GridView.count, que crea un diseño con un número fijo de mosaicos en el eje transversal, y GridView.extent, que crea un diseño con mosaicos que tienen una extensión máxima del eje transversal. Una SliverGridDelegate personalizada puede producir una disposición 2D arbitraria de elementos secundarios, incluidas disposiciones que no están alineadas o se superponen.
CustomScrollView(
primary: false,
slivers: <Widget>[
SliverPadding(
padding: const EdgeInsets.all(20),
sliver: SliverGrid.count(
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 2,
children: <Widget>[
Container(
padding: const EdgeInsets.all(8),
child: const Text("He'd have you all unravel at the"),
color: Colors.green[100],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Heed not the rabble'),
color: Colors.green[200],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Sound of screams but the'),
color: Colors.green[300],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Who scream'),
color: Colors.green[400],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Revolution is coming...'),
color: Colors.green[500],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Revolution, they...'),
color: Colors.green[600],
),
],
),
),
],
)
