Clase Scaffold en Flutter

Scaffold es una clase de Flutter que proporciona muchos widgets o podemos decir API como Drawer, SnackBar, BottomNavigationBar, FloatingActionButton, AppBar, etc. Scaffold 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.

Jerarquía de clases:

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 Scaffold. appBar usa el widget AppBar que tiene sus propias propiedades como elevación, título, brillo, etc.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// ignore: use_key_in_widget_constructors
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:
      Scaffold(appBar:
      AppBar(title:
      const Text("BigCode"),
        ),),);}}

body

Mostrará el contenido principal o principal en el Scaffold. Está debajo de appBar y debajo de floatingActionButton. Los widgets dentro del cuerpo están en la esquina izquierda de forma predeterminada. En este ejemplo, hemos mostrado el texto ¡¡¡Bienvenido a BigCode !!! 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 .

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// ignore: use_key_in_widget_constructors
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:
      Scaffold(appBar:
      AppBar(title:
      const Text("BigCode"),
        ),
        body: const Center(child: Text("¨ Bienvenidos a BigCode ¨",
          style: TextStyle(color: Colors.black, fontSize: 45),),),
      ),);}}

floatingActionButton

FloatingActionButton 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á. Aquí, la propiedad de elevación se usa para dar un efecto de sombra al botón. El icono se usa para poner el icono del botón usando algunos iconos precargados en el SDK de flutter. El onPressed () es una función que se llamará cuando se pulsa el botón y se ejecutarán las sentencias dentro de la función.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// ignore: use_key_in_widget_constructors
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:
      Scaffold(
        appBar: AppBar(title: const Text("BigCode"),),
        floatingActionButton: FloatingActionButton(
          elevation: 10.0,
          child: const Icon(Icons.add),
        onPressed: (){
            // action on button press
        },),
        body: const Center(child: Text("¨ Bienvenidos a BigCode ¨",
          style: TextStyle(color: Colors.green, fontSize: 45),),),
      ),);}}

Propiedades de clase scaffold floatingActionButton

drawer

Drawer es un menú deslizante o un panel que se muestra al costado del andamio. 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 icono apropiado para el drawer 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 scaffold.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// ignore: use_key_in_widget_constructors
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:
      Scaffold(
        appBar: AppBar(title: const Text("BigCode"),),
        floatingActionButton: FloatingActionButton(
          elevation: 10.0,
          child: const Icon(Icons.add),
        onPressed: (){
            // action on button press
        },),
        drawer: Drawer(
          child: ListView(
            children: const <Widget>[
              DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blueAccent,
                ), child: Text("Code",
                style: TextStyle(color: Colors.black, fontSize: 24,),
              ), ),
              ListTile(
                title: Text("Item 1"),
              ),
              ListTile(
                title: Text("Item 2"),
              ),
              ListTile(
                title: Text("Item 3"),
              ),
              ListTile(
                title: Text("Item 4"),
              ),],),),
        body: const Center(child: Text("¨ Bienvenidos a BigCode ¨",
          style: TextStyle(color: Colors.green, fontSize: 45),),),
      ),);}}

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 icono o detalles de usuario según la aplicación. Hemos utilizado ListTile para agregar elementos al menú. También podemos agregar íconos antes de los elementos usando la propiedad líder de ListTile, dentro de la cual tenemos que usar el widget Icon.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// ignore: use_key_in_widget_constructors
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:
      Scaffold(
        appBar: AppBar(title: const Text("BigCode"),),
        floatingActionButton: FloatingActionButton(
          elevation: 10.0,
          child: const Icon(Icons.add),
        onPressed: (){
            // action on button press
        },),
        drawer: Drawer(
          child: ListView(
            children: const <Widget>[
              DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blueAccent,
                ), child: Text("Code",
                style: TextStyle(color: Colors.black, fontSize: 24,),
              ),),
              ListTile(
                title: Text("Item 1"),
                leading: Icon(Icons.people),
              ),
              ListTile(
                title: Text("Item 2"),
                leading: Icon(Icons.mail),
              ),
              ListTile(
                title: Text("Item 3"),
                leading: Icon(Icons.phone),
              ),
              ListTile(
                title: Text("Item 4"),
                leading: Icon(Icons.note),
              ),],),),
        body: const Center(child: Text("¨ Bienvenidos a BigCode ¨",
          style: TextStyle(color: Colors.green, fontSize: 45),),),
      ),);}}

bottomNavigationBar

El bottomNavigationBar es como un menú en la parte inferior del Scaffold. Hemos visto esta barra de navegación en la mayoría de las aplicaciones. Podemos agregar múltiples íconos o textos o ambos en la barra como elementos.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// ignore: use_key_in_widget_constructors
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:
      Scaffold(
        appBar: AppBar(title: const Text("BigCode"),),
        bottomNavigationBar: 
        BottomNavigationBar(currentIndex: 0,fixedColor: Colors.green, iconSize: 65, selectedFontSize: 30, unselectedFontSize: 20,
          items: const [
            BottomNavigationBarItem(title: Text("Home"),icon: Icon(Icons.home),),
            BottomNavigationBarItem(title: Text("Search"),icon: Icon(Icons.search),),
            BottomNavigationBarItem(title: Text("Profile"),icon: Icon(Icons.account_circle)),
          ],),
        floatingActionButton: FloatingActionButton(
          elevation: 10.0,
          child: const Icon(Icons.add),
        onPressed: (){
            // action on button press
        },),
        drawer: Drawer(
          child: ListView(
            children: const <Widget>[
              DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blueAccent,
                ), child: Text("Code",
                style: TextStyle(color: Colors.black, fontSize: 24,),
              ),),
              ListTile(
                title: Text("Item 1"),
                leading: Icon(Icons.people),
              ),
              ListTile(
                title: Text("Item 2"),
                leading: Icon(Icons.mail),
              ),
              ListTile(
                title: Text("Item 3"),
                leading: Icon(Icons.phone),
              ),
              ListTile(
                title: Text("Item 4"),
                leading: Icon(Icons.note),
              ),],),),
        body: const Center(child: Text("¨ Bienvenidos a BigCode ¨",
          style: TextStyle(color: Colors.green, fontSize: 45),),),
      ),);}}

Otras propiedades

backgroundColor: se utiliza para establecer el color de todo el widget Scaffold .
floatingActionButtonAnimator: se utiliza para proporcionar animación para mover floatingActionButton .
primary: para indicar si el scaffold se mostrará o no.
drawerScrimColor: se utiliza para definir el color del contenido principal mientras un cajón está abierto.
bottomSheet : esta propiedad toma un widget (final) como el objeto para mostrarlo en la parte inferior de la pantalla.
drawerDragStartBehaviour : esta propiedad contiene la enumeración DragStartBehaviour como el objeto para determinar el comportamiento de arrastre del cajón.
drawerEdgeDragWidth : Esto determina el área bajo la cual un deslizamiento o un arrastre resultará en la apertura del cajón. Y toma un doble como objeto.
drawerEnableOpenGesture : esta propiedad se mantiene en un valor booleano ya que el objeto para determinar que el gesto de arrastre abrirá el cajón o no, por defecto está establecido en true.
endDrawer : la propiedad endDrawer toma un widget como parámetro. Es similar al cajón, excepto por el hecho de que se abre en la dirección opuesta.
endDrawerEnableOpenGesture : nuevamente, esta propiedad toma un valor booleano como el objeto para determinar si el gesto de arrastre 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 true en presencia de bottomNavigationBar o persistentFooterButtons , la altura de estos se agrega al cuerpo y se desplazan debajo del cuerpo.
extendBodyBehindAppBar : esta propiedad también toma 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 completamente opaco.
floatingActionButtonLocation : esta propiedad es responsable de la ubicación de floatingActionBotton .
persistentFooterButton : esta propiedad incluye una lista de widgets. Normalmente 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 scaffold se redimensionan para evitar interferir con el teclado en pantalla.

https://www.geeksforgeeks.org/scaffold-class-in-flutter-with-examples/?ref=lbp

Jerarquía de clases:

Constructor de la clase Scaffold:

Propiedades de la clase Scaffold:

appBar

body

floatingActionButton

drawer

bottomNavigationBar

Otras propiedades

Deja un comentario Cancelar la respuesta