Text overflow flutter

Question

I have the next widget, which is rendered with overflow. I have tried to solve, but i don't know. Can anyone help me? The aim is to do a custom card inside listview. I have tried to wrap with expanded buth then, the error is referenced with constraints.

    import 'package:flutter/material.dart';

     import '../../shared/AppTheme.dart';

     class ComandaScreen extends StatefulWidget {
      const ComandaScreen({Key? key}) : super(key: key);

     @override
     State<ComandaScreen> createState() => _ComandaScreenState();
      }

      class _ComandaScreenState extends State<ComandaScreen> {
      bool expanded = false;
      int unidades = 0;

        final List<Map<String, dynamic>> _items = List.generate(
       10, (index) => {'id': index, 'Nombre': 'Nuggets $index', 
       'isExpanded': false, "unidades": 8});

      @override
      Widget build(BuildContext context) {
    final ButtonStyle flatButtonStyle = TextButton.styleFrom(
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(4.0)),
      ),
    );

    return Scaffold(
      appBar: AppBar(
        title: const Text('Comanda'),
        backgroundColor: AppTheme.backgroundColor,
        foregroundColor: AppTheme.primaryTextColor,
        elevation: 0,
      ),
      body: SingleChildScrollView(
        child: ExpansionPanelList(
          elevation: 3,
          // expandedHeaderPadding: const EdgeInsets.all(10),
          expansionCallback: (index, isExpanded) {
            setState(() {
              _items[index]['isExpanded'] = !isExpanded;
            });
          },
          animationDuration: const Duration(milliseconds: 200),
          children: _items
              .map(
                (item) => ExpansionPanel(
                  canTapOnHeader: true,
                  // backgroundColor: item['isExpanded'] == true ? Colors.cyan[100] : Colors.white,
                  headerBuilder: (context, isExpanded) {
                    return Container(
                      margin: const EdgeInsets.all(10),
                      child: Row(children: [
                        const CircleAvatar(
                            child: Text(
                          '1',
                          textAlign: TextAlign.center,
                        )),
                        const SizedBox(
                          width: 10,
                        ),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              const Text(
                                'Nuggets',
                                style: TextStyle(color: Colors.black, fontWeight: FontWeight.w600),
                              ),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    children: const [
                                      Text(
                                        'Unidades: ${7}',
                                        style: TextStyle(color: Colors.black),
                                      ),
                                      Text(
                                        'Pendientes: 400',
                                        style: TextStyle(color: Colors.black),
                                      ),
                                    ],
                                  ),
                                  const SizedBox(
                                    width: 20,
                                  ),
                                  Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: const [
                                      Text(
                                        'Precio: 10 €',
                                        maxLines: 1,
                                        overflow: TextOverflow.ellipsis,
                                        style: TextStyle(color: Colors.black),
                                      ),
                                      Text(
                                        'Total: 70 €',
                                        maxLines: 1,
                                        overflow: TextOverflow.ellipsis,
                                        style: TextStyle(color: Colors.black),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ]),
                    );
                  },
                  body: ButtonBar(
                    alignment: MainAxisAlignment.spaceAround,
                    buttonHeight: 52.0,
                    buttonMinWidth: 90.0,
                    children: <Widget>[
                      TextButton(
                        style: flatButtonStyle,
                        onPressed: () {
                          setState(() {
                            item['unidades'] += 1;
                          });
                        },
                        child: Column(
                          children: const <Widget>[
                            Icon(
                              Icons.add,
                              color: AppTheme.grismedio,
                            ),
                            // Padding(
                            //   padding: EdgeInsets.symmetric(vertical: 2.0),
                            // ),
                            // Text('Más'),
                          ],
                        ),
                      ),
                      TextButton(
                        style: flatButtonStyle,
                        onPressed: () {
                          setState(() {
                            item['unidades'] -= 1;
                          });
                        },
                        child: Column(
                          children: const <Widget>[
                            Icon(
                              Icons.remove,
                              color: AppTheme.grismedio,
                            ),
                            // Padding(
                            //   padding: EdgeInsets.symmetric(vertical: 2.0),
                            // ),
                            // Text('Menos'),
                          ],
                        ),
                      ),
                      TextButton(
                        style: flatButtonStyle,
                        onPressed: () {},
                        child: Column(
                          children: const <Widget>[
                            Icon(
                              Icons.edit_outlined,
                              color: AppTheme.grismedio,
                            ),
                            // Padding(
                            //   padding: EdgeInsets.symmetric(vertical: 2.0),
                            // ),
                            // Text('Editar'),
                          ],
                        ),
                      ),
                      TextButton(
                        style: flatButtonStyle,
                        onPressed: () {},
                        child: Column(
                          children: const <Widget>[
                            Icon(
                              Icons.delete_outline_outlined,
                              color: AppTheme.grismedio,
                            ),
                            // Padding(
                            //   padding: EdgeInsets.symmetric(vertical: 2.0),
                            // ),
                            // Text('Eliminar'),
                          ],
                        ),
                      ),
                      TextButton(
                        style: flatButtonStyle,
                        onPressed: () {},
                        child: Column(
                          children: const <Widget>[
                            Icon(
                              Icons.card_giftcard_outlined,
                              color: AppTheme.grismedio,
                            ),
                            // Padding(
                            //   padding: EdgeInsets.symmetric(vertical: 2.0),
                            // ),
                            // Text('Invitar'),
                          ],
                        ),
                      )
                    ],
                  ),
                  isExpanded: item['isExpanded'],
                ),
              )
              .toList(),
          // Card_lineaComanda(flatButtonStyle),
        ),
      ),
    );
  }
}

I 've edited the code to show all screen widget.

Image of result of code before:

Answer 1

For desktop applications, you can prevent the resize with breakpoint, so the error won't happen. In the pubsec.yaml file, add the following dependency.

window_size:
    git:
      url: https://github.com/google/flutter-desktop-embedding.git
      path: plugins/window_size

And in your main method before runapp add this code with min-width and min-height below which the app won't resize.

const double desktopMinWidth = 800.0;
const double desktopMinHeight = 600.0;

if (Platform.isMacOS || Platform.isWindows) {
    setWindowMinSize(const Size(desktopMinWidth, desktopMinHeight));
    setWindowMaxSize(Size.infinite);
}

Note: Once done restart your app.

For mobile, it is entirely a different case. You might need to restructure the design