Creación de una aplicación simple en Android Studio

En este capítulo, creemos una aplicación Flutter simple para comprender los conceptos básicos de la creación de una aplicación Flutter en Android Studio.

Step 1 - Abrir Android Studio

Step 2- Crear proyecto Flutter. Para esto, haga clic enFile → New → New Flutter Project

Step 3- Seleccione Aplicación Flutter. Para esto, seleccioneFlutter Application y haga clic en Next.

Step 4 - Configure la aplicación como se muestra a continuación y haga clic en Next.

  • Nombre del proyecto: hello_app

  • Ruta del SDK de Flutter: <path_to_flutter_sdk>

  • Localización del proyecto: <path_to_project_folder>

  • Descripción: Flutter based hello world application

Step 5 - Configurar proyecto.

Establecer el dominio de la empresa como flutterapp.tutorialspoint.com y haga clic en Finish.

Step 6 - Ingrese el dominio de la empresa.

Android Studio crea una aplicación de aleteo completamente funcional con una funcionalidad mínima. Comprobemos la estructura de la aplicación y luego, cambiemos el código para hacer nuestra tarea.

La estructura de la aplicación y su propósito es la siguiente:

Aquí se explican varios componentes de la estructura de la aplicación:

  • android - Código fuente generado automáticamente para crear aplicaciones de Android

  • ios - Código fuente generado automáticamente para crear una aplicación ios

  • lib - Carpeta principal que contiene el código de Dart escrito en el marco de flutter

  • ib/main.dart - Punto de entrada de la aplicación Flutter

  • test - Carpeta que contiene el código de Dart para probar la aplicación Flutter

  • test/widget_test.dart - Código de muestra

  • .gitignore - Archivo de control de versiones de Git

  • .metadata - generado automáticamente por las herramientas de aleteo

  • .packages - generado automáticamente para rastrear los paquetes de flutter

  • .iml - archivo de proyecto utilizado por Android Studio

  • pubspec.yaml - Usado por Pub, Administrador de paquetes Flutter

  • pubspec.lock - Generado automáticamente por el administrador de paquetes Flutter, Pub

  • README.md - Archivo de descripción del proyecto escrito en formato Markdown

Step 7- Reemplace el código de dardos en el archivo lib / main.dart con el siguiente código -

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Hello World Demo Application',
         theme: ThemeData(
            primarySwatch: Colors.blue,
         ),
         home: MyHomePage(title: 'Home page'),
      );
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;

   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(
            title: Text(this.title),
         ),
         body: Center(
            child:
            Text(
               'Hello World',
            )
         ),
      );
   }
}

Entendamos el código de dardos línea por línea.

  • Line 1- importa el paquete flutter, material . El material es un paquete de aleteo para crear una interfaz de usuario de acuerdo con las pautas de diseño de materiales especificadas por Android.

  • Line 3- Este es el punto de entrada de la aplicación Flutter. Llama a la función runApp y le pasa un objeto de la clase MyApp . El propósito de la función runApp es adjuntar el widget dado a la pantalla.

  • Line 5-17- El widget se utiliza para crear una interfaz de usuario en el marco de flutter. StatelessWidget es un widget, que no mantiene ningún estado del widget. MyApp extiende StatelessWidget y anula su método de compilación . El propósito del método de compilación es crear una parte de la interfaz de usuario de la aplicación. Aquí, el método de compilación usa MaterialApp , un widget para crear la interfaz de usuario de nivel raíz de la aplicación. Tiene tres propiedades: título, tema y hogar .

    • title es el título de la aplicación

    • tema es el tema del widget. Aquí, configuramos el azul como el color general de la aplicación usando la clase ThemeData y su propiedad, primarySwatch .

    • home es la interfaz de usuario interna de la aplicación, que configuramos otro widget, MyHomePage

  • Line 19 - 38- MyHomePage es igual que MyApp, excepto que devuelve Scaffold Widget. Scaffold es un widget de nivel superior junto al widget MaterialApp que se utiliza para crear un diseño de material conforme a la interfaz de usuario. Tiene dos propiedades importantes, appBar para mostrar el encabezado de la aplicación y body para mostrar el contenido real de la aplicación. AppBar es otro widget para representar el encabezado de la aplicación y lo hemos usado en la propiedad appBar . En la propiedad del cuerpo , hemos utilizado el widget Center , que lo centra en el widget hijo. El texto es el widget final y más interno para mostrar el texto y se muestra en el centro de la pantalla.

Step 8 - Ahora, ejecute la aplicación usando, Run → Run main.dart

Step 9 - Finalmente, el resultado de la aplicación es el siguiente -