Tutorial de Flutter, Parte 1: Cree una aplicación de Flutter desde cero

Aprenda cómo comenzar a crear una aplicación Flutter, la primera parte de la serie de tutoriales Flutter.

Parte 1: Cómo construir una aplicación de flutter desde cero

En esta serie de tutoriales, lo guiaremos paso a paso sobre cómo crear una aplicación móvil de comercio electrónico utilizando flutter. La aplicación móvil sería una aplicación de código abierto para la plataforma Aviacommerce. El tutorial se centraría en esta aplicación para presentar los conceptos importantes del marco de flutter.

Este tutorial es la primera parte de la serie de tutoriales de flutter: -

  1. Cómo construir una aplicación de flutter desde cero
  2. Cómo diseñar una aplicación en flutter (próximamente)
  3. Cómo organizar datos en aleteo (próximamente)
  4. Listado de datos en flutter (próximamente)

Más actualizaciones sobre el contenido a medida que avanzamos.

El blog explicará cómo crear diseños e introducir el estado paso a paso. Para sumergirse directamente en el código, todo el proyecto está disponible en Github bajo el paraguas de AviaCommerce. Siéntase libre de bifurcarlo y jugar.

Nosotros, en AviaCommerce, buscamos activamente nuevos marcos que redefinan el desarrollo de software. Nuestro equipo sigue de cerca la actividad en Flutter desde su primer lanzamiento beta.

Google finalmente ha anunciado Flutter 1.0, la primera versión estable de UI toolkit para crear hermosas experiencias nativas para iOS y Android desde una única base de código.

Flutter tiene una documentación excepcional para configurar el entorno de desarrollo. Siga esta guía de instalación oficial para comenzar.

Una vez que se completa la configuración, podemos comenzar con un nuevo proyecto de prueba. Prefiero Android Studio ya que ofrece una experiencia IDE completa e integrada para Flutter. Android Studio requerirá un complemento de editor para Dart.

Inicia Android Studio. Puede ver una opción para inicializar un nuevo proyecto basado en Flutter.

Elija Flutter Application de la lista de configuraciones.

Piensa en un nombre elegante para tu primera aplicación Flutter. O simplemente usa el temporizador si eres malo para nombrar cosas como yo .

Un último paso en el proceso, el cuadro de diálogo le pedirá el nombre del paquete de la aplicación.

Después de este paso, Flutter SDK creará una estructura de directorio inicial para la aplicación. Toda la acción va dentro de la carpeta lib y main.dart es el punto de partida en la ejecución de la aplicación.

En Flutter, todo es un widget. Las imágenes, los iconos y el texto en una aplicación Flutter son todos widgets. Incluso los elementos de diseño como las filas, columnas y cuadrículas que organizan, restringen y alinean otros widgets, son widgets en sí mismos.

Lo bueno es que Flutter SDK crea un widget interactivo en la raíz de la aplicación aquí mismo. Para hacer las cosas un poco más fáciles, eliminemos eso y comencemos con un diseño minimalista (¡Hola Mundo!).

Su archivo main.dart debería verse así:

Activar el emulador de Android lo abre con un saludo de widget de texto "¡Hola, mundo!"

Observe el widget en foco aquí. Intentaremos modificar el cuerpo de MaterialApp para mostrar la interfaz como queremos que sea. La versión original es la que se muestra a continuación.

Los elementos de diseño (widgets) en Flutter se pueden clasificar ampliamente en dos tipos según si contienen un solo widget o si son capaces de contener una gran variedad de widgets. Contenedor, Relleno pertenecen al primero, mientras que Fila, Columna, etc., pertenecen al segundo.

Introduzca un diseño de fila con tres elementos secundarios de tipo Widgets de texto.

Antes de continuar y diseñar los componentes, es recomendable crear un nuevo widget que maneje el estilo para que sigamos el principio DRY.

Reemplace los tres hijos con un widget personalizado definido más adelante en el mismo archivo. El archivo main.dart ahora se convierte en

El temporizador se ve un poco soso en este momento. No soy muy bueno en las interfaces de usuario, pero hagamos nuestro mejor esfuerzo. Empaque el widget de Texto dentro de un Contenedor y decore el Contenedor con un color de fondo junto con relleno para espaciar los elementos.

Además, inserte un botón para realizar las acciones en el temporizador debajo de los tres widgets de texto con estilo. El código modificado se ve así.

Aquí viene la parte más integral de la aplicación: el estado. El estado mantendrá el valor actual del temporizador y si el temporizador está activo (en ejecución) o no. Se me ocurrió la clase TimerState que es responsable de mantener el estado y también se encarga de construir el árbol de widgets.

Al presionar el botón se alterna la variable activa.

Dart viene con un elegante módulo para operaciones asíncronas. Podemos usar su clase Timer para ayudarnos a incrementar los segundos. El TimerAppState modificado se describe a continuación. Tenga en cuenta que hemos refactorizado la clase Timer a TimerApp para evitar la ambigüedad con la clase Timer en el módulo asíncrono.

La aplicación es completamente funcional ahora. El código main.dart completo se puede encontrar aquí. Espero que aclare los conceptos básicos del marco Flutter.

FLUTTERFORUM: UN LUGAR DONDE FLUTTER DEV HANGOUT

FlutterForum es un lugar donde los desarrolladores de flutter pasan el rato y participan en conversaciones y preguntas.

visite https://flutterforum.co

Si disfrutaste este tutorial, haz clic en el botón y compártelo para ayudar a otros a encontrarlo. Siéntase libre de dejar un comentario más abajo.