Un contatore che sale e scende

Fa parte della sezione Rendere l’app interattiva del percorso Flutter di Coddy. Lezione 13 di 34.

Anche una funzione può trovarsi all'interno della classe State. Lì può leggere le variabili di State e chiamare setState:

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

_count++ è una forma abbreviata di _count = _count + 1, mentre _count-- sottrae uno. Una funzione che appartiene a una classe si chiama metodo, e una funzione privata inizia con _, proprio come le variabili.

Passala a un pulsante usando il suo nome, senza parentesi, come in Your Own Functions: IconButton(icon: Icon(Icons.add), onPressed: _increase).

Sfida

Facile

Il contatore aumenta soltanto. Aggiungi un metodo _decrease che sottrae uno all’interno di setState e un IconButton con Icons.remove prima del numero che lo richiama.

Provalo tu

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),
          ],
        ),
      ),
    );
  }
}