capitan apps

curso-flutter

1.5.2 Conoce los principales componentes de tu aplicaciĆ³n.

cap
April 1, 2021
Tiempo de lectura: 4 minutos

Analicemos nuestro cĆ³digo generado y agreguemos modificaciones para ir aprendiendo Flutter.

En la barra izquierda donde tenemos el explorador de archivos, encontramos la siguiente estructura de carpetas.

VS Code
Android Studio
hello_app
   ā†³android # Configuraciones propias para app android.
   ā†³ios # Configuraciones propias para app ios.
   ā†³lib # Codigo de la aplicaciĆ³n.
     ā†³main.dart 
   ā†³test # Nuestros test.
   ā†³web # ConfiguraciĆ³n del proyecto web.
pubspec.yaml

Comencemos con el archivo pubspec.yaml el cual contiene la informaciĆ³n del proyecto, dependencias y librerĆ­as externas que utiliza. Vamos a reemplazarlo por el siguiente:

hello_app/pubspec.yaml

El siguiente archivo bĆ”sico en cualquier aplicaciĆ³n es el main.dart el cual define la pantalla que mostraremos, asĆ­ como su lĆ³gica. AquĆ­ encontraremos la definiciĆ³n de cada pantalla asĆ­ como su comportamiento. Vamos a reemplazar el contenido con lo que se muestra a continuaciĆ³n:

hello_app/lib/main.dart

El IDE nos permite directamente ejecutar nuestro cĆ³digo dando click en un botĆ³n para correr nuestro programa, el cual internamente compilarĆ” y ejecutarĆ” nuestro proyecto.

VS Code
Lo encontramos en la esquina superior derecha.
Android Studio
Lo encontramos en la parte superior central.

Al dar clic en el botĆ³n el IDE empezarĆ” a compilar y ejecutar nuestra aplicaciĆ³n, que en este caso se ejecutarĆ” en el explorador web.

Analizando el cĆ³digo

Ahora vamos a revisar mƔs a detalle cada archivo que hemos creado.

hello_app/pubspec.yaml
name: hello_app
description: A new Flutter project.

publish_to: 'none' 
version: 1.0.0+1

name: Por buena prĆ”ctica y para evitar errores de compilaciĆ³n se recomienda mantener el mismo nombre que la carpeta que lo contiene.

description: La descripciĆ³n de nuestro proyecto.

publish_to: ‘none’ significa que serĆ” un proyecto privado.

version: La versiĆ³n de nuestra aplicaciĆ³n (La debemos de ir cambiando con cada nueva versiĆ³n que vayamos liberando).

environment:
  sdk: '>=2.12.0 <3.0.0'

enviroment: Es la versiĆ³n de Dart con la cual estaremos trabajando. 

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

Agregamos las dependencias que utilizarĆ” nuestra aplicaciĆ³n.

flutter: Agregamos Flutter SDK como parte de las dependencias.

cupertino_icons: Agregamos los iconos de Cupertino Widget. (No te preocupes, este tema lo cubriremos mas adelante).

flutter:
  uses-material-design: true

uses-material-design: Habilitamos los iconos de Material Design de Google para poder utilizarlos en la app.

Ahora revisaremos el archivo main.dart que es el punto de inicio de nuestra aplicaciĆ³n.

hello_app/lib/main.dart
import 'package:flutter/material.dart';

import: Para importar el paquete de Material Design icons y poder utilizarlos en la pantalla.

void main() {
  runApp(MyApp());
}

Cuando la app se inicie ejecutarĆ” el mĆ©todo main(), el cual contiene el comportamiento y apariencia de la aplicaciĆ³n.

La vida es un widget

En flutter todo es un widget. Existen 2 tipos de widgets: Widget con estado (StatefulWidget) y sin estado (StatelessWidget).

class MyApp extends StatelessWidget {

En este caso estamos definiendo una clase llamada MyApp que por herencia serĆ” un tipo de clase StatelessWidget (Widget sin estado).

Debemos de crear el mƩtodo build el cual se encarga de dibujar la apariencia de nuestro componente en pantalla. Cada Pantalla tiene 1 o mƔs de estos componentes, cada uno de los cuales debe de ser diseƱado por nosotros. 

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter App Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text("Flutter Screen title"),
            ),
            body: Center(child: Text("Hola Mundo!"))));
  }
}

MaterialApp: Creamos una instancia de esta clase para dar el diseƱo general de aplicaciĆ³n movil personalizada con el tĆ­tulo (title) y el tema color azul. Este objeto forma parte del paquete material que importamos en la primera linea.

En este caso la propiedad title en la clase MaterialApp se utiliza para asignar el tƭtulo de la pestaƱa en la pƔgina web o en el tƭtulo que se muestra en el administrador de tareas de Android.

MaterialApp(
    title: 'Flutter App Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    )

En Flutter se le llama programaciĆ³n declarativa al tipo de cĆ³digo que escribimos para crear nuestra Interfaz de usuario (User Interface – abreviado UI), en la cual creamos nuestro componente con los atributos de title, theme dentro de nuestro componente principal y agregamos componentes hijos que a su vez cuentan con sus propiedades y sus componentes hijos.

return MaterialApp(
....
  home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Screen title"),
        ),
        body: Center(child: Text("Hola Mundo!"))));

Mediante la propiedad home del objeto MaterialApp indicamos la pantalla inicial de nuestra aplicaciĆ³n, que en este caso es un componente Scaffold.

Scaffold Widget es un contenedor con la estructura bĆ”sica de una app, tiene su propiedad appBar con la cual podemos personalizar la toolbar de nuestra aplicaciĆ³n. En este caso le asignaremos el tĆ­tulo que deseemos mostrar en nuestra pantalla "Flutter Screen title".

Scaffold tambien tiene la propiedad body: con la cuƔl podremos asignar el contenido de nuestra app, usualmente es todo lo que se ve debajo de la toolbar hasta donde se termina la pantalla. En este caso estamos agregando un componente de diseƱo de centrado (Center) que tiene un hijo (child:) de tipo Texto (Text) que mostrara nuestro texto en la app.

Web

Android

Referencias:

https://api.flutter.dev/flutter/material/material-library.html

https://api.flutter.dev/flutter/material/Scaffold-class.html



ĀæTe estĆ” gustando este curso? AquĆ­ hay mĆ”s temas que otras personas estĆ”n viendo en este momento.
Recommended Reads