Gradient background on FloatingActionButton in Flutter

user_4548248 0
Viewed 6479

Is it possible to set backgroundColor of FAB to gradient instead of plain color?

My button:

floatingActionButton: FloatingActionButton(
    backgroundColor: const Color(0xFFFF006E),
    child: const Icon(Icons.add, size: 40.0),
    onPressed: () {
        print('Start');
    },
),
flutter
4 Answers
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: () {},
)
user_111342880

Use can use a Container with the Gradient you want

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

I Hope this will do ....

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

I found this solution. I don't need to set the height and width. Firstly I wrapped the floating action button with a container. Then I changed the background color of the floating action button to transparent.

Example code:

Container(
    decoration: BoxDecoration(
    gradient: LinearGradient(
        colors: [
        Colors.yellow,
        Colors.yellow.shade700,
        ],
    ),
    shape: BoxShape.circle,
    ),
    child: FloatingActionButton(
    onPressed: () {},
    backgroundColor: Colors.transparent,
    elevation: 0,
    child: Icon(Icons.home)
    ),
),
user_84259400
Related