Aplicación Flutter – Cree nuestra primera aplicación para ver «Hello World» – LetgOShots | Octubre de 2020

 

Sacudir funciona según el principio de los widgets. Crearemos nuestra primera aplicación Flutter usando un widget de texto. ¿Qué es un widget? Un widget es una aplicación o componente de una interfaz que permite a un usuario realizar una función o acceder a un servicio.

¿Demasiado complicado? No te preocupes. Tome su teléfono celular, por ejemplo. El reloj que ves en la pantalla de inicio es un widget. El reproductor de música que usa para reproducir sus canciones es un widget. Mira, estas no son más que pequeñas piezas colocadas una encima de la otra para hacer una aplicación.

Considerar pila de bandejas, una encima de la otra. La estructura de la aplicación base de Flutter tiene un widget de «Aplicación de material» en la parte inferior, lo que significa que la placa base es Material. Colocaremos otros widgets encima. Estos widgets, a su vez, contienen más widgets en su interior. Cada widget tiene diferentes propiedades que lo definen, como alineación, tamaño, color, fondo, etc.

Paso 1 – Abra Android Studio. Serás redirigido a la pantalla de bienvenida. Seleccione «Iniciar un nuevo proyecto de parpadeo» aquí.

Haga clic en Iniciar nuevo proyecto Shake

Paso 2 – ¿Qué estamos construyendo? Aplicación de aleteo. Seleccione «Aplicación de parpadeo» y haga clic en Siguiente.

Paso 3 – Nombra tu proyecto. El nombre no debe contener espacios. En su lugar, utilice un guión bajo. Por ejemplo: hello_world_app. Seleccione la ruta del Flutter SDK. En la sección de ubicación del proyecto, puede seleccionar su propio directorio para guardar la aplicación. Como puede ver aquí, seleccioné una carpeta llamada «flutter_projects» dentro de la unidad E.

Haga clic en Siguiente.

Paso 4 – El nombre del paquete ahora se usa para identificar de manera única su proyecto. Deje que sea el predeterminado por ahora. Haga clic en Finalizar.

Paso 5 – Verá esta pantalla. Contendrá la aplicación Flicker predeterminada. Esto hace temblar al equipo de desarrollo. Espere unos minutos a que se carguen los recursos del proyecto. Esta aplicación es una aplicación de contador que se realiza utilizando algo conocido como Scaffold. Discutiremos esto más tarde.

Por ahora, intentemos ejecutar esta aplicación.

Como se muestra en la imagen a continuación, seleccione el emulador de Android que creamos anteriormente. Haga clic en «Abrir Android Emul … ..» y espere a que se cargue por completo (esto puede tardar unos minutos).

¡¡Voila !! Tenemos el emulador en ejecución. Ahora iniciaremos la aplicación. Presiona el botón de reproducción verde en la parte superior derecha y espera a que el proyecto se cargue dentro del emulador.

Así es como se ve la aplicación.

Ahora hemos visto cómo se ve la aplicación predeterminada. Creemos el nuestro. Seleccione y elimine todo desde la línea 7 hasta el final. El error 4 se muestra en la línea 4. En la función «runApp», el nombre de la aplicación flutter predeterminada desarrollada por el equipo de desarrollo de FLutter se llama MyApp (). Simplemente elimínelo y el error desaparecerá.

Puede haber adivinado que todo lo que escribimos dentro de la función runApp () es el código de nuestra aplicación Flutter. La aplicación que ejecutamos será una MaterialApp vacía. Esta aplicación corresponde al patrón Material Design. La pregunta ahora es, ¿qué es el diseño de materiales?

Es un estilo o concepto de diseño creado por Google y muchas empresas y startups lo han adoptado para sus sitios web y aplicaciones móviles. Y al usar parpadeo, podemos usar muchos de estos componentes con widgets de parpadeo.

Paso 6 – Es hora de escribir nuestro propio código dentro de MaterialApp (). Comencemos a crear un árbol de widgets.

Nuestra base es MaterialApp (). Luego viene la página de inicio. Mostraremos algún texto en nuestra página de inicio.

import 'package:flutter/material.dart'; 
void main()
{ runApp( MaterialApp( home: Text('Hello World'), ), ); } 

La estructura de nuestra aplicación.

Así es como se verá nuestra aplicación cuando se lance. Ver. abajo.

Visitar aquí para una descripción más detallada y técnica cómo funciona Flutter.

Deja una respuesta

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