Search code examples
flutterfloating-action-buttonflutter-image

How to fill a Flutter Floating Action Button with an image?

Right now I have an image on my Floating Action Bar (FAB) but it looks like it's on top of it. I would like it to fill the entire inside / shape of the button

floatingActionButton: FloatingActionButton.large(
        heroTag: "add image",
        backgroundColor: const Color(0xFF93C3B9),
        child: (imageURL == ' ')
            ? const Icon(Icons.add_a_photo_outlined)
            : Container(
                //height: 75,
                //width: 75,
                child: Stack(fit: StackFit.expand, children: [
                  const Center(
                    child: CircularProgressIndicator(),
                  ),
                  Center(
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(8.0),
                      child: FadeInImage.memoryNetwork(
                        placeholder: kTransparentImage,
                        image: imageURL,
                        fit: BoxFit.fill,
                      ),
                    ),
                  ),
                ]),
              ),

enter image description here

Solution

  • Try to remove Center widget. Constraints goes down on flutter.

    floatingActionButton: FloatingActionButton.large(
  heroTag: "add image",
  backgroundColor: const Color(0xFF93C3B9),
  onPressed: () {},
  child: Stack(
    fit: StackFit.expand,
    children: [
      const Center(
        child: CircularProgressIndicator(),
      ),
      ClipRRect(
        borderRadius: BorderRadius.circular(8.0),
        child: FadeInImage.memoryNetwork(
          placeholder: kTransparentImage,
          image: imageURL,
          fit: BoxFit.cover,//prefer cover over fill
        ),
      ),
    ],
  ),
),