Flutter – Widget SilverAppBar

SliverAppBar es unwidget de Material Design en flutter que proporciona una barra de aplicaciones desplazable o plegable. La palabra Sliver se da a las áreas desplazables aquí. SliverAppBar básicamente nos brinda los medios para crear una barra de aplicaciones que puede cambiar de apariencia, mezclarse con el fondo o incluso desaparecer a medida que nos desplazamos. Ya teníamos el widget AppBar en flutter que coloca la barra de la aplicación a una altura fija. Pero, mirando a nuestro alrededor, podemos ver que la interfaz de usuario de la barra de aplicaciones desplazable se usa ampliamente. Podemos que incluso laaplicación GeeksforGeeks use la barra de aplicaciones que es plegable. Para lograr la misma funcionalidad, flutter nos brinda SliverAppBarwidget, que generalmente se toma como un widget secundario para CustomScrollView (widget de aleteo) , que le proporcionó el poder de interactuar con el desplazamiento. 

Constructor de la clase SliverAppBar:

const SliverAppBar(
{Key key,
Widget leading,
bool automaticallyImplyLeading: true,
Widget title,
List<Widget> actions,
Widget flexibleSpace,
PreferredSizeWidget bottom,
double elevation,
Color shadowColor,
bool forceElevated: false,
Color backgroundColor,
Brightness brightness,
IconThemeData iconTheme,
IconThemeData actionsIconTheme,
TextTheme textTheme,
bool primary: true,
bool centerTitle,
bool excludeHeaderSemantics: false,
double titleSpacing: NavigationToolbar.kMiddleSpacing,
double collapsedHeight,
double expandedHeight,
bool floating: false,
bool pinned: false,
bool snap: false,
bool stretch: false,
double stretchTriggerOffset: 100.0,
Future<void> onStretchTrigger(),
ShapeBorder shape,
double toolbarHeight: kToolbarHeight,
double leadingWidth}
)

Propiedades del widget SliverAppBar: 

• acción: esta propiedad toma una lista de widgets como un parámetro que se mostrará después del título si SliverAppBar es una fila.
• actionIconTheme: esta propiedad determina el color, la opacidad y el tamaño de los iconos de la barra de la aplicación final.
• automaticImplyLeading: esta propiedad toma un valor booleano como parámetro y controla si implica el widget principal si el valor booleano es nulo.
• backgroundColor : esta propiedad se usa para agregar colores al fondo de SliverAppbar .
• bottom: Esta propiedad toma PrefferedSizeWidget como parámetro. Y determina el widget que se mostrará en la parte inferior de SliverAppBar. Por lo general, es una barra de pestañas similar a la aplicación GeeksforGeeks .
• brillo : esta propiedad controla el brillo de SliverAppBar .
• centerTitle : esta propiedad determina si el widget de título debe estar en el centro de SliverAppBar o no. tomando un booleano como parámetro.
• colapsodHeight : esta propiedad controla a qué altura debe colapsar SliverAppBar .
• elevación : esta propiedad se usa para establecer la coordenada z en la que colocar esta barra de aplicaciones en relación con su elemento principal.
• includeHeaderSemantics : esta propiedad toma boolean como parámetro y controla si el widget de título debe incluirse en la semántica de encabezado que describe los usos de los widgets en la aplicación.
• expandedHeight : similar a la propiedad colapsodHeight , también toma un doble como parámetro y determina la altura a la que SliverAppBar debe expandirse por completo.
• espacio flexible : esta propiedad toma el widget como un parámetro y lo apila detrás de la barra de tomas cuando colapsa.
• flotante : Esta propiedad toma booleano como parámetro y controla la animación relacionada con la visibilidad de SliverAppBar . Determina si SliverAppBar debe hacerse visible tan pronto como el usuario se desplace hacia él (arriba o abajo) o no.
• forceElevated:  esta propiedad controla si mostrar sombra para la elevación o no si el contenido no se desplaza en SliverAppBar .
• iconTheme : esta propiedad es similar a actionIconTheme. Controla el color, tamaño, opacidad, etc. del icono utilizado en SliverAppBar .
• Leading: esta propiedad establece el widget que debe mostrarse antes del título.
• leadWidth : esta propiedad toma doble como parámetro y controla el ancho del widget principal.
• onStretchTrigger : esta propiedad toma AsyncCallback como un parámetro, que se activa cuando el usuario se desplaza demasiado.
• clavado ; Esta propiedad establece si SliverAppBar debe permanecer visible al comienzo de la vista de desplazamiento. Toma un booleano como parámetro.
• primario: esta propiedad toma booleano como parámetro y controla si SliverAppBar se muestra en la parte superior de la pantalla o no.
• shadowColor : esta propiedad determina el color de la sombra que se muestra debajo de SliverAppBar .
• shape : esta propiedad se utiliza para dar forma a SliverAppbar y administrar su sombra.
• snap : esta propiedad toma booleano como parámetro y, si se establece en verdadero, hace que SliverAppBar se ajuste a la vista cuando un usuario se desplaza cerca de ella en lugar de animarla suavemente. Hay una propiedad de restricción para ajustar que solo se puede establecer en verdadero cuando flotante también se establece en verdadero.
• stretch: Nuevamente, esta propiedad también toma un valor booleano como parámetro para determinar si SliverAppBar debe extenderse al espacio completo del área de desplazamiento excesivo.
• stretchTriggerOffset : esta propiedad determina el desplazamiento del desplazamiento excesivo que activa la propiedad onStretch .
• textTheme : esta propiedad toma el widget TextTheme como parámetro para determinar el estilo de tipografía utilizado en SliverAppBar .
• title : Esta propiedad generalmente toma el widget principal como un parámetro que se mostrará en SliverAppBar .
• titleSpacing: esta propiedad determina la cantidad de espacio alrededor del widget de título de forma horizontal.
• toolbarHeight : esta propiedad controla la altura dada a la parte de la barra de herramientas de SliverAppBar .

Ejemplo:

src/lib/main.dart

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
    final title = 'GeeksforGeeks';
 
    return MaterialApp(
      home: Scaffold(
          body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            snap: false,
            pinned: false,
            floating: false,
            flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Text("$title",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.0,
                    ) //TextStyle
                    ), //Text
                background: Image.network(
                  "https://i.ibb.co/QpWGK5j/Geeksfor-Geeks.png",
                  fit: BoxFit.cover,
                ) //Images.network
                ), //FlexibleSpaceBar
            expandedHeight: 230,
            backgroundColor: Colors.greenAccent[400],
            leading: IconButton(
              icon: Icon(Icons.menu),
              tooltip: 'Menu',
              onPressed: () {},
            ), //IconButton
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.comment),
                tooltip: 'Comment Icon',
                onPressed: () {},
              ), //IconButton
              IconButton(
                icon: Icon(Icons.settings),
                tooltip: 'Setting Icon',
                onPressed: () {},
              ), //IconButton
            ], //<Widget>[]
          ), //SliverAppBar
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(
                tileColor: (index % 2 == 0) ? Colors.white : Colors.green[50],
                title: Center(
                  child: Text('$index',
                      style: TextStyle(
                          fontWeight: FontWeight.normal,
                          fontSize: 50,
                          color: Colors.greenAccent[400]) //TextStyle
                      ), //Text
                ), //Center
              ), //ListTile
              childCount: 51,
            ), //SliverChildBuildDelegate
          ) //SliverList
        ], //<Widget>[]
      ) //CustonScrollView
          ), //Scaffold
      debugShowCheckedModeBanner:false,
         // Remove debug banner for proper
         // view of setting icon
    ); //MaterialApp
  }
}

Explicación:

Al principio, hemos importado la biblioteca de materiales . Luego tenemos nuestra función principal que llama a la clase MyApp a través del método runApp . Hemos configurado la clase MyApp para que sea un widget sin estado . Luego, con la   compilación Widget (contexto BuildContext) comenzamos a describir la interfaz de usuario de la aplicación. 

 Nuestra MateriaApp comienza con el widget Scaffold . Luego, en el widget CustomScrollView , tenemos la propiedad slivers que toma una lista de widgets y los hace desplazables. Hemos pasado SliverAppBar como el primer niño en el sliver. Las tres primeras propiedades snap, pinned y floating se han hecho falsas para el primer caso. Vamos a usar cinco combinaciones de estas tres propiedades para darle diferentes efectos a nuestra SliverAppBar . En el widget FLexibleSpaceBar hemos pasado el título y la imagen de portada con sus respectivas propiedades. en el líderwidget, tenemos el botón de icono de menú y en el widget de acción , tenemos botones de comentarios y de configuración. 

Todo esto es seguido por el widget SliverList que forma el cuerpo de nuestra aplicación aquí. Contiene 51 mosaicos de lista indexados del 0 al 51.

A continuación, tenemos cinco salidas diferentes para cinco combinaciones diferentes de la propiedad snap , pinned y flotante .

Producción:

Si las propiedades se definen de la siguiente manera:

snap: false;
pinned: false;
floating: false;

Producción:

Si las propiedades se definen de la siguiente manera:

snap: false;
pinned: false;
floating: true;

Producción:

Si las propiedades se definen de la siguiente manera:

snap: false;
pinned: true;
floating: false;

Salida:
si las propiedades se definen de la siguiente manera:

snap: true;
pinned: false;
floating: true;

Producción:

Si las propiedades se definen de la siguiente manera:

snap: true;
pinned: true;
floating: true;