CODEWITHSUNDEEP
dartmaterial-designflutterfloating-action-button
Hector
Hector

Reputation: 447

Flutter: FloatingActionButton shadow

Are you able or is there a way to change the color of the shadow made by the FloatingActionButton.extended or any other floating button ?

Upvotes: 12

Views: 11605

Answers (3)

salma Elshrbiny
salma Elshrbiny

Reputation: 1

floatingActionButton: FloatingActionButton(
        onPressed: (){},
      backgroundColor: Color(0xf0004451),
      elevation: 10,

      child: Container(
        padding: const EdgeInsets.all(14.0),
        decoration: BoxDecoration(
          color: Colors.transparent,
          borderRadius: BorderRadius.all(
            Radius.circular(60),
          ),
          boxShadow: [
            BoxShadow(
              color: Color(0xffE1E8EB).withOpacity(0.35),
              spreadRadius: 8,
              blurRadius: 8,
              offset: const Offset(1, 1),
            ),
          ],
        ),
        child: const Icon(Icons.add,
        color: Color(0xffE1E8EB),
          size: 18,
          shadows: [Shadow(
            color: Color(0xffE1E8EB),
            offset: Offset(0.2, 0.5),
            blurRadius: 5.0,
          )],
        ),
      ),
    ),

Upvotes: 0

salma Elshrbiny
salma Elshrbiny

Reputation: 1

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    floatingActionButton: Container(
      height: 70,
      width: 70,
     margin: const EdgeInsets.only(bottom: 10.0),
      decoration: BoxDecoration(
        color: Colors.transparent,
        borderRadius: const BorderRadius.all(
          Radius.circular(100),
        ),
        boxShadow: [
          BoxShadow(
            color: MyColors.myWhite.withOpacity(0.3),
            spreadRadius: 6,
            blurRadius: 6,
            offset: const Offset(0.5, 0.5),
          ),
        ],
      ),
      child: FittedBox(
        child: FloatingActionButton(
            onPressed: (){},
          backgroundColor: MyColors.myGreen,
          elevation: 10,
            child: const Icon(Icons.add,
            color: MyColors.myWhite,
              size: 18,
              shadows: [Shadow(
                color: MyColors.myWhite,
                offset: Offset(0.2, 0.5),
                blurRadius: 5.0,
              )],
            ),
          ),
        ),
  ),

Upvotes: 0

Samet Karavaizoğlu
Samet Karavaizoğlu

Reputation: 186

enter image description here

You can try this way:

floatingActionButton: FloatingActionButton(
      onPressed: () {},
      backgroundColor: Colors.red,
      elevation: 0,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.transparent,
          borderRadius: BorderRadius.all(
            Radius.circular(100),
          ),
          boxShadow: [
            BoxShadow(
              color: Colors.purple.withOpacity(0.3),
              spreadRadius: 7,
              blurRadius: 7,
              offset: Offset(3, 5),
            ),
          ],
        ),
      ),
    ),

Upvotes: 13

Related Questions