flutter fittedBox doesn´t use multiple lines-CodePudding

I have a page where I set few properties of a person. After I saved the properties I want to show them in a ListTile with a leading CircleAvatar. In this CircleAvatar I want to show a image or, if a image is not available the name with the chosen color in the background. The fittedBox works perfect for short names. But my problem are long names or long texts generally. The fittedBoy shrinks the font, so the it fits in the Circle Avatar. But with long names this is not readable any more. For the fonts to be bigger, I want the fittedBox to use multiple lines. But everything I tried doesn't work. The text is always adjusted to fit in one line. I tried all values for the fit property, but none of them is appropriate. How van I solute this? Or is there a better way to do this?

class UserShowListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<UserModel>(
      child: Center(
        child: const Text('Noch keine Nutzer angelegt'),
      ),
      builder: (ctx, userModel, ch) => userModel.items.isEmpty
          ? ch!
          : ListView.builder(
              itemCount: userModel.items.length,
              itemBuilder: (ctx, i) => ListTile(
                leading: CircleAvatar(
                  backgroundColor: userModel.items[i].color,
                  child: FittedBox(
                    fit: BoxFit.contain,
                    child: AutoSizeText(
                      userModel.items[i].name,
                      minFontSize: 12,
                      maxLines: 100,
                    ),
                  ),
                  foregroundImage: FileImage(userModel.items[i].image!),
                ),
                title: Text(userModel.items[i].name),
              ),
            ),
    );
  }
}

CodePudding user response：

FittedBox always tries to adjust any widget to the bounds of its parent so it is natural that long names become smaller and smaller. There is no perfect solution for "fit and multilne", only if you hardcode some values according to constraints with LayoutBuilder. But it will not work perfectly and not for very long names. Instead - give some fontSize to text and set it's maxLines property to desired number of lines, set overflow: TextOverflow.ellipsis so it will wrap long names in desired number of lines and add 3 dots in the end - it is a common compromise for "long texts in limited containers" use-case. Example:

Text('veryveryveryLongNameeee', maxLines:3, overflow:TextOverflow.ellipsis, style: TextStyle(fontSize: 10))

CodePudding user response：

You are getting single line because of FittedBox. UI Can be tricked using Padding to place text inside circle and minFontSize.

leading: CircleAvatar(
  // backgroundColor: userModel.items[i].color,
  child: Padding(
    padding: const EdgeInsets.all(5),
    child: AutoSizeText(
      " userModel.items[i].name",
      minFontSize: 7, //min size
      textAlign: TextAlign.center,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(
        color: Color.fromARGB(255, 244, 244, 244),
      ),
      maxLines: 5,
    ),
  ),
  // foregroundImage: FileImage(userModel.items[i].image!),
),