Flutter – Widget de banner de material

En este artículo, aprenderemos sobre una nueva función llamada Material Banner , que es una nueva función en flutter y se lanzó en la versión 2.5.0 de flutter.

¿Qué es Banner Material?

Un banner muestra un mensaje importante y le pide al usuario que realice alguna acción. El banner se muestra en la parte superior de la pantalla debajo de la barra de aplicaciones. Son persistentes, lo que permite a los usuarios ignorarlos o realizar alguna acción.

Puntos a tener en cuenta:

• Un contenedor de banner tiene forma rectangular y extiende el widget completo.
• Este contenedor tiene un ícono principal, texto y botones de acción.
• Un banner puede contener dos botones de texto con el botón de acción de descartar a la izquierda y el botón de acción de confirmación a la derecha.

Ahora veamos cómo se implementa el widget de banner de material en una aplicación flutter: 

Paso 1: verifica la versión de flutter yendo a la terminal y ejecuta el comando flutter –version. La razón para hacer esto es que el widget de banner de material se introdujo en la versión 2.5.0, por lo que para usar este widget necesitamos la última versión. 

Si su versión es inferior a 2.5.0, vaya a la terminal y ejecute el comando flutter upgrade . Tu versión de flutter se actualizará.

Paso 2: ahora veamos cómo usar esta función cambiando directamente a nuestros editores de código.

import 'package:flutter/material.dart';
  
void main() {
  runApp(const MyApp());
}
  
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
    
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
         
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key,}) : super(key: key);
  
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State<MyHomePage> {
    
  
  @override
  Widget build(BuildContext context) {
      
    return Scaffold(
      appBar: AppBar(
          
        title: const Text('GeeksforGeeks'),
        centerTitle: true,
      ),
      body: Center(
          
        child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
          children:  [
            ElevatedButton(onPressed: () => showMaterialBanner(),
                           child: const Text('Material Banner'))
              
          ],
        ),
      ),
         
    );
    }
    // Material Banner implementation
    showMaterialBanner(){
       ScaffoldMessenger.of(context).showMaterialBanner(
         MaterialBanner(
          content: const Text('Hello, I am Material Banner!'), 
         contentTextStyle: const TextStyle(color: Colors.black ,fontSize: 30),
         backgroundColor: Colors.yellow,
         leadingPadding: const EdgeInsets.only(right: 30),
         leading: const Icon(Icons.info, size: 32,),
         actions:[
           TextButton(onPressed: () {},
             
           child: const Text('Dismiss')),
  
           TextButton(onPressed: (){}, child: const Text('Continue')),
  
             
         ])
         );
    }
}

Producción:

Explicación:  

• Para crear un banner hemos creado un botón elevado y ese botón elevado llama al método showMaterialBanner().
• En este método showMaterialBanner() , hemos llamado al banner de material usando scaffold messenger para usar la función de banner de material.

•  Después de llamar a la función, implementamos las propiedades que contiene el banner de material: contenido , color de fondo , ícono principal , botones de acción y relleno.
• A medida que ejecutamos el programa, vemos que al hacer clic en el botón Banner de material, vemos un banner de material en la parte superior de color amarillo . 

Paso 3: ahora, si queremos descartar nuestro banner de material desde la parte superior, tuvimos que darle funcionalidad a nuestro botón de acción. Así que en nuestro botón de acción de descartar le dimos la propiedad a nuestro método onPressed: hideCurrentMaterialBanner.

Código fuente completo:

import 'package:flutter/material.dart';
  
void main() {
  runApp(const MyApp());
}
  
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
    
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
         
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key,}) : super(key: key);
  
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State<MyHomePage> {
    
  
  @override
  Widget build(BuildContext context) {
      
    return Scaffold(
      appBar: AppBar(
          
        title: const Text('GeeksforGeeks'),
        centerTitle: true,
      ),
      body: Center(
          
        child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
          children:  [
            ElevatedButton(onPressed: () => showMaterialBanner(),
                           child: const Text('Material Banner'))
              
          ],
        ),
      ),
         
    );
    }
    showMaterialBanner(){
       ScaffoldMessenger.of(context).showMaterialBanner(
         MaterialBanner(
          content: const Text('Hello, I am Material Banner!'), 
         contentTextStyle: const TextStyle(color: Colors.black ,fontSize: 30),
         backgroundColor: Colors.yellow,
         leadingPadding: const EdgeInsets.only(right: 30),
         leading: const Icon(Icons.info, size: 32,),
         actions:[
           TextButton(onPressed: () => ScaffoldMessenger.of(context).hideCurrentMaterialBanner(),
             
           child: const Text('Dismiss')),
  
           TextButton(onPressed: (){}, child: const Text('Continue')),
  
             
         ])
         );
    }
}

Producción: 

Explicación:

• Al hacer clic en el botón Banner de material , vemos un banner de material en la parte superior . 
• Para eliminar ese banner, hacemos clic en el botón de descartar y el banner se descarta desde la parte superior.