Why using Expanded make my text disappear?-CodePudding

So I'm trying to edit some of my co-worker code to make it responsive, because it show many overflow on different screen size. The initial code is using Text wrapped with sized box with fixed size and I wanted to change it to wrapped with expanded so it will take space it needed and will not overflow, but the text disappear when I use expanded ? why is that ? how should I make my text responsive.

Here's my normal code:

  Row(children: [
    Row(
      children: [
        Icon(
          Icons.groups,
          color: accentColor,
        ),
        SizedBox(width: 15),
        SizedBox(
          width: 190,
          child: Text(
            'imSolver',
            style: primaryColor600Style.copyWith(
                fontSize: fontSize16),
          ).tr(),
        ),
      ],
    ),
  ]),

Changed it into using expanded:

    Row(children: [
      Row(
        children: [
          Icon(
            Icons.groups,
            color: accentColor,
          ),
          SizedBox(width: 15),
          Expanded(
            child: Container(
              child: Text(
                'imSolver',
                style: primaryColor600Style.copyWith(
                    fontSize: fontSize16),
              ).tr(),
            ),
          ),
        ],
      ),
    ]),

CodePudding user response：

The parent Row of the Expanded (wrapping the Container) must have a finite with. You can just wrap it in an Expanded like so:

 Row(children: [
    Expanded(
      child:   Row(
        children: [
          Icon(
            Icons.groups,
            color: accentColor,
          ),
          SizedBox(width: 15),
          Expanded(
            child: Container(
              child: Text(
                'imSolver',
                style: primaryColor600Style.copyWith(
                    fontSize: fontSize16),
              ).tr(),
            ),
          ),
        ],
      ),),
    ]),

CodePudding user response：

Use Flexible instead of Expanded and do provide mainAxisSize to the Row Widget.

 Row(children: [
                          Row(
                            mainAxisSize: MainAxisSize.min,
    
                            children: [
                              Icon(
                                Icons.groups,
                                color: Colors.green,
                              ),
                              SizedBox(width: 15),
                              Flexible(
                                child: Text(
                                  'imSolver',
                                )
                              ),
                            ],
                          ),
                        ]),