FittedBox width > 0 is not true, BUT only for one text widget

Question

Okay, this one is very weird. I am getting the FittedBox width > 0 != true for only one widget in my column of 4 widgets. when i remove that widget, a text widget, the error doesn't show. Oddly enough, the other widget are also text widgets in fittedBoxes. literally the same thing. here is the code. Body of my main page is a NestedScrollView with the header

headerSliverBuilder: (_,__)=>[
    SliverToBoxAdapter(
        child: ProfileHeader(uid: widget.profileId),
    ),
    SliverPersistentHeader(
        pinned: true,
        delegate: ProfileScreenPersistentHeader(
            tabBar: ProfileTabbar(tabController: _tabController)
        )
    ),
],

The problem is on the ProfileHeader(uid: widget.profileId),. In here I have a build:

return Container(
    //color: Colors.pink[100],
    padding: EdgeInsets.symmetric(horizontal: 16),
    child: Column(
        // ignore: missing_required_param
        children: [
            SizedBox(height:8),
            Heading( 
                fullName: _fullName, 
                userName: _userName,
                lastSeen: _lastActive, 
                photoUrl: _photoUrl, 
                ratingsList: _ratingsList, 
            ),
            SizedBox(height:16),
            FollowAndMessageButtons(profileUid: widget.userModel.uid, ),
            NumbersSection(followerCount: _followerCount, followingCount: _followingCount, itemsSold: _itemsSold,),
            Description(description: _description, website: _website,)
        ]
        //have an if to check wether to show edit button or followbutton
    ),
);

The Heading() is where the problem is more specifically, HERE IS THE HEADER:

  final String photoUrl;
  final String fullName;
  final String userName;
  final List<double> ratingsList;
  final String lastSeen;
  const Heading({Key key, @required this.photoUrl, @required this.fullName, 
    @required this.userName, @required this.ratingsList, @required this.lastSeen}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final double x = SizeConfig.blockSizeHorizontal * 100;
    final double y = SizeConfig.blockSizeVertical * 100;
    final cardColor = Theme.of(context).cardColor;
    final activeColor = Theme.of(context).accentColor;
    final highlightColor = Theme.of(context).highlightColor;
    final mainTextColor = Theme.of(context).primaryColor;
    return Container(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(
            padding: EdgeInsets.only(right: 16),
            child: CircleAvatar(
                radius: 0.1*x,
                backgroundColor: cardColor,
                backgroundImage: (photoUrl == null || photoUrl.isEmpty)
                ?AssetImage('lib/images/PP.png')
                :CachedNetworkImageProvider(photoUrl),
            ),
          ),
          Expanded(
            //flex: 3,
            child: 
            Column(
              //mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                FittedBox(
                  fit: BoxFit.fitWidth,
                  child: Text( 
                    "$fullName",
                    style: TextStyle(fontFamily: "Montserrat", fontWeight: FontWeight.w700, color: mainTextColor, fontSize: 16)
                  ),
                ),
                FittedBox(
                  fit: BoxFit.fitWidth,
                  child: Text(
                    "@$userName",
                    style: TextStyle(fontFamily: "Lekton", fontWeight: FontWeight.w600, color: mainTextColor, fontSize: 16)
                  ),
                ),
                FittedBox(
                  fit: BoxFit.fitWidth,
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Icon(Icons.remove_red_eye, color: highlightColor, size: 11,),
                      SizedBox(width:1),
                      Text(
                        "Active $lastSeen",
                        style: TextStyle(fontFamily: "Montserrat", fontWeight: FontWeight.w500, color: highlightColor, fontSize: 10)
                      ),
                    ],
                  ),
                ),
                FittedBox(
                  fit: BoxFit.fitWidth,
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      //STARS HERE
                      StarsReadOnly(size: 12, rating: Services().average(ratingsList), spacing: 1),
                      SizedBox(width: 2),
                      Text("(${ratingsList.length})",
                        style: TextStyle(fontFamily: "Montserrat", fontWeight: FontWeight.w500, color: activeColor, fontSize: 12)
                      ),
                    ],
                  ),
                  //stars
                ),

              ],
            ),
          ),
        ],
      ),
    );
  }
}

The child in the column that is giving the error is

FittedBox(
    fit: BoxFit.fitWidth,
    child: Text( 
        "$fullName",
        style: TextStyle(
            fontFamily: "Montserrat", 
            fontWeight: FontWeight.w700, 
            color: mainTextColor, 
            fontSize: 16,
        ),
    ),
),

which is the first element. when i take it out the error disappears. i even tried reducing the font size and still nothing. But when i hard code the text, the error disappears. I am initializing the text from a userModel that the widget is receiving from a futurebuilder further up the tree. How can one text widget, similar to the others give the error but not the others. I even tried removing the other widgets because i thought it was a problem with vertical space but it's not. I even tried removing the circleavatar becuase...

Answer 1

FittedBox with BoxFit.fitWidth is calculating its width based on the size of the Text child, which will be based on the length of the String. As you can see from the error, it requires that the calculated width be greater than 0. Since you are loading the _fullName from a Future, it is initially empty. This leads to a width of 0, throwing the error. You are not seeing this issue in the other columns because they contain some text beyond just the returned data, so their widths are never 0.

There are a few ways to handle this. A more robust solution would be to only show a header column/value if it contains data. You could also start with initial (default) values in each column until the data is loaded, but this will not be a great solution if any of the actual values may be empty.

The easiest solution is to simply add a space after fullName in the Text widget so that the String is not empty before the data has returned.

FittedBox(
              fit: BoxFit.fitWidth,
              child: Text( 
                "$fullName ",
                style: TextStyle(fontFamily: "Montserrat", fontWeight: FontWeight.w700, color: mainTextColor, fontSize: 16)
              ),
            ),

If you want to avoid unnecessary spaces or avoid related formatting issues check the value of fullName and substitute the space if the value is null (or empty, depending on your implementation).

// if the initial value is null
"${fullName ?? ' '}"

// or if the initial value is an empty String
"${fullName.isNotEmpty ? fullName : ' '}"