Les boutons Flutter pour déclencher un événement

Les boutons sont l’élément graphique qui permet à un utilisateur de déclencher un événement. Dans Flutter, il existe plusieurs types de boutons que nous pouvons utiliser, tels que ElevatedButton, TextButton, OutlinedButton, etc.

Un nouvel environnement de boutons a été introduit dans les dernières versions de Flutter. Si vous n’avez pas encore eu le temps de les vérifier, je vous recommande fortement de le faire car l’utilisation des nouveaux boutons Flutter peut vous faire gagner beaucoup de temps lors de la création d’applications mobiles.

En fait, les nouveaux boutons disponibles dans Flutter sont plus faciles à comprendre et à utiliser. Ils simplifient la définition de thèmes communs au niveau des applications et des widgets.

Eh bien, nous allons essayer de créer un TextButton. Mais, vous pouvez essayer de suivre le didacticiel précédent Tutoriel.

Le bouton TextButton

Nous ajoutons d’abord un widget TextButton, puis un widget Text. Cette première étape est l’étape la plus basique dans la création d’un TextButton.
Afin d’améliorer l’apparence du bouton, nous devons ajouter de la couleur au bouton. De plus, vous pouvez changer la couleur du texte, en utilisant le widget TextStyle.
Pour définir la taille du bouton, nous pouvons ajouter un widget Container, qui peut également être utilisé pour définir la forme des boutons que nous créons.
Aussi, ajouter une bordure aux bouton, en lui donnant une forme avec RoundedRectangleBorder et ajouter un borderRadius à notre convenance.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Les bouttons'),
      ),
      body: Container(
        width: 200,
        height: 45,
        child: TextButton(
          style: TextButton.styleFrom(
            backgroundColor: Color(0xffF18265),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20),
            ),
          ),
          onPressed: () {},
          child: Text(
            "TextButton",
            style: TextStyle(
              color: Color(0xffffffff),
            ),
          ),
        ),
      ),
    );
  }
}

Le bouton ElevatedButton

Le bouton ElevatedButton est une alternative à RaisedButton. Ce bouton possède une élévation, donc ne l’utilisez pas lorsque le contenu contient une ombre et une élévation. Généralement, ElevatedButtonTheme est utilisé pour styliser ce bouton.

ElevatedButton(
          child: Text(
            'Elevated Button',
            style: TextStyle(
              color: Colors.black,
            ),
          ),
          style: ElevatedButton.styleFrom(
            primary: Colors.yellow,
            onPrimary: Colors.white,
          ),
          onPressed: () {},
        )

Les boutons OutlinedButton

OutlinedButton permet d’afficher une action à l’écran, mais avec une bordure de contour et sans zone de remplissage. Les paramètres requis sont les mêmes, child et onPressed.

Container(
          width: 200,
          height: 45,
          child: OutlinedButton(
            onPressed: () {},
            child: Text(
              "Ouotlined Button",
              style: TextStyle(
                fontSize: 18,
              ),
            ),
          ),

Chaque nouveau bouton de Flutter possède son propre thème, plutôt que de spécifier un thème commun qui s’applique également aux autres boutons. Cela vous donne plus de flexibilité que les anciens boutons Flutter, à savoir FlatButton , RaisedButton et OutlineButton.

IconButton

IconButton se comporte comme un bouton, mais avec une icône au lieu d’un bouton simple.

body: Center(
        child: IconButton(
            icon: Icon(
              Icons.add_comment,
            ),
            iconSize: 50,
            color: Colors.green,
            splashColor: Colors.purple,
            onPressed: () {}),
      ),

En fait, vous pouvez changer la couleur de IconButton en utilisant la propriété color de la classe IconButton. Ou encore, modifier la taille du widget avec la propriété iconSize.

Le widget InkWell

InkWell est un widget Flutter qui permet de créer un effet de changement de couleur lorsqu’un bouton est appuyé. Enveloppez le widget InkWell dans un widget Material pour définir les propriétés de couleur.

body: Material(
        color: Colors.green,
        child: InkWell(
            child: Container(
              width: 200,
              height: 80,
              alignment: Alignment.center,
              child: Text('InkWell'),
            ),
            onTap: () {}),
      ),

Il existe plusieurs propriétés que vous pouvez tester, utilisez Ctrl+Espace pour afficher les possibilités d’un widget ou d’une propriété.