CODEWITHSUNDEEP
flutterdart
zrhl
zrhl

Reputation: 117

Flutter - Gradient color FloatingActionButton

I have my FAB as follows:

Container(
        height: height,
        width: width,
        child: FloatingActionButton.extended(
          disabledElevation: 0.0,
          heroTag: heroTag,
          elevation: elevation,
          backgroundColor: buttonColor,
          isExtended: true,
          label: TextWidget(
            text,
            fontSize: fontSize == null ? 14.w : fontSize,
            fontWeight: FontWeight.w600,
            color: textColor,
          ),
        ));

How can I change the backgroundColor property to Gradient instead of a color? Wrapping FAB inside Container doesn't work.

Upvotes: 0

Views: 1286

Answers (1)

Guillaume Roux
Guillaume Roux

Reputation: 7328

FloatingActionButton doesn't have any gradient related property so your gradient should be inside your Container:

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        offset: Offset(0, elevation),
        blurRadius: 6,
      ),
    ],
    borderRadius: BorderRadius.circular(90),
    gradient: LinearGradient(colors: [Colors.green, Colors.red]),
  ),
  child: FloatingActionButton.extended(
    isExtended: true,
    elevation: 0,
    onPressed: () {},
    label: TextWidget(
      text,
      fontSize: fontSize == null ? 14.w : fontSize,
      fontWeight: FontWeight.w600,
      color: textColor,
    ),
    backgroundColor: Colors.transparent,
  ),
)

You need to set the elevation to 0 and your backgroundColor to Colors.transparent so you will see the Container's gradient and you will simulate the elevation with the Container's boxShadow property.

Upvotes: 1

Related Questions