Flutter使用BlocBuilder展示用户首字母头像无姓名时显示灰框问题

解决方法 #

你可以按以下步骤修改代码实现空白圆形的效果：

• 首先修正判断逻辑：原判断条件包含邮箱校验不符合你的需求，同时需要覆盖firstName为非空空字符串的场景，还要先判断user对象本身是否为空避免空调用异常
• 替换占位内容：将原先的.占位符替换为空字符串即可实现无文字效果，圆形不会消失因为渐变和形状是定义在父级Container的装饰属性上的
• 可选优化：给圆形Container设置固定宽高，避免有无文字时圆形尺寸出现差异

修改后的核心代码如下：

child: Container(
  height: 130,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(30.0),
      bottomRight: Radius.circular(30.0)
    ),
    color: Theme.of(context).canvasColor,
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        offset: Offset(5, 5),
        blurRadius: 10,
      ),
    ],
  ),
  child: Padding(
    padding: const EdgeInsets.only(left:40.0),
    child: Row(children: [
      FittedBox(
        fit: BoxFit.contain,
        alignment: Alignment.center,
        child: Container(
          alignment: Alignment.center,
          // 新增固定宽高，确保圆形尺寸一致，数值可以根据需要调整
          width: 110,
          height: 110,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Color(0xffff8a93), Color(0xffffbf81)],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight
            ),
            boxShadow: [],
            shape: BoxShape.circle,
          ),
          padding: EdgeInsets.all(30.0),
          child: BlocBuilder(
            cubit: BlocProvider.of<UserBloc>(context),
            builder: (context, User? user) {
              // 先判空user，再校验firstName是否有效
              if (user == null || user.firstName == null || user.firstName!.trim().isEmpty) {
                // 返回空文本即可，不需要任何内容
                return Text('');
              }
              return Text(
                user.firstName![0].toUpperCase(),
                style: GoogleFonts.roboto(
                  textStyle:TextStyle(
                    fontWeight: FontWeight.w900,
                    fontSize: 50,
                    color: Colors.white,
                  ),
                ),
                textAlign: TextAlign.left,
              );
            }
          ),
        ),
      ),
    ]),
  ),
)

内容的提问来源于stack exchange，提问作者Tom Galland