Un contador que sube y baja

Parte de la sección Cómo hacerla interactiva del Journey de Flutter de Coddy. Lección 13 de 34.

Una función también puede estar dentro de la clase State. Allí puede leer las variables de State y llamar a setState:

void _increase() {
  setState(() {
    _count++;
  });
}

_count++ es una forma abreviada de _count = _count + 1, y _count-- resta uno. Una función que pertenece a una clase se llama método, y una privada empieza con _, como las variables.

Pásasela a un botón por su nombre, sin paréntesis, como en Tus propias funciones: IconButton(icon: Icon(Icons.add), onPressed: _increase).

Desafío

Fácil

El contador solo aumenta. Agrega un método _decrease que reste uno dentro de setState, y un IconButton con Icons.remove antes del número que lo invoque.

Pruébalo tú mismo

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 0;

  void _increase() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('$_count', style: TextStyle(fontSize: 48)),
            IconButton(icon: Icon(Icons.add), onPressed: _increase),
          ],
        ),
      ),
    );
  }
}