Aleteo – Caída trasera

Andamio que permite usar capa posterior y capa frontal. Use BackdropScaffold en lugar del Scaffold estándar en su aplicación. Se deben definir una capa trasera y una capa frontal para que funcione el fondo.

Empezando 

Agregar complemento en el archivo pubspec.yaml .

dependencies:
  backdrop: ^0.7.1

No te olvides de obtener la dependencia.

Para usar necesitamos importar:

import 'package:backdrop/backdrop.dart';

Caída trasera izquierda simple

 Sintaxis:  

BackdropScaffold(
  leading :   BackdropToggleButton(
              icon: AnimatedIcons.close_menu,
            )
  title : Text("Left Back Drop"),
  backLayer :  // Any widget (ListView,center..)
  frontLayer : // Any widget (ListView,center..)
  )

Ejemplo:

import 'package:flutter/material.dart';
import 'package:backdrop/backdrop.dart';
  
// main method runs the our main app
void main() {
  runApp(SimpleLeftBackDrop());
}
  
class SimpleLeftBackDrop extends StatefulWidget {
  @override
  _SimpleLeftBackDropState createState() => _SimpleLeftBackDropState();
}
  
class _SimpleLeftBackDropState extends State<SimpleLeftBackDrop> {
      
  // initiainitialize the widget
  @override
  void initState(){
    super.initState();
  }
    
  // disposing the widget
  @override
  void dispose(){
    super.dispose();
  }
    
  @override
  Widget build(BuildContext context) {
      
    // MaterialApp with debugShowCheckedModeBanner false and title
    return MaterialApp( 
      title:"Left BackDrop",
      debugShowCheckedModeBanner:false,
        
      // in home property we have BackdropScaffold 
      home:BackdropScaffold( 
          
          // in leading we have a button 
          leading:  BackdropToggleButton(  
              icon: AnimatedIcons.close_menu,
            )
          
          // title of the appbar
          title: Text("Left Backdrop"), 
          backLayer:Center(
            // backlayer body
            child:Text("BackLayer"),  
          ),
          frontLayer:Center(
            // front layer body
            child:Text("BackLayer"), 
          ),
        ),
    );
  }
}

Producción: 

Explicación:

• main es un método principal que se llama una vez que se carga el programa.
• Una vez que se cargue el programa, runApp se ejecutará y llamará a la clase que creamos (SimpleLeftBackDrop) para que se ejecute.
• Esta clase es un widget con estado para detectar la capa activa.
• Primero cree la clase principal SimpleLeftBackDrop y establezca su estado principal.
• En segundo lugar, cree la clase SimpleLeftBackDropState que extienda su estado desde su SimpleLeftBackDrop principal.
• Cuando se abre la página, estamos inicializando su estado.
• Cuando la página está cerrada o eliminada , estamos eliminando su estado.
• Como Flutter se basa en un widget, se debe construir un widget
• Creación de una aplicación de materiales que nos permita usar BackdropScaffold.
• BackdropScaffold se reemplaza por Scaffold .
• icon Position Set To Lead (Empezar desde la izquierda)
• título Establecer el título de la barra de aplicaciones
• BackLayer Mostrar el contenido de BackDrop cuando  se suelta
• La capa frontal es la pantalla principal visible para el usuario.
• Ambas capas aquí tomando un texto centrado .

Caída trasera derecha simple 

Sintaxis: 

BackdropScaffold(
  title : Text("Left Back Drop"),
  backLayer :     // Any widget (ListView,center..)
  frontLayer :  // Any widget (ListView,center..)
  actions : [
   BackDropToogleButton(
     icon : AnimationIcons.close_menu,),
  ],
  )

Ejemplo:

import 'package:flutter/material.dart';
import 'package:backdrop/backdrop.dart';
  
// main method runs the our main app.
void main() {
  runApp(SimpleLeftBackDrop());
}
  
class SimpleLeftBackDrop extends StatefulWidget {
  const SimpleLeftBackDrop({Key? key}) : super(key: key);
  
  @override
  _SimpleLeftBackDropState createState() => _SimpleLeftBackDropState();
}
  
class _SimpleLeftBackDropState extends State<SimpleLeftBackDrop> {
  @override
  void initState() {
    super.initState();
  }
  
  @override
  void dispose() {
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    // MaterialApp with debugShowCheckedModeBanner
    // false and title
    return MaterialApp( 
      title: "Right BackDrop",
      debugShowCheckedModeBanner: false,
        
      // BackdropScaffold with appbar
      home: BackdropScaffold( 
        appBar: AppBar(
            
          // title of appbar
          title: Text("Right Backdrop"), 
            
          // actions button that 
          // will open the backlayer
          actions: [  
            BackdropToggleButton(
              // icon
              icon: AnimatedIcons.close_menu, 
            )
          ],
        ),
          
        // body of backlayer
        backLayer: Center(  
          child: Text("BackLayer"),
        ),
          
        // body of front layer
        frontLayer: Center(  
          child: Text("FrontLayer"),
        ),
      ),
    );
  }
}

Producción:

Explicación:

• main es un método principal que se llama una vez que se carga el programa.
• Una vez que el programa esté cargado , runApp se ejecutará y llamará a la clase que creamos (SimpleRight BackDrop) para que se ejecute.
• Esta clase es un widget con estado para detectar la capa activa.
• Primero cree la clase principal SimpleRight BackDrop y establezca su estado principal.
• En segundo lugar, cree la clase SimpleRight BackDropState que extienda su estado desde su principal SimpleRight BackDrop.
• Cuando se abre una página, estamos inicializando su estado. Cuando una página se cierra o se elimina , estamos eliminando su estado.
• Como Flutter se basa en un widget, se debe crear un widget.
• Creación de una aplicación de materiales que nos permita usar BackdropScaffold .
• BackdropScaffold se reemplaza por Scaffold .
• Ahora, para configurar el ícono a la derecha, usamos acciones (elemento flotante a la derecha) que toman el botón de alternar que abre el menú de fondo.
• title Establece el título de la barra de aplicaciones.
• BackLayer Muestra el contenido de BackDrop cuando se suelta.
• FrontLayer es la pantalla principal visible para el usuario.
• Ambas capas aquí tomando un texto centrado .