如何增大Flutter持久化导航栏中主页按钮的圆形尺寸

调整方案 #

因为你使用了BoxShape.circle定义Container的形状为圆形，此时圆形的实际显示直径由Container宽高中的较小值决定，要放大尺寸按以下步骤修改即可：

• 同步调大width和height数值，且建议两者设置为相同值，避免圆形出现拉伸变形。你当前代码里width:250.0、height:200，实际生效的直径是较小的200，比如你要放大到直径300，就把两个参数都改成300即可。
• 如果要调整圆形外边框的宽度，可以同步修改Border.all里的width参数，当前为6.0，数值越大边框越粗，可视的内部圆形区域就越小。
• 额外修正你现有代码的语法错误：boxShadow是BoxDecoration的属性，你现在错误写在了Border.all的参数内，会触发编译报错，需要移到外层。

修改后的示例代码（以直径300为例）

child: Center(
  child: Container(
    width: 300.0,
    height: 300.0,
    margin: EdgeInsets.only(top: 2.0),
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.white,
      border: Border.all(
        color: Colors.white,
        width: 6.0,
      ),
      boxShadow: this.navBarDecoration!.boxShadow,
    ),
  )
)

当前实现效果参考

内容的提问来源于stack exchange，提问作者Avdhesh Purohit