dev flutter banner 850x455

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 :

Grand bouton d’action flottant circulaire

 

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 :

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

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 :

FloatingActionButton et BottomNavigationBar à encoche

 

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.

 

 


Publié par

Claude BUENO

J’aide les équipes à développer leurs pratiques agiles et collaboratives. Je blogue depuis 2008 sur la transformation numérique, le développement d'applications web et mobile et les pratiques pour les réaliser dans les meilleures conditions. Sujets de prédilection : agilité, coaching, digital, management, marketing, développement web et mobile

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *