Back

Le widget floatingActionButton dans flutter

Le widget floatingActionButton dans flutter

    Le widget floatingActionButton dans flutter

  1. Présentation

    • Chaque composant de Flutter est appelé un widget, et FloatingActionButton ne fait pas exception. Comme son nom l’indique, ce widget flotte au-dessus des autres widgets à l’écran.
    • Le bouton d’action flottant, parfois appelé par son acronyme FAB, a été détaillé précédemment dans les sections AppBar et FloatingActionButton.
    • Ce widget peut être considéré comme faisant partie du Scaffold contrairement aux autres boutons qui, eux, s’intègrent dans la propriété body du Scaffold, au sein d’autres widgets le plus souvent.
    • Le floatingActionButton est un widget déjà aperçu dans l’application du chapitre Ma première application.
    • Il consiste en un bouton flottant situé, par défaut, en bas à droite de l’écran. Il existe un widget qui permet de gérer son emplacement, floatingActionButtonLocation.
    • Ce bouton prend au minimum une propriété onPressed qui désigne une méthode à appeler lors de l’appui sur celui-ci.
    • Généralement, un objet désigné par child lui est aussi associé. Le plus souvent, il s’agit d’une icône. Il existe d’autres propriétés comme backgroundColor.
  2. Créer un Widget floatingActionButton

    • Pour commencer créer un widget MaterialApp.
    • Pour utiliser floatingActionButton dans Flutter, créer le widget Scaffold avec la propriété floatingActionButton :
      • Scaffold(
        floatingActionButton: FloatingActionButton(),
        ),
    • Cela ajoutera FAB à sa position par défaut sur l’écran :
    • Le widget floatingActionButton dans flutter

      Le widget floatingActionButton dans flutter

  3. Les types de floatingActionButton

    • Il existe quatre types de FABS : FAB réguliers, Small FAB, Large FAB et FAB étendus
    • 1.FAB réguliers
      • La propriété Regular (56 x 56)
        • FloatingActionButton(
          onPressed: onPressed,
          child: Icon(Icons.edit),
          )

    • 2.Small FAB
      • Si vous souhaitez réduire la taille de FloatingActionButton dans votre application Flutter, vous pouvez le faire en définissant Small la propriété du floatingActionButtoncomme trueindiqué dans l’exemple ci-dessous.
      • La propriété Small est défini sur :(40 x 40)
        • FloatingActionButton.small(
          onPressed: onPressed,
          child: Icon(Icons.edit),
          )
    • 3.Large FAB
      • La propriété Large (96 x 96)
        • FloatingActionButton.large(
          onPressed: onPressed,
          child: Icon(Icons.edit),
          )
    • 4.FAB étendus
      • Parfois, le FAB régulier ne suffit pas. Vous voudrez peut-être un bouton qui contient à la fois du texte et une icône, mais qui se trouve dans le coin inférieur.
      • Pour ce faire, utilisez un FloatingActionButton.extended comme il est décrit dans l’exemple ci-dessous:
      • Le widget floatingActionButton dans flutter

    • 5.FAB personnalisé
      • Pour modifier la taille du bouton d’action flottant, enveloppez-le avec le widget SizedBox() et transmettez une hauteur et une largeur personnalisées.
        • SizedBox( 
              height:100,
              width:100,
              child:FloatingActionButton( 
                 child: Icon(Icons.add), //child widget inside this button
                 onPressed: (){
                      print("Button is pressed.");
                       //task to execute when this button is pressed
                  },
               ),
          ),
  4. Modifier l’emplacement du boutonFloatingActionButton

    • Pour modifier l’emplacement du bouton d’action flottant sur l’écran, utilisez la floatingActionButtonLocation propriété du widget Scaffold().
    • Scaffold(
          floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat
      )
    • Attention, il s’agit bien d’un élément du Scaffold et non du floatingActionButton. Il est donc placé à part de celui-ci.
    • Il peut accepter les valeurs suivantes :
      • centerDocked : le bouton flottant est aligné au centre. Il reste flottant sur une éventuelle bottomNavigationBar. Son centre s’aligne avec le haut de cette barre.
      • centerFloat : le bouton flottant est centré et reste flottant en bas de l’écran.
      • endDocked : le bouton flottant est en bas à droite. Il reste flottant sur une éventuelle bottomNavigationBar. Son centre s’aligne avec le haut de cette barre.
      • endFloat : le bouton est situé en bas à droite et reste flottant.
      • endTop : le bouton est aligné en haut à droite.
      • miniStartTop : le bouton est placé en haut à gauche et il est optimisé pour les mini-boutons flottants.
      • startTop : le bouton est situé en haut à gauche.
    • Voici un exemple, toujours sur le même écran, avec un bouton flottant centré :
    • Exemple d’application Flutter :
    • Production:
  5. Applications

    • App01
      • Dans une nouvelle application flutter réaliser l’écran représenté par l’image suivant:
    • App02
      • La forme de FloatingActionButton est circulaire par défaut. Mais, vous pouvez fournir une forme de bordure Rectangle avec des coins arrondis.
      • Définir la forme de floatingActionButton avec RoundedRectangleBorder(). Fournir borderRadius avec la valeur de rayon requise, comme illustré dans l’écran ci-dessous.

      • Créer une application Flutter de base et remplacez le code dans votre main.dart pour réaliser l’écran de la figure suivante:
        • Solution
          import 'package:flutter/material.dart';
          
          void main() {
            runApp(MaterialApp(
              home: MyApp(),
            ));
          }
          
          class MyApp extends StatefulWidget {
            @override
            _MyAppState createState() => _MyAppState();
          }
          
          class _MyAppState extends State {
          
            @override
            Widget build(BuildContext context) {
              return Scaffold(
                appBar: AppBar(
                  title: new Text("Flutter Tutorial - googleflutter.com"),
                ),
                floatingActionButton: FloatingActionButton(
                  onPressed: (){},
                  child: Icon(Icons.refresh),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(Radius.circular(15.0))
                  ),
                ),
              );
            }
          }
          



Riadh HAJJI

Abonnez vous à notre chaîne YouTube gratuitement