Le widget floatingActionButton dans flutter

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.

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 :

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:

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
        },
     ),
),

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:

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))
        ),
      ),
    );
  }
}

Flutter

Le widget floatingActionButton dans flutter