Cuando creamos una aplicación Flutter por defecto se crea con toda la configuración necesaria para utilizarla con Material App. MaterialApp no es más que una aplicación que va usar los diseños de Material. En Flutter hay una documentación de todos los componentes que podemos utilizar para crear nuestras aplicaciones de Flutter.
Material App
Flutter proporciona algunos widgets que siguen el estándar de Material Design. Al iniciar nuestra aplicación con un widget MaterialApp tenemos a disposición varios widgets útiles en la raíz de la app, incluyendo un navegador de rutas, para tener un mejor control en la navegación de las pantallas. MaterialApp como vimos en widgets básicos no es necesario, por lo cual es opcional pero Flutter lo recomienda como una buena práctica.
Íconos de Material
Otra opción que tenemos que viene por defecto activaba es la de hacer uso de los íconos de Material, lo cual se puede realizar en el archivo pubspec.yaml en la sección flutter -> uses-material-design: true.
flutter:
uses-material-design: trueLos íconos se utilizan dentro del widget Icon(), el cual recibe un IconData que es básicamente el ícono de Material que seleccionemos. Icon(Icons.home)
Propiedades de Material App
Veremos algunas de las propiedades que tiene el widget MaterialApp, las de mayor relevancia y tal vez las más usadas por los desarrolladores de Flutter.
theme
El tema por defecto de las aplicaciones en Flutter es el de Material 3 en las últimas versiones, antes por defecto estaba el material 2.
Esta propiedad theme, requiere la clase ThemeData, la cual tiene propiedades para cambiar los estilos de los diferentes widgets de la app. Veremos 2 propiedades que cambian todos los estilos de la aplicación.
- useMaterial3 — true es el valor por defecto, false para usar material 2.
- colorScheme — ColorScheme.fromSeed(seedColor: Colors.deepPurple). Esto hace que toda la aplicación tenga una combinación adecuada de colores dada por Material.
home
Esta propiedad recibe un widget, por lo general se utiliza el widget Scaffold. Es el widget inicial de la aplicación.
En el ejemplo veremos el Scaffold dentro de un widget HomePage que extiende de StatefulWidget, lo cual permite modificar el estado con el método setState(), aunque es recomendable usar un manejador de estados. Esto permite que cuando se ejecute un evento no se reinicie los valores de la información que queremos que permanezca.
Scaffold
Es un widget que tiene la estructura visual básica de Material Design. El Scaffold recibe algunos widgets que van en una posición específica de la pantalla para que se acomoden correctamente.
appBar
Es una barra de aplicación que va en la parte superior de la pantalla. La veremos inicialmente sombreada con el color primario del tema. Allí va el título y acciones que se pueden configurar.
- backgroundColor — es el color de fondo que tendrá el appBar.
- leading — Es un widget que va antes del título. Por lo general un ícono con el menú.
- title — Es el título de la pantalla por lo general con el widget Text.
- actions — Es una lista de widgets y por lo general se usa para agregar botones (IconButton).
body
Es todo el contenido que hay en el cuerpo del Scaffold va justo debajo de appBar. Va todos los widgets que se utilizan para cada una de las pantallas.
- puede tener cualquier tipo de widget.
persistentFooterButtons
Son un conjunto de widgets por lo regular botones (TextButton) que se ubican en la parte inferior del Scaffold después del body.
- los TextButton tienen 2 propiedades obligatorias onPressed (que es una Function, para ejecutar un evento o acción) y child (recibe un widget por lo general el Text).
bottomNavigationBar
Esta propiedad también es una barra de aplicación que va debajo del body y el persistentFooterButtons. Allí también se pueden agregar acciones, se usa mucho para pasar entre pantallas.
- Se puede usar el widget BottomNavigationBar que nos Flutter, el cual tiene unos items que son BottomNavigationBarItem que tienen un label y un ícono.
floatingActionButton
Es un widget que por lo general sirve para ejecutar alguna acción, por ejemplo un botón centrado en la parte inferior flotante para ejecutar una acción determinada.
- Hay un widget que se puede usar para esta propiedad FloatingActionButton que funciona como un TextButton con las propiedades onPressed y child.
floatingActionButtonLocation
Esta propiedad permite dar la ubicación exacta donde queremos que se muestre el floatingActionButton. Ya viene con la clase FloatingActionButtonLocation y diferentes tipos de posiciones predefinidas.
Código
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
),
home: const HomePage(title: 'AppBar'),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key, required this.title});
final String title;
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
leading: IconButton(
onPressed: () {},
icon: const Icon(Icons.menu),
),
title: Text(widget.title),
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.add),
),
IconButton(
onPressed: () {},
icon: const Icon(Icons.remove),
),
],
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'Contenido del Body:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
bottomNavigationBar: BottomNavigationBar(
items: const [
BottomNavigationBarItem(
label: 'Inicio',
icon: Icon(Icons.home),
),
BottomNavigationBarItem(
label: 'Lista',
icon: Icon(Icons.list_alt),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
child: const Icon(Icons.add),
),
persistentFooterButtons: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
onPressed: () {},
child: const Text('Botón 1'),
),
TextButton(
onPressed: () {},
child: const Text('Botón 2'),
),
TextButton(
onPressed: () {},
child: const Text('Botón 3'),
),
],
),
],
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
);
}
}
Conclusión
Vimos un ejemplo muy básico de cómo utilizar las opciones que nos brinda Material Design, haciendo énfasis en el MaterialApp y Scaffold.
Siguientes pasos
Seguiremos aprendiendo un poco sobre StatelessWidget y StatefulWidget.