简体   繁体   English

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

[英]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.现在我的浮动操作栏 (FAB) 上有一张图片,但它看起来像是在上面。 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,
                      ),
                    ),
                  ),
                ]),
              ),

在此处输入图像描述

Try to remove Center widget.尝试删除Center小部件。 Constraints goes down on flutter.约束在 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
        ),
      ),
    ],
  ),
),

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM