Le widget OutlinedButton dans flutter

Sommaire

1- Présentation
2- Créer un Widget OutlinedButton dans Flutter
3- Exemples
4- Application
4.1.1- Cours Flutter

Le widget OutlinedButton dans flutter

Présentation

Le OutlinedButton a été introduit avec la sortie de Flutter v1.22 en octobre 2020. Comme il a été publié pour résoudre les problèmes associés aux anciens boutons Flutter, la façon de changer la couleur du OutlinedButton a également changé.
Comme ElevatedButton a remplacé l’un des widgets précédents, OutlinedButton a pris la place de OutlineButton.
Un OutlinedButton s’affiche avec un paramètre child obligatoire.
Les éléments enfants peuvent être un seul Text ou un widget Icon ou une combinaison des deux ou tout autre arbre de widgets que nous fournissons.
Un autre paramètre requis est onPressed qui accepte un rappel de méthode à gérer lors d’un clic lorsque l’utilisateur touche OutlinedButton.
Différent de ElevatedButton, OutlinedButton sera affiché avec une bordure autour des widgets enfants que nous lui transmettrons.

Créer un Widget OutlinedButton dans Flutter

Voici comment vous pouvez créer un widget OutlinedButton dans Flutter :
Importez les packages nécessaires :

import 'package:flutter/material.dart';

Dans votre classe de widget, créez une variable pour stocker le texte du bouton :

String _buttonText = "Mon bouton";

Dans votre méthode build, ajoutez le widget OutlinedButton :

OutlinedButton(
  child: Text(_buttonText),
  onPressed: () {
    // Code à exécuter lorsque le bouton est pressé
  },
)

Vous pouvez également personnaliser les propriétés de votre bouton, telles que la couleur de fond, la couleur de bordure, la largeur de bordure, etc. :

OutlinedButton(
  child: Text(_buttonText),
  onPressed: () {
    // Code à exécuter lorsque le bouton est pressé
  },
  color: Colors.blue,
  borderSide: BorderSide(
    color: Colors.blue,
    width: 2.0,
  ),
)

Voilà, vous avez maintenant un widget OutlinedButton fonctionnel dans votre application Flutter !

Exemples

Exemple-01

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: OutlinedButton(
            child: Text("Button"),
            onPressed: _onButtonPressed,
          ),
        ),
      ),
    );
  }

  void _onButtonPressed() {
    print("Button pressed!");
  }
}

Dans cet exemple, lorsque l’utilisateur appuie sur le bouton, la fonction de rappel définie dans l’attribut « onPressed » sera appelée. Vous pouvez remplacer « //Code à exécuter lorsque le bouton est pressé » par le code que vous souhaitez exécuter lorsque le bouton est pressé.

Exemple-02

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: OutlinedButton(
            onPressed: () {
              _showAlert(context);
            },
            child: Text('Cliquez ici'),
          ),
        ),
      ),
    );
  }

  void _showAlert(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Bouton cliqué'),
          content: Text('Vous avez cliqué sur le bouton OutlinedButton'),
          actions: [
            FlatButton(
              child: Text('Fermer'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }
}

Dans cet exemple, nous utilisons un bouton OutlinedButton avec l’attribut onPressed qui définit la fonction de rappel à exécuter lorsque le bouton est cliqué. La fonction de rappel _showAlert affiche une boîte de dialogue avec un message indiquant que le bouton a été cliqué.

Application

1- Qu’est-ce qu’un OutlinedButton dans Flutter ?

Solution

Réponse :

2- Comment personnaliser l’apparence d’un OutlinedButton dans Flutter ?

Solution

Réponse

3- Comment gérer les événements de clic sur un OutlinedButton dans Flutter ?

Solution

Réponse

4- Est-il possible de désactiver un OutlinedButton dans Flutter ?

Solution

Réponse

5- Comment personnaliser le contour d’un OutlinedButton dans Flutter?

Solution

Réponse

6- Peut-on changer la couleur d’un OutlinedButton lorsqu’il est appuyé?

Solution

Réponse

7- Comment utiliser un OutlinedButton pour exécuter une action lorsqu’il est appuyé?

Solution

Réponse

OutlinedButton(
onPressed: () {
print('Button pressed');
},
child: Text('Press me'),
)

8- Quelle est la différence entre un OutlinedButton et un TextButton dans Flutter?

Solution

Réponse

9- Peut-on changer la police d’un OutlinedButton dans Flutter?

Solution

Réponse

10- Peut-on utiliser un OutlinedButton pour une action principale dans une application Flutter?

Solution

Réponse

Flutter

Le widget OutlinedButton dans flutter