如何修复八边形FloatingActionButton错误?

时间:2019-06-04 08:37:29

标签: flutter dart

我正在构建的应用程序中存在一个非常奇怪的错误。我的一个图标出现了视觉错误,它实际上不会加载FloatingActionButton的背景。它似乎与图标在堆栈中的放置位置有关。

我尝试过切换堆栈中的两个图标,并将问题移到另一个图标上,所以看起来它与堆栈中的第4个位置有关。但是,如果我在那儿添加一个空容器(只是尝试),实际上并不能解决问题。我可以在虚拟设备以及实际手机上复制该问题。并且仅在更新构建状态时显示。

我已经在实际应用中将问题的屏幕截图上传到了https://ibb.co/M1fz4z8

这是按住按钮的堆栈:

Stack(
            children: <Widget>[
              Container(
                height: (screenHeight / 4),
                width: screenWidth,
              ),
              Positioned(
                bottom: 0.0,
                left: -(screenWidth / 2),
                child: ClipRect(
                  child: Container(
                    height: ovalHeight,
                    width: ovalWidth,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                          topLeft:
                              Radius.elliptical((ovalWidth), (ovalWidth / 3)),
                          topRight:
                              Radius.elliptical((ovalWidth), (ovalWidth / 3))),
                    ),
                  ),
                ),
              ),
              Align(
                alignment: Alignment(0.5, 0.0),
                child: SizedBox(
                  height: (screenWidth / 6),
                  width: (screenWidth / 6),
                  child: FloatingActionButton(
                    heroTag: 2,
                    backgroundColor: mainColor,
                    onPressed: () {
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => HistoryScreen()));
                    },
                    child: Icon(Icons.assessment),
                  ),
                ),
              ),
              Align(
                alignment: Alignment(-0.5, 0),
                child: SizedBox(
                  height: (screenWidth / 6),
                  width: (screenWidth / 6),
                  child: FloatingActionButton(
                    heroTag: 3,
                    backgroundColor: mainColor,
                    onPressed: () {
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => InfoScreen()));
                    },
                    child: Icon(Icons.info),
                  ),
                ),
              ),

            ],
          ),

我希望按钮能按原样显示,而不是圆形背景,而是显示一个奇怪的半透明八边形(虽然仍显示子图标)。没有错误消息显示。

1 个答案:

答案 0 :(得分:0)

我相信我已经确定了问题的出处。它实际上是由我使用名为Circular Chart的插件提供的,当在图表中使用圆角选项时,就会出现问题。我还没有确定是什么原因导致了插件源代码中的问题。如果我知道了,将发布。