如何用图像填充 Flutter 浮动操作按钮？

Question

现在我的浮动操作栏（FAB）上有一个图像，但它看起来像是在它的上面。我希望它填充按钮的整个内部/形状

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

Answer 1

尝试删除

Center

小部件。颤动时的约束会减弱。

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

Answer 2

您可以将FAB的背景颜色设置为透明，

backgroundColor: Colors.white.withAlpha(0)

和

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