Flutter : créer un bouton rond à partir d'un ElevatedButton

Flutter
1

Je profite du sujet pour te poser la question @AntoLhn :
Est ce qu’il existe un moyen simple de faire un bouton rond a partir d’un elevatedButton ou autre ?
Mon objectif : Faire un bouton rond avec un icon à l’intérieur et choisir les deux couleurs :rofl: :rofl: Un vrai parcours du combattant
Mon code jusqu’ici qui ne fait pas ca du tout … :

ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(100))),
                        onPressed: () {},
                        child: Icon(Icons.access_alarm),
                      ),
2

Avec un ElevatedButton je ferrai comme ça :

ElevatedButton(
  onPressed: () {},
  child: Icon(Icons.menu, color: Colors.white),
  style: ElevatedButton.styleFrom(
    shape: CircleBorder(),
    padding: EdgeInsets.all(20),
    backgroundColor: Colors.blue, // <-- Button color
    foregroundColor: Colors.red, // <-- Splash color
  ),
)

Sinon deuxième solution, il existe un IconButton mais il faut lui mettre un background comme ceci :
Source Doc Flutter : IconButton class - material library - Dart API

Ink(
  decoration: const ShapeDecoration(
    color: Colors.lightBlue,
    shape: CircleBorder(),
  ),
  child: IconButton(
    icon: const Icon(Icons.android),
    color: Colors.white,
    onPressed: () {},
  ),
),

Ou alors maintenant il existe une possibilité de mettre du style plus facilement sue les IconButton :

IconButton(
  icon: const Icon(Icons.filter_drama),
  onPressed: () {},
  style: IconButton.styleFrom(
    foregroundColor: colors.onPrimary,
    backgroundColor: colors.primary,
    disabledBackgroundColor: colors.onSurface.withOpacity(0.12),
    hoverColor: colors.onPrimary.withOpacity(0.08),
    focusColor: colors.onPrimary.withOpacity(0.12),
    highlightColor: colors.onPrimary.withOpacity(0.12),
    ),
),

Voila, voila :slight_smile:

3

Merci Antonin @AntoLhn : Mes cheveux se verront un temps épargné grâce a ton coup de main :wink:

1 « J'aime »
4

Avec plaisir @Xababa_Dalabama !
Bon code à toi :wink:

1 « J'aime »
5

Pour info, j’ai déplacé la 2ème conversation dans un fil dédié car ça :

  • permet de marquer chaque question avec une bonne solution
  • facilite la recherche de solutions à l’avenir
  • ne notifie que les personnes concernées à chaque message

En règle générale, il vaut mieux créer plusieurs petits fils de discussion que d’en réutiliser un pour plusieurs sujets :wink:

Happy coding!

2 « J'aime »