Flutter – Widget de la barra de aplicaciones

AppBar suele ser el componente superior de la aplicación (o, a veces, el inferior), contiene la barra de herramientas y algunos otros botones de acción comunes. Como todos los componentes de una aplicación flutter son un widget o una combinación de widgets. Por lo tanto, AppBar también es una clase integrada o un widget en flutter que brinda la funcionalidad de AppBar lista para usar . El widget AppBar se basa en Material Design y gran parte de la información ya la proporcionan otras clases como MediaQuery , Scaffold en cuanto a dónde se debe colocar el contenido de AppBar. Aunque la clase AppBar es muy flexible y se puede personalizar fácilmente, también podemos usar elWidget SilverAppBar que brinda funcionalidad desplazable a la barra de la aplicación. O podemos crear nuestra propia barra de aplicaciones personalizada desde cero.

Constructor de la clase AppBar:

AppBar(
{Key key,
Widget leading,
bool automaticallyImplyLeading: true,
Widget title,
List<Widget> actions,
double elevation,
Color shadowColor,
ShapeBorder shape,
Color backgroundColor,
Brightness brightness,
IconThemeData iconTheme,
IconThemeData actionsIconTheme,
TextTheme textTheme,
...}
)

Propiedades clave del widget de la barra de aplicaciones:

• acciones: esta propiedad toma una lista de widgets como un parámetro que se mostrará después del título si AppBar es una fila .
• title: esta propiedad generalmente toma el widget principal como un parámetro para mostrar en la barra de aplicaciones.
• backgroundColor: esta propiedad se usa para agregar colores al fondo de la barra de aplicaciones.
• elevación: Esta propiedad se utiliza para establecer la

Ejemplo 1:

import 'package:flutter/material.dart';
 
void main() {
  runApp(gfgApp()); //MaterialApp
}
 
MaterialApp gfgApp() {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('GeeksforGeeks'),
      ), //AppBar
      body: const Center(
        child: Text(
          'GeeksforGeeks',
          style: TextStyle(fontSize: 24),
        ), //Text
      ), // center
    ), //Scaffold
    debugShowCheckedModeBanner: false, //Removing Debug Banner
  );
}

Producción:

Explicación:

Primero, hemos importado el archivo material.dart tal como lo utiliza el widget AppBar , también haremos lo mismo en los siguientes dos ejemplos. Luego tenemos nuestra función principal llamando a runApp. En la parte superior, tenemos el widget MaterialApp seguido de Scaffold . El widget de MaterialApp proporcionó estilo a AppBar y el widget de Scaffold por defecto coloca el widget de AppBar en la parte superior de la pantalla. Esta es solo la barra de aplicaciones básica y lista para usar proporcionada por flutter. Esta AppBar está utilizando solo la propiedad del título de laClase AppBar , que toma el widget principal para que se muestre en AppBar . En este caso, es un widget  de texto .

En el cuerpo, tenemos un widget de texto secundario dentro del widget central que muestra el texto ‘ GeeksforGeeks ‘, con un tamaño de fuente de 24. Al final, se deshabilitó el banner de depuración. Esto será seguido por los siguientes dos ejemplos a continuación.

Ejemplo 2:

import "package:flutter/material.dart";
 
// function to trigger the build process
void main() {
  runApp(MyApp()); //MaterialApp
}
 
// ignore: non_constant_identifier_names
MaterialApp MyApp() {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("GeeksforGeeks"),
        titleSpacing: 00.0,
        centerTitle: true,
        toolbarHeight: 60.2,
        toolbarOpacity: 0.8,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              bottomRight: Radius.circular(25),
              bottomLeft: Radius.circular(25)),
        ),
        elevation: 0.00,
        backgroundColor: Colors.greenAccent[400],
      ), //AppBar
      body: const Center(
        child: Text(
          'GeeksforGeeks',
          style: TextStyle(fontSize: 24),
        ),
      ), //Center
    ), //Scaffold
    debugShowCheckedModeBanner: false, //Removing Debug Banner
  );
}

Producción:

 

Explicación:

Aquí, el widget AppBar utiliza siete propiedades en total. Comienza con el título ‘GeeksforGeeks’. El segundo es el espacio entre títulos que toma double como parámetro y, en este caso, se establece en 00.0 para mantener el texto cerca. La tercera propiedad es centerTitle , que toma valor booleano como parámetro y se establece aquí como verdadero. La cuarta propiedad es toolbarHeight que también toma double como parámetro. Esta propiedad proporciona una sombra debajo de la barra de aplicaciones que, a su vez, la hace parecer elevada. toolBarOpacity es responsable de controlar la opacidad de la parte de la barra de herramientas de la barra de aplicaciones. Toma un valor doble como parámetro donde 1.0 es la opacidad máxima y 0.0 es la transparencia total. La quinta propiedad es la forma , se utiliza para dar una forma diferente a la barra de aplicaciones modificando el borde de la barra de aplicaciones. Dentro de la propiedad de forma , hemos utilizado borderRadius para hacer que los bordes inferiores de la barra de aplicaciones se redondeen en un ángulo de 25 grados. La sexta propiedad es la elevación , define las coordenadas z en las que se colocará la barra de aplicaciones con respecto a su elemento principal. . También toma el doble como parámetro. Y el último es el backgroundColor que controla el color de fondo de la AppBar, en este caso tenemos la firma geeksforgeeks greenAccect.

Ejemplo 3:

import "package:flutter/material.dart";
import 'package:flutter/services.dart';
 
void main() {
  runApp(gfgApp()); //MaterialApp
}
 
MaterialApp gfgApp() {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("GeeksforGeeks"),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.comment),
            tooltip: 'Comment Icon',
            onPressed: () {},
          ), //IconButton
          IconButton(
            icon: const Icon(Icons.settings),
            tooltip: 'Setting Icon',
            onPressed: () {},
          ), //IconButton
        ], //<Widget>[]
        backgroundColor: Colors.greenAccent[400],
        elevation: 50.0,
        leading: IconButton(
          icon: const Icon(Icons.menu),
          tooltip: 'Menu Icon',
          onPressed: () {},
        ),
        systemOverlayStyle: SystemUiOverlayStyle.light,
      ), //AppBar
      body: const Center(
        child: Text(
          "Geeksforgeeks",
          style: TextStyle(fontSize: 24),
        ), //Text
      ), //Center
    ), //Scaffold
    debugShowCheckedModeBanner: false, //Removing Debug Banner
  );
}

Producción:

Explicación:

Aquí podemos ver que además del título en la App Bar tenemos tres íconos más en la AppBar, uno a la izquierda y dos a la derecha del título. Este widget de AppBar comienza con la propiedad de título habitual que toma el widget de texto como parámetro. El título es seguido por la propiedad de acción que toma una lista de widgets como un parámetro que se mostrará después del título si AppBar es una fila. En este caso, podemos ver los dos iconos, a saber, el comentario y la configuración. Estos dos íconos son   widgets de IconsButton , que utilizan tres propiedades, a saber , icon , tooltip y onPressed function. El onPressedLa función no se especifica en ninguno de los IconButton, por lo que es nula. La propiedad del icono toma una string como parámetro que es el nombre del ícono específico. La propiedad de información sobre herramientas también toma una string como el parámetro que se muestra en una etiqueta flotante, mientras se desplaza con el mouse o se mantiene presionado. En el primer IconButton tenemos Icons.comment & Comment Icon y en el segundo IconButton tenemos Icons.setting & Setting Icon como parámetro para el icono y la información sobre herramientas respectivamente. Ahora, todo esto se sigue pero el color de fondo y la elevación .se establecen en Colors.greenAccent[400] y 50.0 respectivamente. Después de eso, tenemos la propiedad principal que toma un widget como parámetro, para mostrarse antes del título en la AppBar . En este caso, el encabezado también es un IconButton , que muestra un ícono de menú. La propiedad onPressed no se menciona y la propiedad de información sobre herramientas recibe un parámetro de string ‘Icono de menú’. Y el cuerpo es similar al primer y segundo ejemplo.