CODEWITHSUNDEEP
flutterfloating-action-buttonflutter-image
Ten Digit Grid
Ten Digit Grid

Reputation: 2599

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

Upvotes: 1

Views: 1090

Answers (3)

Sergey Geron
Sergey Geron

Reputation: 10172

Another option is to try clipBehavior: Clip.antiAliasWithSaveLayer

floatingActionButton: FloatingActionButton.large(
  heroTag: "add image",
  backgroundColor: const Color(0xFF93C3B9),
  clipBehavior: Clip.antiAliasWithSaveLayer,
  onPressed: () {},
  child: Stack(
    ...
  ),
),

Upvotes: 0

Antonin GAVREL
Antonin GAVREL

Reputation: 11219

You may just set the backgroundColor of the FAB to transparent, backgroundColor: Colors.white.withAlpha(0) and elevation: 0:

  floatingActionButton: FloatingActionButton(
            backgroundColor: Colors.white.withAlpha(0), // add this line.
            elevation: 0, // also important, removes the shadow
            heroTag: "floatingActionBtn", 
            child: Image.asset("assets/images/myImage.png"), onPressed: () => myFunction(myArg)),

Upvotes: 0

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63604

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

Upvotes: 1

Related Questions