Aleteo – Diseño de materiales

Posted on by Rudeus Greyrat

 ¿Si alguien quiere crear rápidamente aplicaciones atractivas y escalables en todas las plataformas? Entonces Material Design es el camino a seguir. 

¿Qué es el diseño de materiales? 

Material es un sistema de diseño adaptable, respaldado por código abierto, que ayuda a los desarrolladores a crear fácilmente experiencias digitales de alta calidad. Desde pautas de diseño hasta componentes para desarrolladores, Material puede ayudar a los desarrolladores a crear productos más rápido. Las pautas de diseño de materiales proporcionan las mejores prácticas y el diseño de la interfaz de usuario. Guía de usabilidad y plataforma para ayudar a garantizar que nuestra aplicación funcione para todos los usuarios, independientemente de la plataforma que estén utilizando. Dentro de las pautas, hay componentes que son los componentes básicos que hacen que un producto sea utilizable y funcional. Cada página de componentes incluye orientación sobre cómo deben usarse, el patrón de interacción y las especificaciones de diseño que le brindan la información que el desarrollador necesita para asegurarse de hacerlo bien.

Y la buena noticia es que flutter también es compatible con el diseño de materiales. Hay todo tipo de widgets de diseño de materiales en aleteo, ya sean botones, paneles desplegables, animaciones y mucho más. En este artículo, veremos cómo podemos usar los widgets de Flutters Material Design para ayudar a los desarrolladores a desglosar rápidamente un diseño y convertirlo en código real que se ejecuta tanto en iOS como en Android.

Sistema de color de diseño de materiales

Un tema de color en Material se refiere a un conjunto restringido de colores que definen una interfaz. El Material Theme predeterminado incorpora colores vívidos como el primario y el secundario, así como ranuras de color para fondos, superficies, errores y más. Definición de un tema de color. Esta forma es útil porque ayuda a crear una historia de color consistente y racional que se puede usar de manera global y consistente en toda su aplicación. Esto ayuda a los usuarios a percibir el contenido y saber más fácilmente cómo funciona la aplicación. 

Un refinamiento del tema del color es. Sobre Colores. Los colores on se denominan así porque aparecen en otros elementos. Por ejemplo, el color de fondo de la siguiente aplicación es negro, porque el texto que aparece en el fondo es negro, así como otros elementos como íconos. Eso también aparece en el fondo. Los colores on son útiles porque pueden ayudar a garantizar que el contenido que aparece en varios contextos a lo largo de su aplicación permanezca consistente y legible.

También le brindan un control global constante sobre cosas como el contraste de color, por lo que no necesita ajustar el texto en cada superficie con el mismo color siempre que el color correspondiente para esas superficies cumpla con los requisitos de contraste. Estos colores también pueden tener diferentes niveles de énfasis, lo que puede ser útil para transferir información en situaciones ricas en estado o cuando crea un tema oscuro.

Tipografía de materiales

La tipografía en el diseño de materiales se basa en una escala tipográfica. Una escala tipográfica es una jerarquía de estilos tipográficos que se puede utilizar para diversas circunstancias a lo largo de un diseño. La escala de tipo de material es una mezcla de 13 estilos reutilizables, cada uno de los cuales tiene una aplicación y un significado previstos, desde estilos de grandes titulares hasta leyendas y botones del cuerpo del texto. Elaborar una buena escala tipográfica para su aplicación mantiene la tipografía consistente y significativa para los usuarios, al tiempo que brinda suficientes opciones estilísticas para crear una apariencia y un carácter convincentes.

El tipo es uno de los subsistemas que le permite tematizar los componentes de Material, personalizándolos para crear algo único. La tipografía de cada componente encaja en una categoría. Por ejemplo, el texto de un botón pertenece a la categoría de botón, que comparten los botones de un cuadro de diálogo y las etiquetas de las pestañas. Por lo tanto, cambiar atributos como el estilo de letra, el tamaño y el espaciado provoca un efecto dominó. Personaliza toda la tipografía perteneciente a esa categoría.

A continuación se muestra una lista de los principales widgets de diseño de materiales en flutter.

1. Estructura y navegación de la aplicación

2. Botones

3. Entrada y selección

4. Diálogos, alertas y paneles

SnackBar

5. Pantalla de información

6. Diseño

  • Divisor
  • Azulejo de lista
  • paso a paso

Hay muchos más widgets de diseño de materiales disponibles para obtener más información, entonces puede visitar el sitio web oficial . Ahora veremos la implementación de dos widgets de diseño de materiales, el primero es el widget Appbar y el segundo es el widget Card.

Ejemplo 1: barra de aplicaciones

archivo main.dart

Dart

import "package:flutter/material.dart";
 
// importing flutter material design library
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("GeeksforGeeks"),
        leading: IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'Menu Icon',
          onPressed: () {},
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.note),
            tooltip: 'Comment Icon',
            onPressed: () {},
          ),
          SizedBox(
            width: 30,
          ) //IconButton
          //IconButton
        ], //<Widget>[]
        backgroundColor: Colors.green,
        elevation: 20.0,
        //IconButton
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(20),
              bottomRight: Radius.circular(20)),
          //BorderRadius.only
        ), //RoundedRectangleBorder
        brightness: Brightness.light,
      ), //AppBar
      body: Center(
          //Text
          ), //Center
    ), //Scaffold
  )); //MaterialApp
}

Producción: 

Explicación: en el archivo main.dart, lo primero que hicimos fue importar la biblioteca de diseño de materiales que nos permitirá usar el widget de diseño de materiales, que en este caso son MaterialApp, Scaffold y Appbar . Después de inicializar la aplicación, tenemos la clase MaterialApp que contendrá todo el árbol de widgets de la aplicación. En el parámetro de inicio de la clase MaterialApp , tenemos un widget de Scaffold que básicamente proporciona toda la pantalla del dispositivo para representar los widgets de la aplicación. Luego, dentro del widget Scaffold , tenemos el widget AppBar que ocupa el parámetro appBar . El color verde en elappbar se proporciona con la propiedad be backgroundColor , el icono de menú lo proporciona la propiedad principal , el texto ‘GeeksforGeeks’ lo proporciona la propiedad title y en la esquina derecha el parámetro de acción contiene un icono de nota y un Si zedBox (para proporcionar un espacio entre el banner de depuración). Y el cuerpo de la aplicación está en blanco actualmente. 

Para saber más sobre el widget AppBar, haga clic aquí .

Ejemplo 2: Tarjeta

archivo main.dart

Dart

import 'package:flutter/material.dart';
 
//imported google's material design library
void main() {
  runApp(
     
      /**Our App Widget Tree Starts Here**/
      MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("GeeksforGeeks"),
        leading: IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'Menu Icon',
          onPressed: () {},
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.note),
            tooltip: 'Comment Icon',
            onPressed: () {},
          ),
          SizedBox(
            width: 30,
          ) //IconButton
          //IconButton
        ], //<Widget>[]
        backgroundColor: Colors.green,
        elevation: 20.0,
        //IconButton
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(20),
              bottomRight: Radius.circular(20)),
           //BorderRadius.only
        ), //RoundedRectangleBorder
        brightness: Brightness.light,
      ), //AppBar
      body: Center(
         
        /** Card Widget **/
        child: Card(
          elevation: 60,
          shadowColor: Colors.black,
          color: Colors.greenAccent[100],
          child: SizedBox(
            width: 300,
            height: 450,
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Column(
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.green[300],
                    radius: 108,
                    child: Text(
                      "C++",
                      style: TextStyle(
                          fontSize: 100,
                          fontWeight: FontWeight.bold,
                          color: Colors.green[900]),
                    ),
                  ), //CircleAvatar
                  SizedBox(
                    height: 10,
                  ), //SizedBox
                  Text(
                    'C++ Programming Language',
                    style: TextStyle(
                      fontSize: 20,
                      color: Colors.green[900],
                      fontWeight: FontWeight.w500,
                    ), //Textstyle
                  ), //Text
                  SizedBox(
                    height: 10,
                  ), //SizedBox
                  Text(
                    'C++ is a general purpose programing language and
                    widely used now a days for competitive programming.
                    It has imperative, object-oriented and generic
                    programming features.',
                    style: TextStyle(
                      fontSize: 15,
                      color: Colors.green[900],
                    ), //Textstyle
                  ), //Text
                  SizedBox(
                    height: 10,
                  ), //SizedBox
                  SizedBox(
                    width: 120,
                    child: RaisedButton(
                      onPressed: () => null,
                      color: Colors.green,
                      child: Padding(
                        padding: const EdgeInsets.all(4.0),
                        child: Row(
                          children: [
                            Icon(Icons.touch_app),
                            Text('Buy Now'),
                          ],
                        ), //Row
                      ), //Padding
                    ), //RaisedButton
                  ) //SizedBox
                ],
              ), //Column
            ), //Padding
          ), //SizedBox
        ), //Card
      ), //Center
    ), //Scaffold
  ) //MaterialApp
      );
}

Producción: 

Explicación : esta aplicación es la continuación de la aplicación anterior; en este ejemplo, vamos a agregar un widget de Tarjeta en el cuerpo de la aplicación, que antes estaba en blanco. En el parámetro del cuerpo de MaterialApp , el widget principal es Center, que contiene el widget de tarjeta . El widget de la tarjeta está utilizando cuatro de sus parámetros en total, que son:

  • elevación : eleva la tarjeta de su fondo al proporcionar un poco de sombra negra. Aquí son 60.
  • shadowColor : Aporta color a la sombra. La propiedad anterior también usa el color proporcionado por este parámetro. Aquí el color de la sombra es negro.
  • color : como sugiere el nombre, proporciona el color de fondo de la tarjeta. En este caso, el color de la tarjeta es greenAccent[100 ].
  • child : esta propiedad mantendría todo el contenido de la aplicación. Aquí, el widget SizedBox con dimensiones 300X450 va a contener todo el contenido de la aplicación que está organizado por un widget de columna. Dentro del widget de Columna, hay CircularAvatar, dos widgets de Texto y un RaisedButton , todos separados por SizedBox de altura 10.

Estos fueron solo dos ejemplos del widget de diseño de materiales en flutter, para ver más ejemplos, puede hacer clic en el enlace provisto en la lista anterior.

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *