Le widget floatingActionButton dans flutter

Scaffold(
floatingActionButton: FloatingActionButton(),
),

• La propriété Regular (56 x 56)
FloatingActionButton(
onPressed: onPressed,
child: Icon(Icons.edit),
)

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

• La propriété Large (96 x 96)
FloatingActionButton.large(
onPressed: onPressed,
child: Icon(Icons.edit),
)

• 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:

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

Scaffold(
    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat
)

• 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.

• Dans une nouvelle application flutter réaliser l’écran représenté par l’image suivant:

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