Sobes.tech
Junior

Quali sono i tipi di widget in Flutter?

sobes.tech AI

Risposta dell'AI

In Flutter, i widget sono divisi in due categorie principali:

  • StatelessWidget: Widget il cui stato non cambia dopo la compilazione iniziale. Descrivono una parte dell'interfaccia utente che non dipende da dati in tempo di esecuzione.
  • StatefulWidget: Widget con stato mutabile. Hanno un oggetto associato State, che contiene dati modificabili e fornisce un meccanismo per ricostruire il widget quando lo stato cambia.

Inoltre, i widget possono essere classificati in base al loro scopo:

  • Widget di layout: Controllano la disposizione di altri widget sullo schermo (ad esempio, Row, Column, Stack).
  • Componenti Material / widget Cupertino: Forniscono elementi UI pronti all'uso che rispettano le linee guida Material Design (Android) o Cupertino (iOS) (ad esempio, AppBar, Button, TextField).
  • Widget di input: Permettono all'utente di interagire con l'app (ad esempio, TextField, Checkbox, Slider).
  • Widget interattivi: Rispondono ai gesti dell'utente (ad esempio, GestureDetector, InkWell).
  • Widget di pittura ed effetti: Applicano effetti grafici (ad esempio, Opacity, ClipRRect).
  • Widget di scorrimento: Consentono lo scorrimento del contenuto (ad esempio, ListView, GridView).

In base al metodo di creazione, i widget possono essere:

  • Primitivi: Blocchi di costruzione di base (ad esempio, Container, Text, Icon).
  • Composti: Composti da altri widget.
// Esempio di StatefulWidget
class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // Cambia lo stato e ridisegna
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Contatore:'),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
        FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Aumenta',
          child: Icon(Icons.add),
        ),
      ],
    );
  }
}
// Esempio di StatelessWidget
class TitleWidget extends StatelessWidget {
  final String title;

  TitleWidget({required this.title});

  @override
  Widget build(BuildContext context) {
    return Text(
      title,
      style: TextStyle(fontSize: 24),
    );
  }
}