El widget de banner viene integrado con la API de flutter. Es algo similar al banner de depuración que estamos acostumbrados a ver en la esquina superior derecha de una aplicación flutter en modo de depuración. Nos permite mostrar un mensaje o texto encima de cualquier otro widget. A continuación veremos su implementación con la ayuda de un ejemplo y todas sus propiedades.
Constructor de la clase Banner:
const Banner(
{Key key,
Widget child,
@required String message,
TextDirection textDirection,
@required BannerLocation location,
TextDirection layoutDirection,
Color color: _kColor,
TextStyle textStyle: _kTextStyle}
)
Propiedades del widget de banner:
- child: Esta propiedad toma un widget como objeto para colocarlo en el banner.
- color: Esta propiedad asigna un color de fondo al banner tomando como objeto la clase Color .
- layoutDirection: esta propiedad toma la clase TextDirection como el objeto que determina la dirección en la que se colocarán los widgets secundarios en el widget Banner .
- ubicación: esta propiedad controla la ubicación del banner tomando la enumeración BannerLocation como el objeto.
- mensaje: Esta propiedad toma como objeto un valor de String para determinar el texto a mostrar en el banner.
- textDirection: esta propiedad nuevamente toma TextDirection como el objeto para determinar la dirección del texto que puede ser rtl a ltr .
- textStyle: esta propiedad es responsable del estilo del texto en el widget Banner . Toma la clase TexStyle como el objeto.
Ejemplo:
Dart
import 'package:flutter/material.dart';
//Material design library
void main() {
runApp(
//widget tree starts here
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('GeeksforGeeks'),
backgroundColor: Colors.greenAccent[400],
centerTitle: true,
), //AppBar
body: Center(
child: Container(
margin: const EdgeInsets.all(10.0),
child: ClipRect(
/** Banner Widget **/
child: Banner(
message: "20% off !!",
location: BannerLocation.bottomStart,
color: Colors.red,
child: Container(
color: Colors.green[100],
height: 300,
child: Padding(
padding: const EdgeInsets.fromLTRB(10, 20, 10, 20),
child: Column(
children: <Widget>[
Image.network(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190806131525/forkPython.jpg'), //Image.network
const SizedBox(height: 10),
const Text(
'GeeksforGeeks',
style: TextStyle(
color: Colors.green,
fontSize: 40,
fontWeight: FontWeight.bold), //TextStyle
),
const SizedBox(
height: 5,
), //SizedBox
const Text(
'Fork Python Course',
style: TextStyle(
color: Colors.green,
fontSize: 20,
fontWeight: FontWeight.bold), //TextStyle
), //Text
const SizedBox(height: 20),
// RaiseButton is deprecated and should not be used. Use ElevatedButton instead.
// RaisedButton(
// color: Colors.greenAccent[400],
// onPressed: () {},
// child: const Text('Register'),
// ) //RaisedButton
], //<Widget>[]
), //Column
), //Padding
), //Container
), //Banner
), //ClipRect
), //container
), //Center
), //Scaffold
), //MaterialApp
);
}
Producción:
Explicación: en esta aplicación de aleteo, el widget Banner es hijo de la clase ClipRect , que recorta la parte que excede el cuadro. El mensaje en el banner contiene el texto ’20 % de descuento !!’, el color es rojo y la ubicación se establece en bottomStart . El resto de la parte está en manos de la propiedad secundaria del widget Banner . La jerarquía para pasar del widget de pancarta a la columna es Pancarta > Contenedor > Relleno > Columna. Dentro del widget Columna tenemos una lista dewidgets tomados como el objeto de la propiedad de los niños . El primer elemento de la columna es una imagen de Internet, luego tenemos dos widgets de texto y un RaisedButton, todos separados por un widget de SizedBox .
Publicación traducida automáticamente
Artículo escrito por ankit_kumar_ y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA