Clase Scaffold en Flutter con ejemplos

Scaffold es una clase en flutter que proporciona muchos widgets o podemos decir API como Drawer, SnackBar, BottomNavigationBar, FloatingActionButton, AppBar, etc. Scaffold se expandirá u ocupará toda la pantalla del dispositivo. Ocupará el espacio disponible. Scaffold proporcionará un marco para implementar el diseño de material básico de la aplicación. 

La jerarquía de clases es la siguiente:

Object
 ↳ Diagnosticable
   ↳ Diagnosticable Tree
     ↳ Widget
       ↳ StateFul Widget
         ↳ Scaffold

Constructor de la clase Scaffold: 

const Scaffold({
    Key key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.drawer,
    this.endDrawer,
    this.bottomNavigationBar,
    this.bottomSheet,
    this.backgroundColor,
    this.resizeToAvoidBottomPadding,
    this.resizeToAvoidBottomInset,
    this.primary = true,
    this.drawerDragStartBehavior
          = DragStartBehavior.start,
    this.extendBody = false,
    this.drawerScrimColor,
})

Propiedades de la clase Scaffold:  

• appBar: muestra una barra horizontal que se coloca principalmente en la parte superior del andamio . appBar usa el widget AppBar que tiene sus propias propiedades como elevación, título, brillo, etc. 

Widget build(BuildContext context)
{
  return Scaffold(
    appBar: AppBar(
      title: const Text('GeeksforGeeks'),
    ),

Producción: 

• body: Mostrará el contenido principal o primario en el Scaffold. Está debajo de la barra de aplicaciones y debajo del botón de acción flotante . Los widgets dentro del cuerpo están en la esquina izquierda por defecto. 

Ejemplo:

Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: const Text('GeeksforGeeks')),
     body: const Center(
       child: Text(
         "Welcome to GeeksforGeeks!!!",
         style: TextStyle(
           color: Colors.black,
           fontSize: 40.0,
         ),
       ),
     ),
   );
 }

En este ejemplo, hemos mostrado el texto ¡Bienvenido a GeeksforGeeks! en el cuerpo. Hemos mostrado el texto en el centro de la página usando el widget Center . Para diseñar el texto, hemos utilizado el widget TextStyle .  

• Botón de acción flotante: el botón de acción flotante es un botón que se coloca en la esquina inferior derecha de forma predeterminada. FloatingActionButton es un botón de icono que flota sobre el contenido de la pantalla en un lugar fijo. Si desplazamos la página su posición no cambiará, se arreglará.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('GeeksforGeeks')),
    body: const Center(
      child: Text(
        "Welcome to GeeksforGeeks!!!",
        style: TextStyle(
          color: Colors.black,
          fontSize: 40.0,
        ),
      ),
    ),
    floatingActionButton: FloatingActionButton(
      elevation: 10.0,
      child: const Icon(Icons.add),
      onPressed: () {
        // action on button press
      },
    ),
  );
}

Aquí la propiedad de elevación se usa para dar un efecto de sombra al botón. Icon se usa para poner el ícono del botón usando algunos íconos precargados en flutter SDK. onPressed () es una función que se llamará cuando se presione el botón y se ejecutarán las declaraciones dentro de la función.  

• cajón: el cajón es un menú deslizante o un panel que se muestra en el lateral de Scaffold. El usuario tiene que deslizar el dedo de izquierda a derecha o de derecha a izquierda según la acción definida para acceder al menú del cajón. En la barra de aplicaciones, un ícono apropiado para el cajón se establece automáticamente en una posición particular. El gesto para abrir el cajón también se configura automáticamente. Es manejado por el Andamio. 

Ejemplo:

drawer: Drawer(
  child: ListView(
    children: const <Widget>[
      DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.green,
        ),
        child: Text(
          'GeeksforGeeks',
          style: TextStyle(
            color: Colors.green,
            fontSize: 24,
          ),
        ),
      ),
      ListTile(
        title: Text('Item 1'),
      ),
      ListTile(
        title: Text('Item 2'),
      ),
    ],
  ),
),

Como widget principal, tomamos ListView y, dentro de él, dividimos el panel en dos partes, Encabezado y Menú. DrawerHeader se utiliza para modificar el encabezado del panel. En el encabezado podemos mostrar el icono o los detalles del usuario según la aplicación. Hemos usado ListTile para agregar los elementos al menú. 

Producción:  

También podemos agregar íconos antes de los elementos usando la propiedad principal de ListTile , dentro de la cual tenemos que usar el widget  Icon .

Ejemplo:  

ListTile(
    title
    : Text('Item 1'),
      leading
    : Icon(Icons.people), ),
    ListTile(
        title
        : Text('Item 2'),
          leading
        : Icon(Icons.mail), ),

Producción:

• bottomNavigationBar: bottomNavigationBar es como un menú en la parte inferior de Scaffold. Hemos visto esta barra de navegación en la mayoría de las aplicaciones. Podemos añadir múltiples iconos o textos o ambos en la barra como elementos. 

bottomNavigationBar: BottomNavigationBar(
        currentIndex: 0,
        fixedColor: Colors.green,
        items: const [
          BottomNavigationBarItem(
            label: "Home",
            icon: Icon(Icons.home),
          ),
          BottomNavigationBarItem(
            label: "Search",
            icon: Icon(Icons.search),
          ),
          BottomNavigationBarItem(
            label: "Profile",
            icon: Icon(Icons.account_circle),
          ),
        ],
        onTap: (int indexOfItem) {}),

Usamos el widget BottomNavigationBar para mostrar la barra. Para el color del ícono activo, usamos la propiedad fixedColor . Para agregar elementos en la barra, usamos el widget BottomNavigationBarItems , dentro del cual le damos texto e icono. Para la acción realizada al tocar los elementos, tenemos la función onTap (int indexOfItem) que funciona de acuerdo con la posición de índice del elemento. 

Producción:

código completo

drawer: Drawer(
  child: ListView(
    children: const <Widget>[
      DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.green,
        ),
        child: Text(
          'GeeksforGeeks',
          style: TextStyle(
            color: Colors.green,
            fontSize: 24,
          ),
        ),
      ),
      ListTile(
        title: Text('Item 1'),
      ),
      ListTile(
        title: Text('Item 2'),
      ),
    ],
  ),
),

• backgroundColor: se usa para establecer el color de todo el widget Scaffold .
• floatActionButtonAnimator: se utiliza para proporcionar animación para mover el botón de acción flotante .
• primario: para saber si el Scaffold se mostrará o no.
• cajónScrimColor: se utiliza para definir el color del contenido principal mientras un cajón está abierto.
• bottomSheet : esta propiedad toma un widget (final) como objeto para mostrarlo en la parte inferior de la pantalla.
• cajónDragStartBehaviour : esta propiedad contiene la enumeración DragStartBehavior como el objeto para determinar el comportamiento de arrastre del cajón.
• cajónEdgeDragWidth : Esto determina el área bajo la cual un deslizamiento o un arrastre resultará en la apertura del cajón. Y toma un doble como el objeto.
• DrawerEnableOpenGesture : esta propiedad se mantiene en un valor booleano ya que el objeto para determinar el gesto de arrastre abrirá el cajón o no, por defecto se establece en verdadero.
• endDrawer : la propiedad endDrawer toma un widget como parámetro. Es similar al Cajón, excepto que se abre en la dirección opuesta.
• endDrawerEnableOpenGesture : Nuevamente, esta propiedad toma un valor booleano como objeto para determinar si el gesto de arrastrar abrirá el endDrawer o no.
• extendBody : la propiedad extendBody toma un booleano como objeto. De forma predeterminada, esta propiedad siempre es falsa, pero no debe ser nula. Si se establece en verdadero en presencia de bottomNavigationBar o persistenteFooterButtons , la altura de estos se agrega al cuerpo y se desplazan debajo del cuerpo.
• extendBodyBehindAppBar : esta propiedad también acepta un booleano como objeto. De forma predeterminada, esta propiedad siempre es falsa, pero no debe ser nula. Si se establece en verdadero, la barra de aplicaciones , en lugar de estar en el cuerpo, se extiende por encima y su altura se agrega al cuerpo. Esta propiedad se usa cuando el color de la barra de aplicaciones no es totalmente opaco.
• floatActionButtonLocation : esta propiedad es responsable de la ubicación de floatingActionBotton .
• persistenteFooterButton : esta propiedad incluye una lista de widgets. Que por lo general son botones que se muestran debajo del andamio .
• resizeToAvoidBottomInsets : esta propiedad toma un valor booleano como objeto. Si se establece en verdadero, los widgets flotantes en el andamio se redimensionan para evitar interferir con el teclado en pantalla.