Primeros pasos con la aplicación móvil multiplataforma usando Flutter

Flutter es un SDK de desarrollo de aplicaciones móviles de código abierto creado por Google para desarrollar aplicaciones móviles multiplataforma . Flutter hace que sea extremadamente fácil y rápido, incluso para los programadores novatos, crear aplicaciones móviles nativas receptivas y de alta calidad. ¡No se requiere experiencia previa en desarrollo de aplicaciones! ¡Este artículo le mostrará cómo crear una aplicación Hello Flutter simple y luego ejecutarla en su propio dispositivo Android!

¿Por qué usar Flutter sobre el desarrollo nativo de Java?

Flutter tiene algunas características únicas en comparación con Java nativo y otros SDK, como:

• Desarrollo rápido : Flutter utiliza widgets personalizables que se pueden anidar para crear la interfaz de la aplicación, similar a cómo está estructurado HTML. Uno puede referirse a esto para más detalles: Flutter for Web Devs .
• Hot Reload : vea instantáneamente los cambios realizados en el código, sin volver a compilar.
• Es nativo al final : bajo el capó, el código base se compila en Java, lo que garantiza el mismo rendimiento que el que ofrecen las aplicaciones nativas.
• Poco consumo de recursos del sistema : Flutter se puede ejecutar cómodamente en un sistema con menos recursos.

Configuración de aleteo

• Paso 1: configurar el SDK de Flutter
  1. Descargue el SDK más reciente aquí: Flutter SDK Archive
  2. Extraiga el archivo zip y coloque la carpeta ‘ flutter ‘ contenida en el directorio deseado.

Aquí se extrae la carpeta a la unidad C:\

1. Nota : se recomienda no instalar Flutter en un directorio que pueda requerir privilegios de administrador, como ‘C:\Program Files\’

• Paso 2: agregue Flutter a PATH : aunque no es obligatorio, se recomienda configurar la variable PATH para que Flutter sea fácilmente accesible desde cualquier parte del sistema.
  1. Vaya a Editar variables de entorno para su cuenta en el Panel de control. Puede buscar esta configuración en su barra de búsqueda.
  2. En Variables de usuario, compruebe si hay una entrada llamada PATH:
     • Si existe, agregue una nueva ruta a ‘flutter\bin’.
     • Si la entrada no existe, cree una nueva entrada llamada Ruta y luego agregue la ubicación completa a ‘flutter\bin’ (vea la imagen de ejemplo)
  3. Reinicie Windows después de configurar la variable PATH para que funcione.
• Paso 3: Configure Android Studio : Android Studio descarga automáticamente las herramientas de desarrollo necesarias para que Flutter funcione con Android.
  1. Descarga Android Studio aquí: Android Studio
  2. Inicie Android Studio y siga el asistente SDK Manager para descargar todas las herramientas de compilación necesarias.
• Paso 4: Configure Visual Studio Code : Visual Studio Code (o VS Code) es un editor de código ligero que se puede usar en el desarrollo de Flutter. En este artículo, se usa VS en lugar de Android Studio, ya que es más liviano y tiene las características mínimas requeridas.
  1. Descargue e instale VS Code: Descarga de VS Code .
  2. Para ayudar en el desarrollo, se recomiendan dos extensiones de VS Code. Instale los complementos Flutter y Dart desde la pestaña Extensión de VS Code. Puede consultar: Configuración de extensiones de código VS para Flutter

Las extensiones de código VS que se instalarán

1. Instale Git Bash : opcional, pero se recomienda un símbolo del sistema. Git Bash proporciona muchos comandos comunes de Unix que son útiles para algunas tareas rápidas. Descargue Git Bash para Windows aquí: Descargas de Git
2. Ejecutar Flutter Doctor : Flutter doctor es una herramienta incorporada de flutter que se puede usar para verificar el estado de la instalación de Flutter. Después de configurar la variable PATH, puede abrir el símbolo del sistema y ejecutar:

flutter doctor

1. Esto verificará todo lo necesario para que Flutter se ejecute y brindará un informe detallado de cualquier error que encuentre.

Tras una configuración exitosa, flutter doctor no mostraría errores

Creación de un proyecto de plantilla vacío

1. Navegue hasta el lugar donde desea que se cree su proyecto. Abra un símbolo del sistema (también puede usar el contexto ‘Git Bash aquí’ haciendo clic derecho para abrir Git Bash en esta ubicación) y escriba el comando para crear un nuevo proyecto:

 flutter create project_name 

1. Por ejemplo: para un proyecto llamado ‘helloflutter’ , ejecutar

flutter create helloflutter

1. creará un nuevo proyecto Flutter con el nombre helloflutter

Se crea el nuevo proyecto llamado helloflutter

1. Abra esta carpeta en VS Code. Puede hacer clic con el botón derecho y usar el menú contextual para abrir directamente en VS Code, o iniciar VS Code primero y luego abrir esta carpeta como un proyecto.

Menú contextual para abrir carpeta en VS Code

1. El panel grande a la izquierda que muestra todos los archivos y carpetas se conoce como Panel del Explorador . Navegue a la carpeta ‘lib’ y seleccione el archivo ‘main.dart’ . Este archivo es el punto de entrada desde donde la aplicación comienza su ejecución.

Ubicar el archivo main.dart en la carpeta lib

1. El código que se abre es el de la aplicación de plantilla. ¡Intenta ejecutar esta sencilla aplicación de inmediato!

Saludando Flutter!

1. Elimine el widget MyHomePage.

Eliminar el widget MyHomePage

1. Cree un nuevo widget sin estado y asígnele el nombre HelloFlutter . Los widgets sin estado se utilizan para definir widgets que no tienen que lidiar con cambios en su estado interno. Se utilizan principalmente para crear componentes que, una vez dibujados, no es necesario actualizar. 

class HelloFlutter extends StatelessWidget {
  const HelloFlutter({Key? key}) : super(key: key);
 
@override
Widget build(BuildContext context) {
    return Container(
         
    );
}
}

Se agregó el nuevo widget sin estado HelloFlutter

1. Reemplace el widget de contenedor con un widget de andamio : un andamio implementa una estructura de diseño visual de diseño de material básico. Este widget proporciona API para mostrar cajones, barras de aplicaciones y el cuerpo de la aplicación. La propiedad body de Scaffold se usará aquí para mostrar el contenido de la aplicación. 

class HelloFlutter extends StatelessWidget {
  const HelloFlutter({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
       
    );
  }
}

1. Declare un widget de contenedor en el cuerpo del andamio. 
   Un widget de contenedor es un widget útil que combina widgets comunes de pintura, posicionamiento y tamaño. Puede envolver cualquier widget con un contenedor y controlar las propiedades mencionadas anteriormente. 

class HelloFlutter extends StatelessWidget {
  const HelloFlutter({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
 
      ),
    );
  }
}

1. El widget Contenedor tiene una propiedad de alineación que ayudará a colocar el Widget en el centro de la pantalla. Establece la alineación con la clase Alignment:

 alignment: Alignment.center 

1. En la propiedad secundaria del Container Widget, declare un Text Widget: El Text Widget se ocupa de mostrar y manejar texto. Después de crear el widget de texto, escribe ‘Hello Flutter’ entre paréntesis entre comillas simples. Todo lo que se pone entre comillas simples se muestra en el widget de texto. 

class HelloFlutter extends StatelessWidget {
  const HelloFlutter({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: const Text('Hello Flutter!'),
      ),
    );
  }
}

1. Finalmente, en la propiedad de inicio de la clase principal MyApp anterior, cámbiela de MyHomePage(…) a HelloFlutter(). Esto permite que la clase principal MyApp se refiera al HelloFlutter recién creado.

Cambiando la propiedad de la casa para llamar al Widget que hicimos

1. Ahora ejecuta la aplicación usando el comando ‘ flutter run ‘.

Ejecutar la aplicación

1. Un texto «¡Hola Flutter!» aparecerá escrito en el centro de la pantalla.

Ejecutar la aplicación HelloFlutter

1. Conecte un dispositivo físico a la PC y habilite el modo de desarrollador . Si la PC reconoce correctamente el dispositivo, el nombre del dispositivo aparecerá en la esquina inferior derecha de VS Code.

El nombre del dispositivo se mostrará aquí.

1. Si desea configurar un emulador, consulte: Configurar el emulador de Android . El dispositivo emulado también aparecería aquí de manera similar.
2. Abra el terminal integrado presionando la combinación de teclas [CTRL + `] (Tecla de control + tilde).
3. Ejecute el comando:

flutter run

1. Espere unos minutos. Cuando se ejecuta por primera vez, algunas descargas e instalaciones se realizan en segundo plano relacionadas con gradle. Las compilaciones posteriores serían mucho más rápidas.

Ejecutando ‘flutter run’ y compilación de la aplicación predeterminada

1. Después de la compilación, la aplicación se instalará y ejecutará en el dispositivo o emulador conectado automáticamente.

Ejecutar la aplicación

1. Detenga la aplicación presionando ‘d’ en la terminal. Así será la compilación y ejecución de cualquier aplicación.

Referencia: Código completo