main.dart

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Home());
  }
}

// L'esempio è molto semplice: abbiamo una scritta che indica
// un valore true o false ed un pulsante per cambiarlo.

// Quindi, dal punto di vista dell'architettura del codice,
// abbiamo uno StatefulWidget che ci permette di gestire e cambiare lo stato true|false
// ed uno StatelessWidget che funge da componente esterno che abbiamo estratto per
// rendere il codice più pulito.

// Questo è il componente che contiene uno stato true/false e
// ci permette di cambiarlo tra questi due.
// Qui all'interno è permesso il setState.
class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  // La variabile che andremmo a cambiare tra true e false
  bool clicked = false;

  // La funzione che cambia lo stato. Questa verrà passata come riferimento
  // al nostro componente personalizzato, che la invocherà quando il pulsante verrà
  // cliccato.
  // Tuttavia da notare che questa funzione è all'interno del nostro StatefulWidget, quindi
  // il suo "contesto" è questo. Ovvero ha accesso al setState.
  void toggleClicked() {
    setState(() {
      clicked = !clicked;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Column(mainAxisSize: MainAxisSize.min, children: [
      Text('Clicked: $clicked'),
      PersonalizedButton(onPressed: toggleClicked),
    ])));
  }
}

// Il nostro componente esterno, che prende il callback (ovvero la funzione)
// da richiamare.
// Nota: un callback non è altro che una funzione che viene passata come riferimento e poi invocata da un
// componente esterno. E' semplicemente un nome più "preciso" per indicare questo genere di funzioni.
class PersonalizedButton extends StatelessWidget {
  // Definiamo il costruttore. Qui da notare che usiamo le parentesi angolari "{" e "}"
  // per racchiudere il nostro attributo. Questo ci permette di chiamarlo per nome
  // sopra: PersonalizedButton(onPressed: toggleClicked).
  PersonalizedButton({@required this.onPressed});
  final Function onPressed;

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      // Passiamo semplicemente la funzione come riferimento al onPressed del pulsante.
      // Quando questo verrà cliccato, la funziona sarà automaticamente invocata.
      onPressed: onPressed,
      child: Text("You can click me to toggle the value!"),
    );
  }
}