Widget endDrawer en Flutter

El endDrawer es el panel que se muestra al costado del cuerpo (Scaffold Widget). Generalmente está oculto en los dispositivos móviles. Podemos abrirlo deslizando el dedo de derecha a izquierda, o podemos personalizarlo para que se abra al presionar un ícono o un botón. Este widget es similar al widget Drawer ya presente en flutter, excepto por el hecho de que el Drawer se abre de forma predeterminada de izquierda a derecha y el EndDrawer se abre de forma predeterminada de derecha a izquierda. Sin embargo, esta dirección se puede cambiar usando la propiedad textDirection

Constructor de la clase Cajón:

Drawer({Key key,
double elevation, 
Widget child, 
String semanticLabel})




Propiedades de cajón final:

  • child : esta propiedad toma un widget como parámetro para mostrar debajo del widget endDrawer en el árbol.
  • hashCode : esta propiedad toma un int como parámetro. El código hash representa el estado del objeto que afecta operator== compare .
  • elevación : esta propiedad toma un valor doble como parámetro para controlar la coordenada z en la que colocar este cajón en relación con su padre.
  • semanticLabel : esta propiedad toma un valor de string como parámetro para crear la etiqueta semántica del cuadro de diálogo que utilizan los marcos de accesibilidad para anunciar las transiciones de pantalla cuando se abre y se cierra el cajón.

Implementación con ejemplo :

dardo principal

Dart

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
   
  // This widget is the
  // root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text("GeeksforGeeks")
,
        backgroundColor: Colors.green,
      ),
      endDrawer: Drawer(
        child: ListView.builder(
          itemBuilder: (
            BuildContext context,int index){
          return ListTile(
            leading:Icon(Icons.list),
            title: Text("GFG item $index"),
            trailing: Icon(Icons.done),
          );
        }),
        //elevation: 20.0,
        //semanticLabel: 'endDrawer',
      ),
    );
  }
}

Explicación:

  • Creamos un Scaffold que contiene una AppBar y un Cajón .
  • Agreguemos el cajón final en nuestra aplicación. Child of Drawer es ListView.builder para construir la lista de elementos.
  • Cree una lista de elementos como se muestra arriba en el código.
  • Ejecute la aplicación y vea el resultado.

Producción:

enddrawer wiget in flutterend

Publicación traducida automáticamente

Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *