Widgets Interactifs

Boutons

TextButton : Bouton texte simple

Le TextButton est un bouton plat sans bordure ni élévation, idéal pour les actions secondaires.

TextButton(
  onPressed: () {
    print('TextButton pressé');
  },
  child: const Text('Cliquer'),
)

ElevatedButton : Bouton avec élévation

Le ElevatedButton est un bouton avec une ombre et une élévation, idéal pour les actions principales.

ElevatedButton(
  onPressed: () {
    print('ElevatedButton pressé');
  },
  child: const Text('Envoyer'),
)

IconButton : Bouton icône

Le IconButton affiche une icône cliquable, souvent utilisé dans les barres d'outils.

IconButton(
  icon: const Icon(Icons.favorite),
  onPressed: () {
    print('Favori ajouté');
  },
)

OutlinedButton : Bouton avec bordure

Le OutlinedButton est un bouton avec une bordure mais sans fond, idéal pour les actions tertiaires.

OutlinedButton(
  onPressed: () {
    print('OutlinedButton pressé');
  },
  child: const Text('Annuler'),
)

Saisie de texte

TextField : Champ de saisie basique

Le TextField permet à l'utilisateur de saisir du texte.

TextField(
  decoration: const InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Nom',
    hintText: 'Entrez votre nom',
  ),
  onChanged: (value) {
    print('Texte saisi : $value');
  },
)

Contrôleur de texte

Un TextEditingController permet de contrôler et récupérer la valeur d'un TextField.

class MyWidget extends StatefulWidget {
  const MyWidget();

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _afficherValeur() {
    print('Valeur : ${_controller.text}');
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: _controller,
          decoration: const InputDecoration(labelText: 'Nom'),
        ),
        ElevatedButton(
          onPressed: _afficherValeur,
          child: const Text('Afficher'),
        ),
      ],
    );
  }
}

Widgets de sélection

Checkbox : Case à cocher

class CheckboxExample extends StatefulWidget {
  const CheckboxExample();

  @override
  State<CheckboxExample> createState() => _CheckboxExampleState();
}

class _CheckboxExampleState extends State<CheckboxExample> {
  bool _isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Checkbox(
      value: _isChecked,
      onChanged: (bool? value) {
        setState(() {
          _isChecked = value ?? false;
        });
      },
    );
  }
}

Switch : Interrupteur

class SwitchExample extends StatefulWidget {
  const SwitchExample();

  @override
  State<SwitchExample> createState() => _SwitchExampleState();
}

class _SwitchExampleState extends State<SwitchExample> {
  bool _isEnabled = false;

  @override
  Widget build(BuildContext context) {
    return Switch(
      value: _isEnabled,
      onChanged: (bool value) {
        setState(() {
          _isEnabled = value;
        });
      },
    );
  }
}

Radio : Bouton radio

class RadioExample extends StatefulWidget {
  const RadioExample();

  @override
  State<RadioExample> createState() => _RadioExampleState();
}

class _RadioExampleState extends State<RadioExample> {
  String? _selectedOption = 'option1';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        RadioListTile<String>(
          title: const Text('Option 1'),
          value: 'option1',
          groupValue: _selectedOption,
          onChanged: (String? value) {
            setState(() {
              _selectedOption = value;
            });
          },
        ),
        RadioListTile<String>(
          title: const Text('Option 2'),
          value: 'option2',
          groupValue: _selectedOption,
          onChanged: (String? value) {
            setState(() {
              _selectedOption = value;
            });
          },
        ),
      ],
    );
  }
}

Slider : Curseur

class SliderExample extends StatefulWidget {
  const SliderExample();

  @override
  State<SliderExample> createState() => _SliderExampleState();
}

class _SliderExampleState extends State<SliderExample> {
  double _currentValue = 50;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Valeur : ${_currentValue.round()}'),
        Slider(
          value: _currentValue,
          min: 0,
          max: 100,
          divisions: 10,
          label: _currentValue.round().toString(),
          onChanged: (double value) {
            setState(() {
              _currentValue = value;
            });
          },
        ),
      ],
    );
  }
}

Détection de gestes

GestureDetector : Détection de gestes personnalisés

Le GestureDetector permet de détecter divers gestes (tap, double tap, long press, drag, etc.).

GestureDetector(
  onTap: () {
    print('Tap simple');
  },
  onDoubleTap: () {
    print('Double tap');
  },
  onLongPress: () {
    print('Long press');
  },
  child: Container(
    width: 200,
    height: 100,
    color: Colors.blue,
    child: const Center(child: Text('Touchez-moi')),
  ),
)

InkWell : Effet d'encre au toucher

InkWell est similaire à GestureDetector mais ajoute un effet visuel d'encre (ripple effect).

InkWell(
  onTap: () {
    print('InkWell pressé');
  },
  child: Container(
    padding: const EdgeInsets.all(20),
    child: const Text('Cliquez pour voir l\'effet'),
  ),
)

Widgets de dialogue

AlertDialog : Boîte de dialogue

void _showDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text('Confirmation'),
        content: const Text('Voulez-vous continuer ?'),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: const Text('Annuler'),
          ),
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
              print('Confirmé');
            },
            child: const Text('OK'),
          ),
        ],
      );
    },
  );
}

SnackBar : Notification en bas de l'écran

void _showSnackBar(BuildContext context) {
  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(
      content: Text('Action effectuée avec succès'),
      duration: Duration(seconds: 2),
    ),
  );
}

Bonnes pratiques

1. Désactivation de boutons : Passer null à onPressed pour désactiver un bouton
2. Controllers : Toujours appeler dispose() sur les TextEditingController
3. GestureDetector vs InkWell : Utiliser InkWell pour avoir un feedback visuel
4. Validation : Valider les entrées utilisateur avant de les traiter