Cómo empezar a utilizar tu primera aplicación Flutter

Introducción

Flutter es un framework de código abierto creado por Google que se centra en la creación de aplicaciones multiplataforma. Flutter está orientado principalmente a iOS y Android, pero cada vez más también está incorporando compatibilidad con plataformas de escritorio.

Nota: Las aplicaciones Flutter se crean con el lenguaje de programación Dart. Si no tienes experiencia con Dart, es posible que quieras comenzar por obtener una descripción general del lenguaje primero.

En este artículo, creará su primera aplicación Flutter y explorará el código generado.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Para descargar e instalar Flutter .
• Para descargar e instalar Android Studio o Visual Studio Code , Android Studio ofrece un IDE integrado y con muchas funciones que es compatible con Flutter. Visual Studio Code ofrece un soporte más ligero, pero funcional.
• Se recomienda instalar complementos para su editor de código:
  • Fluttery Dartcomplementos instalados para Android Studio.
  • Flutterextensión instalada para Visual Studio Code.

Este artículo se escribió originalmente con Flutter 1.2.x. Se actualizó para que sea compatible con Flutter 1.22.2.

Paso 1: creación de un nuevo proyecto Flutter

Una vez que haya instalado Flutter y tenga instaladas las dependencias adecuadas (Android SDK o XCode según su máquina), ahora puede crear un nuevo proyecto Flutter.

Primero, abra su ventana de terminal, navegue hasta el directorio donde desea iniciar su proyecto y ejecute el siguiente comando:

flutter create hello_flutter

A continuación, cambie al directorio del proyecto:

cd hello_flutter

Luego, abra este proyecto con el editor de código de su elección.

Paso 2: Lanzamiento del proyecto

Consulte la documentación para ejecutar el código en Visual Studio Code o Android Studio .

Por ejemplo, con Visual Studio Code, abra Ejecutar y depurar :

Luego, selecciona Dart Flutter en el menú desplegable y luego elige la hello_flutterconfiguración. Especifica el simulador (ya sea web, iOS o Android) en la barra de estado. Y ejecuta la aplicación presionando Iniciar depuración (que se parece a un botón de “Reproducir”).

A continuación podrá observar la aplicación de demostración en el simulador o navegador:

Android Studio requerirá que especifiques un dispositivo y selecciones una configuración.

Paso 3: Exploración del código

¡Has creado tu primera aplicación Flutter y la has ejecutado en un emulador! En esta sección, leerás parte del código.

Nota: El código de inicio generado por flutteres parte del código base oficial de Flutter y está disponible bajo la siguiente licencia .

Ahora, ábrelo lib/main.darten tu editor de código.

MyApp

La primera parte del archivo define MyApp. Esta clase extiende StatelessWidget:

lib/main.dart

import 'package:flutter/material.dart';void main() {  runApp(MyApp());}class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter Demo',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: MyHomePage(title: 'Flutter Demo Home Page'),    );  }}// ...

Primero, importamos el Materialpaquete desde Flutter. Esto es lo que le da a nuestra aplicación el aspecto de Material Design y el acceso posterior a los widgets y la funcionalidad de estilo Material.

Luego, registramos el MyAppwidget como el widget principal de nuestra aplicación usando el runAppmétodo.

Dentro de MyApp, devolvemos un buildmétodo de tipo Widgetque devuelve un MaterialApp. MaterialAppContiene metadatos como el actual ThemeData, la aplicación title, la ruta actual home, etc.

Nota: No tenemos que usarlo MaterialAppaquí, también podríamos usar el estilo iOS CupertinoAppo un estilo personalizado con WidgetsApp.

MyHomePage

La siguiente parte del archivo define MyHomePage. Esta clase extiende StatefulWidget:

lib/main.dart

// ...class MyHomePage extends StatefulWidget {  MyHomePage({Key key, this.title}) : super(key: key);  final String title;  @override  _MyHomePageState createState() = _MyHomePageState();}// ...

La última parte de este archivo define _MyHomePageState. Esta clase se extiende Statepara ese widget y el buildmétodo. Si alguna vez usaste React, esto es similar al rendermétodo de JSX.

Una de las cosas más importantes a tener en cuenta con el ejemplo anterior es el hecho de que estamos anulando el createStatemétodo para proporcionar nuestra propia forma de gestionar el estado:

lib/main.dart

// ...class _MyHomePageState extends StateMyHomePage {  int _counter = 0;  void _incrementCounter() {    setState(() {      _counter++;    });  }  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text(widget.title),      ),      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          children: Widget[            Text(              'You have pushed the button this many times:',            ),            Text(              '$_counter',              style: Theme.of(context).textTheme.headline4,            ),          ],        ),      ),      floatingActionButton: FloatingActionButton(        onPressed: _incrementCounter,        tooltip: 'Increment',        child: Icon(Icons.add),      ),    );  }}

Por lo tanto, el _counterestado se puede cambiar con setState(). A continuación, definimos el buildmétodo que crea un Scaffoldpara nuestra aplicación que contiene un appBary un body.

La Scaffoldclase se puede considerar como un contenedor de nivel superior cuando se utiliza MaterialApp. Esto nos permite agregar fácilmente barras de navegación, botones de acción flotantes, cajones, evitar muescas y mucho más.

Siempre que llamamos a setState(), también se llama al método del widget build, por lo que se actualiza la vista y se vuelve a dibujar con el nuevo estado. En nuestro ejemplo, puedes ver que estamos haciendo esta llamada a setStatedentro de FloatingActionButtona través de la onPressed: _incrementCounterfunción.

Conclusión

En este artículo, creó su primera aplicación Flutter y exploró el código generado.

Aproveche para experimentar con la aplicación y cambiar valores del contador y del texto.

Continúa tu aprendizaje consultando nuestra página de temas de Flutter para encontrar ejercicios y proyectos de programación.