Colocar una barra de aplicación (app bar) flotante sobre una lista

Esta guía describe cómo colocar una app bar o barra de navegación flotante encima de una lista en una aplicación Flutter.

Para facilitar a los usuarios la visualización de una lista de elementos, es posible que quieras minimizar la app bar (barra de navegación) a medida que el usuario se desplaza hacia abajo por la lista.

Mover la app bar dentro de un CustomScrollView te permite crear una app bar que se puede minimizar o desplazar fuera de la pantalla a medida que te desplazas por una lista de elementos contenidos dentro del CustomScrollView.

Esta receta demuestra cómo usar un CustomScrollView para mostrar una lista de elementos con una app bar en la parte superior que se minimiza a medida que el usuario se desplaza hacia abajo en la lista siguiendo los siguientes pasos:

1. Crear un CustomScrollView.
2. Añadir una app bar flotante a CustomScrollView.
3. Añadir una lista de elementos a CustomScrollView.

Para crear una app bar flotante, coloca la app bar dentro de un CustomScrollView que también contenga la lista de elementos. Esto sincroniza la posición de desplazamiento de la app bar y de la lista de elementos. Puedes pensar en el widget CustomScrollView como un ListView que te permite mezclar y combinar diferentes tipos de listas desplazables y widgets.

Las listas desplazables y los widgets proporcionados al CustomScrollView se conocen como slivers. Existen varios tipos de slivers, como SliverList, SliverGrid y SliverAppBar. De hecho, los widgets ListView y GridView utilizan los widgets SliverList y SliverGrid para implementar el desplazamiento.

Para este ejemplo, crea un CustomScrollView que contenga un SliverList. Además, elimina la propiedad de la app bar de tu código si existe.

MaterialApp(
  title: 'Floating App Bar',
  home: Scaffold(
    // No app bar property provided yet.
    body: CustomScrollView(
      // Add the app bar and list of items as slivers in the next steps.
      slivers: <Widget>[],
    ),
  ),
);

CupertinoApp(
  title: 'Floating Navigation Bar',
  home: CupertinoPageScaffold(
    // No navigation bar property provided yet.
    child: CustomScrollView(
      // Add the navigation bar and list of items as slivers in the next steps.
      slivers: <Widget>[],
    ),
  ),
);

A continuación, añade una app bar al CustomScrollView.

slivers: [
  // Add the app bar to the CustomScrollView.
  SliverAppBar(
    // Provide a standard title.
    title: Text('Floating App Bar'),
    // Pin the app bar when scrolling.
    pinned: true,
    // Display a placeholder widget to visualize the shrinking size.
    flexibleSpace: Placeholder(),
    // Make the initial height of the SliverAppBar larger than normal.
    expandedHeight: 200,
  ),
],

slivers: [
  // Add the navigation bar to the CustomScrollView.
  CupertinoSliverNavigationBar(
    // Provide a standard title.
    largeTitle: Text('Floating App Bar'),
  ),
],

Ahora que tienes la app bar en su lugar, añade una lista de elementos al CustomScrollView. Tienes dos opciones: un SliverList o un SliverGrid. Si necesitas mostrar una lista de elementos uno tras otro, usa el widget SliverList. Si necesitas mostrar una lista en cuadrícula, usa el widget SliverGrid.

// Next, create a SliverList
SliverList.builder(
  // The builder function returns a ListTile with a title that
  // displays the index of the current item.
  itemBuilder: (context, index) =>
      ListTile(title: Text('Item #$index')),
  // Builds 50 ListTiles
  itemCount: 50,
)

// Next, create a SliverList
SliverList.builder(
  // The builder function returns a CupertinoListTile with a title
  // that displays the index of the current item.
  itemBuilder: (context, index) =>
      CupertinoListTile(title: Text('Item #$index')),
  // Builds 50 CupertinoListTile
  itemCount: 50,
)