1
votes

Arrière-plan dégradé sur FloatingActionButton dans Flutter

Est-il possible de définir la couleur d'arrière-plan de FAB en dégradé au lieu de couleur unie?

Mon bouton:

floatingActionButton: FloatingActionButton(
    backgroundColor: const Color(0xFFFF006E),
    child: const Icon(Icons.add, size: 40.0),
    onPressed: () {
        print('Start');
    },
),

flutter

0 commentaires

3 Réponses :

7
votes

J'espère que cela fonctionnera,

floatingActionButton: FloatingActionButton(
          child: Container(
            width: 60,
            height: 60,
            child: Icon(
              Icons.add,
              size: 40,
            ),
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                gradient: LinearGradient(colors: [Colors.red, Colors.blue])),
          ),
          onPressed: () {},
        )

0 commentaires

2
votes

Utilisation peut utiliser un Container avec le dégradé souhaité

floatingActionButton: FloatingActionButton(
            child: Container(
              height: 60,
              width: 60,
              decoration: BoxDecoration(
                shape: BoxShape.circle, // circular shape
                gradient: LinearGradient(
                  colors: [
                    Colors.blueAccent,
                    Colors.red,
                  ],
                ),
              ),
              child: Icon(
                Icons.add,
                color: Colors.white,
              ),
            ),
          )

0 commentaires

0
votes

J'espère que cela fera l'affaire ....

 FloatingActionButton(
    onPressed: () {},
      child: Container(
        height: 60,
        width: 60,
        decoration: BoxDecoration(
          shape: BoxShape.circle, 
          gradient: LinearGradient(
            colors: [
              Colors.teal,
              Colors.tealAcent
            ],
          ),
        ),
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
      ),
    )

0 commentaires