Quels sont les types de widgets dans Flutter?

Dans Flutter, les widgets sont divisés en deux catégories principales:

• StatelessWidget : Widgets dont l'état ne change pas après la compilation initiale. Ils décrivent une partie de l'interface utilisateur qui ne dépend pas de données en temps réel.
• StatefulWidget : Widgets avec un état mutable. Ils ont un objet associé State, qui contient des données modifiables et fournit un mécanisme pour reconstruire le widget lorsque l'état change.

De plus, les widgets peuvent être classés selon leur but:

• Widgets de mise en page : Contrôlent la disposition d'autres widgets à l'écran (par exemple, Row, Column, Stack).
• Composants Material / widgets Cupertino : Fournissent des éléments d'interface utilisateur prêts à l'emploi conformes aux directives Material Design (Android) ou Cupertino (iOS) (par exemple, AppBar, Button, TextField).
• Widgets d'entrée : Permettent à l'utilisateur d'interagir avec l'application (par exemple, TextField, Checkbox, Slider).
• Widgets interactifs : Réagissent aux gestes de l'utilisateur (par exemple, GestureDetector, InkWell).
• Widgets de peinture et d'effets : Appliquent des effets graphiques (par exemple, Opacity, ClipRRect).
• Widgets de défilement : Permettent le défilement du contenu (par exemple, ListView, GridView).

Selon la méthode de création, les widgets peuvent être:

• Primitifs : Blocs de construction de base (par exemple, Container, Text, Icon).
• Composés : Composés d'autres widgets.

// Exemple de StatefulWidget
class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

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

  void _incrementCounter() {
    setState(() {
      // Modifier l'état et déclencher la reconstruction
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Compteur:'),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
        FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Augmenter',
          child: Icon(Icons.add),
        ),
      ],
    );
  }
}

// Exemple de StatelessWidget
class TitleWidget extends StatelessWidget {
  final String title;

  TitleWidget({required this.title});

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