Flutter : Exemples de boutons d’action flottants

A travers cet article je vous montre comment créer des boutons pour vos applications mobiles Flutter. A travers 3 exemples différents d’utilisation de FloatingActionButton (FAB) dans Flutter. Ces exemples sont classés dans l’ordre, de basique à avancé, de simple à complexe. Commençons…

Grand bouton d’action flottant circulaire

Vous pouvez créer un grand bouton d’action flottant circulaire à l’aide du constructeur FloatingActionButton.large.

Capture d’écran :

Code :

home: Scaffold(
  appBar: AppBar(
    title: const Text("Exemples de boutons d'\action flottants"),
    backgroundColor: Colors.indigo,
  ),
  floatingActionButton: FloatingActionButton.large(
    onPressed: () {},
    child: const Icon(Icons.waving_hand),
    backgroundColor: Colors.deepOrange,
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.startFloat,
)

Bouton d’action flottant Pill avec texte et icône

Vous pouvez facilement créer un bouton d’action flottant de type pilule avec du texte et une icône en utilisant le constructeur FloatingActionButton.extended.

Capture d’écran :

Code :

home: Scaffold(
  appBar: AppBar(
    title: const Text("Exemples de boutons d'\action flottants"),
    backgroundColor: Colors.indigo,
  ),
  floatingActionButton: FloatingActionButton.extended(
    onPressed: () {},
    icon: const Icon(Icons.play_arrow),
    label: const Text('Play Video'),
    backgroundColor: Colors.indigoAccent,
  ),
)

FloatingActionButton et BottomNavigationBar à encoche

Dans l’exemple suivant, nous allons créer une barre de navigation inférieure incurvée avec une encoche (une découpe en demi-cercle) au milieu. À cet endroit, nous plaçons un bouton d’action flottant.

Capture d’écran :

Code :

home: Scaffold(
  appBar: AppBar(
    title: const Text("Exemples de boutons d'\action flottants"),
    backgroundColor: Colors.blueGrey,
  ),
  // The bottom navigation bar
  bottomNavigationBar: BottomAppBar(
    color: Colors.blueGrey,
    // this creates a notch in the center of the bottom bar
    shape: const CircularNotchedRectangle(),
    notchMargin: 6,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        IconButton(
          icon: const Icon(
            Icons.home,
            color: Colors.white,
          ),
          onPressed: () {},
        ),
        IconButton(
          icon: const Icon(
            Icons.people,
            color: Colors.white,
          ),
          onPressed: () {},
        ),
        const SizedBox(
          width: 20,
        ),
        IconButton(
          icon: const Icon(
            Icons.notifications,
            color: Colors.white,
          ),
          onPressed: () {},
        ),
        IconButton(
          icon: const Icon(
            Icons.settings,
            color: Colors.white,
          ),
          onPressed: () {},
        ),
      ],
    ),
  ),
  // implement the floating button
  floatingActionButton: FloatingActionButton(
      onPressed: () {},
      backgroundColor: Colors.redAccent,
      child: const Icon(Icons.add)),
  floatingActionButtonLocation:
      FloatingActionButtonLocation.centerDocked,
)

Merci de votre lecture.

Faites-moi savoir si vous rencontrez des difficultés, n’hésitez pas à commenter ci-dessous j’aime vous aider. Si vous avez une suggestion de nouvel article ou tutoriel alors exprimez-vous en commentant.

N’oubliez pas de partager ce tutoriel avec vos amis sur Facebook et Twitter.