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. Aproximadamente todas las aplicaciones móviles tienen AppBar , lo que hace que la aplicación funcione bien. En este artículo, veremos Gradient AppBar y cubriremos el siguiente contenido.
- Barra de aplicaciones de luz simple
- Barra de aplicaciones oscura simple
- AppBar fondo amarillo con texto rojo
- Fondo degradado de la barra de aplicaciones
- AppBar Fondo gris centrado Texto índigo con el icono de la izquierda
- AppBar con iconos laterales izquierdo y derecho
- AppBar con iconos dobles en los lados
- Tamaño preferido de AppBar
Barra de aplicaciones de luz simple
Cambia el color de fondo principal a la luz.
Código
Dart
import 'package:flutter/material.dart';
void main() => runApp(SimpleAppBarLightRun());
// stateless widget
class SimpleAppBarLightRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
// MaterialApp
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.light(),
// scaffold
home: Scaffold(
// appbar with title property
appBar: AppBar(
title: Text('App Bar'),
),
),
);
}
}
Producción:
barra de aplicaciones de luz
Barra de aplicaciones oscura simple
En MaterialApp, haga que el tema sea Oscuro, cambie el color de fondo principal a oscuro.
Código
Dart
import 'package:flutter/material.dart';
void main() => runApp(SimpleAppBarLightRun());
class SimpleAppBarLightRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.dark(),
home: Scaffold(
appBar: AppBar(
title: Text('App Bar'),
),
),
);
}
}
Producción:
barra de aplicaciones oscura
AppBar fondo amarillo con texto rojo
Todavía puede diseñar la barra de aplicaciones y aplicar el texto deseado y el color de fondo. Podemos dar backgroundColor en la AppBar . Y en la propiedad de estilo del texto, podemos cambiar el color del texto.
Código
Dart
import 'package:flutter/material.dart';
void main() => runApp(SimpleAppBarLightRun());
class SimpleAppBarLightRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.dark(),
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.yellow,
title: Text('App Bar',style: TextStyle(color: Colors.red),),
),
),
);
}
}
Producción:
barra de aplicaciones amarilla con título rojo
Fondo degradado de la barra de aplicaciones
Todavía puede diseñar la barra de aplicaciones usando el widget de degradado. Siguiendo el código de abajo.
Código
Dart
import 'package:flutter/material.dart';
void main() => runApp(GradientAppBarRun());
// stateless widget
class GradientAppBarRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
// returning MaterialApp
return MaterialApp (
debugShowCheckedModeBanner: false,
theme: ThemeData.light (),
home:
// scaffold
Scaffold (
body:
CustomScrollView (
slivers: <Widget>[
// silverappbar for gradient widget
SliverAppBar (
pinned: true,
expandedHeight: 50,
flexibleSpace: Container (
decoration: BoxDecoration (
// LinearGradient
gradient: LinearGradient (
// colors for gradient
colors: [
Colors.deepPurpleAccent,
Colors.yellowAccent,
],
),
),
),
// title of appbar
title: Text ("Gradiant AppBar!"),
),
SliverList (
delegate: SliverChildListDelegate ([
// Body Element
],
),
),
],
),
),
);
}
}
Producción:
barra de aplicaciones de degradado
AppBar Fondo gris centrado Texto índigo con icono izquierdo
Puede agregar un ícono izquierdo a la barra de aplicaciones usando la propiedad principal de la barra de aplicaciones.
Dart
import 'package:flutter/material.dart';
void main() => runApp(AppBarLeftIconRun());
// stateless widget
class AppBarLeftIconRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
// MaterialApp
return MaterialApp(
debugShowCheckedModeBanner: false,
// scaffold
home: Scaffold(
// appbar with center text true
appBar: AppBar(
centerTitle: true,
// leading icon
leading: new Icon(Icons.ac_unit),
// text in the center of the text
title: Text(
'LeftIcon' ,
textDirection : TextDirection.ltr,
style: TextStyle(
// text color
color: Colors.indigo,
),
),
// background of the appbar
backgroundColor: Colors.grey,
),
),
);
}
}
Producción:
Icono izquierdo
AppBar con íconos laterales izquierdo y derecho
También puede agregar el ícono en el lado derecho de AppBar, usando la propiedad de acciones de AppBar.
Dart
import 'package:flutter/material.dart';
void main() => runApp(AppBarLeftIconRun());
// stateless widget
class AppBarLeftIconRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
// MaterialApp
return MaterialApp(
debugShowCheckedModeBanner: false,
// scaffold
home: Scaffold(
// appbar with center text true
appBar: AppBar(
centerTitle: true,
leading: IconButton(
onpressed:(){},
// leading icon
icon:Icon(Icons.account),
),
actions:[
// actions property for right side econs
IconButton(
onpressed:(){},
icon:Icon(Icons.account),
],
// text in the center of the text.
title: Text(
'<--Icon-->' ,
textDirection : TextDirection.ltr,
style: TextStyle(
// text color
color: Colors.indigo,
),
),
// background of the appbar
backgroundColor: Colors.grey,
),
),
);
}
}
Producción:
Icono de izquierda y derecha
AppBar con iconos dobles en los lados
Puede agregar varios iconos en la barra de aplicaciones. Al liderar , usamos la fila para múltiples íconos, pero las acciones pueden tomar varios niños.
Dart
import 'package:flutter/material.dart';
void main() => runApp(AppBarDoubleSideIconsRun());
// stateless widget
class AppBarDoubleSideIconsRun extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.light(),
// scaffold
home: Scaffold(
// appbar
appBar:AppBar(
leading: Padding(
padding: EdgeInsets.only(left: 2),
// row is using for multiple icons
child: Row(
children: <Widget>[
IconButton(
onPressed:(){},
icon: Icon(Icons.account_circle),
),
Expanded(
child: IconButton(
onPressed:(){},
icon:
Icon(Icons.account_circle),
),
),
],
),
),
title: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
Text('<--Icons-->'),
],
),
// actions widget
actions: <Widget>[
IconButton(
onPressed:(){},
icon: Icon(Icons.account_circle),
),
IconButton(
onPressed:(){},
icon: Icon(Icons.account_circle),
),
],
),
),
);
}
}
Producción:
Lados de doble icono
Tamaño preferido de AppBar
Usando el widget PrefferedSize podemos dar el tamaño de la barra de aplicaciones.
Dart
import 'package:flutter/material.dart';
void main() => runApp(AppBarSize());
// stateless widget
class AppBarSize extends StatelessWidget {
@override
Widget build(BuildContext context) {
// MaterialApp
return MaterialApp(
debugShowCheckedModeBanner: false,
// scaffold
home: Scaffold(
// preferredSize widget
appBar: PreferredSize(
preferredSize:Size.fromHeight(150.0),
child:AppBar(
flexibleSpace:Center(
child:Text('AppBar With Height 150'),
),
),
)
),
);
}
}
Producción:
barra de la aplicación Tamaño Preferido