Apps basadas en Material Design

| |

El Material Design es un sistema de diseño desarrollado por Google que establece un conjunto de principios y componentes, con el objetivo de facilitar la creación de productos digitales con estilo, marca bien definida, interacción y movimiento. No pinta mal, ¿no?

Los Material Components de Flutter son una biblioteca de componentes basados en los principios del Material Design, que crean una experiencia de usuario consistente que se adapta a todas las aplicaciones y plataformas. 

Para crear apps basadas en Material Design, Flutter utiliza los componentes de la librería Material. En concreto, dentro de esta librería está el widget MaterialApp, que ya directamente encapsula varios widgets, creando una estructura orientada a Material Design. 

A medida que evoluciona el sistema de Material Design, estos componentes se actualizan para garantizar una implementación consistente y perfecta en píxeles, cumpliendo con los estándares de desarrollo de front-end de Google. 

¿Cómo se utilizan los Material Components en Flutter?

Para poder usarlos, es necesario importar la librería Material al principio del script:

import 'package:flutter/material.dart';

Una vez importada esta librería, ya se puede utilizar, por ejemplo, el widget MaterialApp que se encuentra dentro de ella. Para ello, es necesario crear una nueva instancia de este widget y pasársela al método runApp:

void main() {
 runApp(
   MaterialApp(
     ),
   )
 );
}

El widget MaterialApp puede incluir muchas propiedades, como por ejemplo las siguientes:

title

Es el título de la app, es decir, una descripción de una línea utilizada por el dispositivo para identificar la aplicación para el usuario. Debe ser un objeto de tipo String.

Ejemplo:

title: 'Una app básica'

theme

Es el tema que queremos que tenga nuestra app, es decir, las propiedades visuales predeterminadas (como colores y formas) para los widgets de material de esta aplicación. Tiene que ser un objeto de tipo ThemeData. 

Ejemplo:

theme: ThemeData(
    primaryColor: Colors.blue,
    accentColor: Colors.green
)

Un objeto de tipo ThemeData permite definir múltiples propiedades, como por ejemplo las dos del ejemplo anterior:

  • primaryColor especifica el color de fondo de las principales partes de la aplicación (barras de herramientas, barras de pestañas, etc.).
  • accentColor es el color de primer plano de los widgets (botones, texto, etc.).

home

Mediante esta propiedad especificamos cuál es el widget que define la primera pantalla que se mostrará en la app (es decir, la que se encontrará en la ruta home “/”). Debe ser, por tanto, un objeto de tipo widget.

Ejemplo: 

home: Scaffold(
        appBar: AppBar(
          title: Text('Bienvenidx a mi app'),
        ),
        body: Center(
          child: Text('¡Hola!'),
        ),
      )

En el ejemplo anterior, se ha usado un widget de tipo Scaffold, que implementa una estructura visual típica del Material Design (es decir, es un widget que establece los cimientos del diseño de la app).

Si juntamos todo lo anterior, nuestra app sigue ya los principios del Material Design y queda, por el momento, de la siguiente manera:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: 'Una app básica',
      theme: ThemeData(primaryColor: Colors.blue, accentColor: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bienvenidx a mi app'),
        ),
        body: Center(
          child: Text('¡Hola!'),
        ),
      )));
}

That’s it! Ya tenemos creada la base de nuestra app. Ahora, solo queda seguir añadiendo componentes para hacerla tan compleja como sea necesario 🚀.

Anterior

Anatomía de un widget de Flutter

Todo sobre el Data Science

Siguiente

Deja un comentario