Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Tutorials

Diseña y codifica tu primera aplicación en Flutter

by
Read Time:10 minsLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

Diseñar una aplicación con Flutter es muy simple y el proceso es fácil de entender incluso si eres principiante.

Esta guía te ayudará a empezar con tu primera aplicación desarrollada en Flutter. Te enseñaré algunos de los elementos principales del diseño y de la interfaz de usuario (UI) que se unen para crear una aplicación, como la fuente, el tema, la orientación, el snackbar y el drawer.

Empezando con Flutter

Para empezar con Flutter no se requiere que tengas una gran experiencia en el desarrollo de aplicaciones. Aquí hay varios tutoriales que te guiarán por todo el proceso para crear una aplicación.

Lo que hace que la programación con Flutter sea aún más simple es que todas las aplicaciones están escritas en el lenguaje Dart. Así que, tampoco es necesario que conozcas los lenguajes de programación específicos del sistema operativo, como Swift o Java.

Para iniciar, tendrás que descargar e instalar el SDK de Flutter. A continuación, descarga e instala Android Studio.

Si no tienes Android Studio, puedes usar cualquier otro IDE para desarrollar una aplicación en Flutter. Nosotros utilizamos Android Studio porque tiene muchas funciones que ayudan a desarrollar aplicaciones en Flutter más rápido.

Una vez que se haya instalado, estás listo para empezar tu proyecto.

Crea tu primera aplicación con Flutter

Después de empezar con Flutter y configurar el SDK y el IDE, tienes que crear un proyecto.

Abre Android Studio y crea un nuevo proyecto de Flutter.

A continuación, debes asignarle un nombre a tu proyecto, selecciona la ruta del SDK de Flutter, establece la ubicación del proyecto y haz clic en Next (Siguiente). Ahora ingresa el nombre del proyecto. Nos gustaría llamarlo my design (mi diseño).

Después de colocar todo y de presionar Next (Siguiente) y luego Finish (Finalizar), Android Studio te configurará un código de inicio e iniciará el proyecto. Así es como se ve el código de inicio:

Ahora puedes ejecutar el proyecto para observar cómo se ve la aplicación.

¡Genial! Este fue el primer paso para crear tu primera aplicación con Flutter. Hasta el momento es una aplicación simple con una barra superior y un botón en el centro.

El paquete de Material Design

Ahora, si volvemos al principio del código, veremos esta línea:

La aplicación de inicio utiliza Material Design. Material Design es un sistema de diseño creado por Google. Con Flutter, es fácil crear una aplicación con Material Design: podremos aprovechar una gran cantidad de componentes y widgets prediseñados.

Para usar Material Design en Flutter, importa el paquete material.dart. Estos widgets se encargan de todo, desde la fuente hasta la alineación y el tema. Naturalmente, no es necesario utilizar Material Design: el framework de Flutter está diseñado de tal forma que crea capas de objetos, y cada parte del nivel del framework es opcional y reemplazable.

Vamos a personalizar nuestra aplicación. Empezaremos con los widgets de texto.

El resultado se verá así:

El widget mostrará el texto con la fuente predeterminada que se dividirá en líneas según el diseño.

Sin embargo, puedes estilizar el texto con el constructor Text.rich. Mostrará un párrafo con texto de estilo diferente.

Aquí está el código del texto enriquecido como referencia:

Una sugerencia adicional: Si quieres que tu texto reaccione a eventos táctiles, utiliza el widget detector de gestos (Gesture Detector) y envuelve el texto en él. Explicaré esto en una publicación sucesiva.

Elementos de diseño para una aplicación en Flutter

Estos son los principales elementos de diseño que tal vez quieras utilizar en tu primera aplicación de Flutter:

Temas

El objetivo de la interfaz de usuario de Flutter es permitir que las personas creen aplicaciones que sean atractivas. Para empezar, si no se selecciona ningún otro tema, Flutter le proporcionará a tu aplicación el tema predeterminado.

Ahora, puedes jugar con el código y probar todo lo que Flutter puede hacer.

Aquí hay un ejemplo:

Y su código debería verse de esta forma:

Aquí hay otro ejemplo de cómo puedes cambiar el color del fondo y añadir diferentes elementos para mejorar tu aplicación:

Así es como va su código:

Fuentes

Flutter ofrece varias fuentes personalizadas que puedes usar en tu aplicación. Estas fuentes se pueden aplicar en toda la aplicación o a un widget específico.

Para usar fuentes personalizadas, puedes importarlas a Flutter. Utiliza este código para importar la fuente de tu elección:

Después de importar las fuentes, tienes que declararlas incluyendo una definición en el archivo pubspec.yaml.

Puedes descargar otras fuentes gratuitas de Google.

Después de esto, tienes dos opciones:

  1. establecer una fuente como predeterminada
  2. utilizar una fuente en un widget específico

En el siguiente código, puedes ver ejemplos de cómo efectuar cada una de estas opciones.

Así es como se verá tu aplicación:

Esto aplicará la fuente Roboto Mono solo al widget de texto, mientras que Raleway sigue siendo la fuente predeterminada de la aplicación.

Interfaz de usuario (UI) y diseño general

Flutter te permite crear diferentes diseños según la orientación de los dispositivos de los usuarios. Por ejemplo, puedes crear una lista con vistas de cuadrícula con dos columnas en modo vertical y tres en modo horizontal.

Primero, crea una cuadrícula con dos columnas.

Ahora, utiliza el widget OrientationBuilder para adaptar el diseño según la orientación del dispositivo.

Ahora el diseño tendrá tres columnas en la orientación horizontal en comparación con dos en la orientación vertical. Este es el código completo:

Y así es como se verá tu aplicación:

Añadir un drawer

También puedes añadir drawers para mostrar información adicional sobre tu aplicación.

El drawer se agrega utilizando un drawer widget, combinado con scaffold. El drawer está envuelto en el widget scaffold.

Para ver un ejemplo de cómo añadir un drawer en el scaffold y agregar contenido al drawer, observa el siguiente código:

El código anterior logrará este aspecto:

Conclusiones

Flutter ha simplificado el proceso de desarrollo de aplicaciones con sus widgets y su interfaz fácil de usar. Existen posibilidades infinitas cuando se trata de añadir y modificar elementos a tu aplicación en Flutter. En esta guía se han tratado algunos elementos clave que son una parte integral del diseño de cada aplicación.

Así que, experimenta mucho porque solo probando y practicando te convertirás en un gran desarrollador de aplicaciones.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.