Question 197245 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter: How to fix a renderflex issue with a simple list of text widgets?

I’ve got a simple list of menu items – and I have limited control over the text that goes in them. Demo: https://zapp.run/edit/flutter-zu7g06nwu7h0?entry=lib/main.dart&file=lib/menu_card.dart

- Futurebuilder
- List Item
 |- Row
  |- Image
  |- Column
   |- Text
   |- Text

and it should end up looking like this. How do I get the clip to work and not get the overflow error?
enter image description here

The list is generated using a futurebuilder but in the demo I have this

class MenuCard extends StatelessWidget {
  const MenuCard({
    Key? key,
    required this.parentLabel,
    required this.menuRow,
  }) : super(key: key);

  final String parentLabel;
  final MenuRow menuRow;

  final int _associationId = 22;

  void getPage(BuildContext context) {
    Widget nextPage;

    nextPage = MenuListScreen(
      menu: 'mobilehome',
      label: menuRow.label,
      associationId: _associationId,
    );

    Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => nextPage,
        ));
  }

  @override
  Widget build(BuildContext context) {
    // this needs to be here because of the context
    Color textColor = Theme.of(context).colorScheme.primary;
    Color splashColor = Theme.of(context).colorScheme.primary.withOpacity(0.40);

    if (menuRow.colour == 'green') {
      textColor = Theme.of(context).colorScheme.secondary;
      splashColor = Theme.of(context).colorScheme.secondary;
    }

    return InkWell(
      splashColor: splashColor,
      onTap: () => getPage(context),
      child: Container(
        width: double.infinity,
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(color: textColor),
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Icon(
              Icons.beach_access,
              color: Colors.blue,
              size: 36.0,
            ),
            const SizedBox(
              width: 10,
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                MenuItemLabel(menuRow: menuRow, textColor: textColor),
                MenuItemDescription(menuRow: menuRow, textColor: textColor),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

The text widget is

    class MenuItemDescription extends StatelessWidget {
  const MenuItemDescription({
    Key? key,
    required this.menuRow,
    required this.textColor,
  }) : super(key: key);

  final MenuRow menuRow;
  final Color textColor;

  @override
  Widget build(BuildContext context) {
    if (menuRow.description.isNotEmpty) {
      return Text(
        menuRow.description,
        maxLines: 2,
        softWrap: true,
        overflow: TextOverflow.clip,
        style: TextStyle(
          color: textColor,
          fontSize: 14,
        ),
      );
    }
    return const SizedBox(width: 1);
  }
}
Tags:

2

Answers


  1. 0

    You could try this options:

    1. add expanded widget

     Expanded(
          child: Column(
            // ...
            children: [
              MenuItemLabel(menuRow: menuRow, textColor: textColor),
              Expanded(
                child: MenuItemDescription(
                  menuRow: menuRow,
                  textColor: textColor,
                ),
              ),
            ],
          ),
        ),

    Adding an expanded widget gives your widget the ability to take the whole space of the row, this will make your description text create a new line below.

    2. Adding TextOverflow.ellipsis

    Text(
        menuRow.description,
        maxLines: 2, // Adjust the number of lines as needed
        softWrap: true,
        overflow: TextOverflow.ellipsis, // Use TextOverflow.ellipsis instead of TextOverflow.clip
        style: TextStyle(
          color: textColor,
          fontSize: 14, // Adjust the font size as needed
        ),
      );

    This will truncate the text with an ellipsis (…)

    Login or Signup to reply.
  2. 0

    Because the row main axis constraints is infinity. You should wrap you Column with Expanded widget inside the Row

    `child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Icon(
          Icons.beach_access,
          color: Colors.blue,
          size: 36.0,
        ),
        const SizedBox(
          width: 10,
        ),
        Expanded(
        child : 
          Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            MenuItemLabel(menuRow: menuRow, textColor: textColor),
            MenuItemDescription(menuRow: menuRow, textColor: textColor),
          ],
          ),
        ),
        
      ],
    ),`
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search