Añadir interacción y funcionalidad a tu primera APP Flutter

Tiempo de lectura: 2 minutos

Una vez que tienes la estructura básica de tu aplicación en su lugar, puedes comenzar a agregar interacción y funcionalidad adicionales utilizando eventos y estados.

Los eventos son acciones que ocurren en tu aplicación, como cuando un usuario toca un botón o introduce texto en un cuadro de texto. Puedes manejar estos eventos en Flutter asignando una función de «manejador» a cada evento.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MiPantalla(),
    ),
  );
}

class MiPantalla extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mi pantalla'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            print('Botón presionado!');
          },
          child: Text('Presionar'),
        ),
      ),
    );
  }
}

En este ejemplo, hemos agregado un botón a nuestra pantalla y hemos asignado una función de manejador de evento al evento onPressed. Cuando el usuario presiona el botón, se llamará a esta función y se imprimirá «Botón presionado!» en la consola.

Los estados son valores que cambian en tu aplicación y que pueden afectar la apariencia o el comportamiento de tu interfaz de usuario. Para gestionar los estados en Flutter, puedes utilizar un widget llamado StatefulWidget.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MiPantalla(),
    ),
  );
}

class MiPantalla extends StatefulWidget {
  @override
  _MiPantallaState createState() => _MiPantallaState();
}

class _MiPantallaState extends State<MiPantalla> {
  int _contador = 0;

  void _incrementarContador() {
    setState(() {
      _contador++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mi pantalla'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Has presionado el botón este número de veces:',
            ),
            Text(
              '$_contador',
              style: Theme.of(context).textTheme.
              display1,
            ),
          ],
        ),
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: _incrementarContador,
        tooltip: 'Incrementar',
        child: Icon(Icons.add),
      ),
    );
  }
}

hemos creado una variable de estado llamada _contador que lleva el registro de cuántas veces se ha presionado el botón. Cada vez que se presiona el botón, se llama a la función _incrementarContador que aumenta el valor de _contador en uno y llama a setState para indicar que el estado ha cambiado y que la interfaz de usuario necesita ser actualizada.

Flutter proporciona una gran cantidad de widgets que puedes utilizar para construir tu interfaz de usuario, incluyendo botones, cuadros de texto, imágenes y mucho más. También puedes crear tus propios widgets personalizados si necesitas algo más específico.

Además de la interfaz de usuario, también puedes agregar funcionalidades adicionales a tu aplicación utilizando paquetes de Flutter. Hay una gran cantidad de paquetes disponibles en la comunidad Flutter que te permiten hacer cosas como acceder a la cámara, almacenar datos en la nube y mucho más.

Espero que este tutorial te haya ayudado a entender cómo funciona Flutter y cómo puedes comenzar a desarrollar aplicaciones móviles con él.

Si tienes alguna pregunta o necesitas más información, no dudes en preguntar.