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
- Descargue el SDK más reciente aquí: Flutter SDK Archive
- Extraiga el archivo zip y coloque la carpeta ‘ flutter ‘ contenida en el directorio deseado.
- 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.
- 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.
- 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)
- 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.
- Descarga Android Studio aquí: Android Studio
- 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.
- Descargue e instale VS Code: Descarga de VS Code .
- 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
- 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
- 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
- Esto verificará todo lo necesario para que Flutter se ejecute y brindará un informe detallado de cualquier error que encuentre.
Creación de un proyecto de plantilla vacío
- 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
- Por ejemplo: para un proyecto llamado ‘helloflutter’ , ejecutar
flutter create helloflutter
- creará un nuevo proyecto Flutter con el nombre helloflutter
- 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.
- 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.
- El código que se abre es el de la aplicación de plantilla. ¡Intenta ejecutar esta sencilla aplicación de inmediato!
Saludando Flutter!
- Elimine el widget MyHomePage.
- 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.
Dart
class HelloFlutter extends StatelessWidget { const HelloFlutter({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Container( ); } }
- 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.
Dart
class HelloFlutter extends StatelessWidget { const HelloFlutter({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const Scaffold( ); } }
- 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.
Dart
class HelloFlutter extends StatelessWidget { const HelloFlutter({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: Container( ), ); } }
- 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
- 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.
Dart
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!'), ), ); } }
- 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.
- Ahora ejecuta la aplicación usando el comando ‘ flutter run ‘.
- Un texto «¡Hola Flutter!» aparecerá escrito en el centro de la pantalla.
Ejecutar la aplicación HelloFlutter
- 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.
- Si desea configurar un emulador, consulte: Configurar el emulador de Android . El dispositivo emulado también aparecería aquí de manera similar.
- Abra el terminal integrado presionando la combinación de teclas [CTRL + `] (Tecla de control + tilde).
- Ejecute el comando:
flutter run
- 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.
- Después de la compilación, la aplicación se instalará y ejecutará en el dispositivo o emulador conectado automáticamente.
- 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
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA