flutter avatarGlow is not working at all with fluoatingbutton

Question

it's working on SingleChildScrollView , it works very well

but with floatingbutton is won't glow at all... I changed animated:true but also not working at all

SingleChildScrollView(
    reverse: true,
    child: Container(
      padding: const EdgeInsets.fromLTRB(30.0, 30.0, 30.0, 150.0),
      child: AvatarGlow(
        glowColor: Colors.blue,
        endRadius: 90.0,
        duration: Duration(milliseconds: 2000),
        repeat: true,
        showTwoGlows: true,
        repeatPauseDuration: Duration(milliseconds: 100),
        child: Material(
          // Replace this child with your own
          elevation: 8.0,
          shape: CircleBorder(),
          child: CircleAvatar(
            backgroundColor: Colors.grey[100],
            child: Text("abc"),
            radius: 40.0,
          ),
        ),
      ),
    ),
  )

but with floating button it won't work

floatingActionButton: AvatarGlow(
      animate: true,
      glowColor: Colors.red,
      endRadius: 90.0,
      duration: Duration(milliseconds: 2000),
      repeat: true,
      showTwoGlows: true,
      repeatPauseDuration: Duration(milliseconds: 100),
      child: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Floating',
        child: const Icon(Icons.mic),
      )),

Answer 1

Based on the code you provided, it seems like the issue might be related to the size and position of the AvatarGlow widget inside the FloatingActionButton.

The AvatarGlow widget needs to be able to expand beyond the bounds of the FloatingActionButton in order to create the glowing effect. However, since the FloatingActionButton is a fixed size, it might be limiting the size of the AvatarGlow widget.

One possible solution to this issue is to wrap the AvatarGlow widget inside a SizedBox with a larger size than the FloatingActionButton. Here's an example:

floatingActionButton: SizedBox(
  width: 100,
  height: 100,
  child: AvatarGlow(
    glowColor: Colors.red,
    endRadius: 90.0,
    duration: Duration(milliseconds: 2000),
    repeat: true,
    showTwoGlows: true,
    repeatPauseDuration: Duration(milliseconds: 100),
    child: FloatingActionButton(
      onPressed: () {},
      tooltip: 'Floating',
      child: const Icon(Icons.mic),
    ),
  ),
),

In this example, we've wrapped the AvatarGlow widget inside a SizedBox with a width and height of 100, which is larger than the default size of the FloatingActionButton. This should allow the AvatarGlow widget to expand beyond the bounds of the FloatingActionButton and create the glowing effect.

I hope this helps! Let me know if you have any other questions.

To know more, join our Flutter Certification today.