简体   繁体   中英

Flutter - How to fix text overflow in a card?

I'm building an app and I want to show this text but i need put some "limit" to not happen this:

card with overflow

so, I tried a few things (like SizedBox to limit the text, AutoSizeText to change the font size... but i don't know how to limit this and make this responsive), but to no avail.

this is the code of the card:

Card(
    child: Container(
      height: 120,
      child: Padding(
        padding: EdgeInsets.only(
          left: 15,
          right: 15,
          top: 10,
          bottom: 10,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            ClipOval(
              child: Image.network(
                pedido.logomarca,
                height: 90,
                width: 90,
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 20),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  SizedBox(
                    child: AutoSizeText(
                      pedido.nomefantasia.toUpperCase(),
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  Row(
                    children: <Widget>[
                      ClipOval(
                        child: Container(
                          height: 10,
                          width: 10,
                          color: Colors.green,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(
                          left: 8,
                        ),
                        child: Text(
                          pedido.statuspedidodescricao,
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    DateFormat('dd/MM/yyyy').format(pedido.datavenda),
                    style: TextStyle(
                      color: Colors.blueGrey,
                      fontSize: 14,
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 10),
                    child: Text(
                      'R\$ ${pedido.valortotal.toStringAsFixed(2).replaceAll('.', ',')}',
                      style: TextStyle(
                        color: Colors.green[600],
                        fontSize: 16,
                      ),
                    ),
                  ),
                  telefone
                      ? OutlineButton(
                          onPressed: () {},
                          splashColor: Colors.green,
                          highlightColor: Colors.green,
                          highlightedBorderColor: Colors.green,
                          child: Row(
                            mainAxisAlignment:
                                MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              Text('Ligar'),
                              Padding(
                                padding: EdgeInsets.only(left: 3),
                                child: Icon(
                                  Icons.call,
                                  size: 15,
                                ),
                              ),
                            ],
                          ),
                        )
                      : Container(),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  ),

AutoSized text has a parameter you need to set. maxlines: 2

AutoSizeText(
  pedido.nomefantasia.toUpperCase(),
  maxlines: 2,
  style: TextStyle(
    fontWeight: FontWeight.bold,
  ),
),

Documentation

change this:

Padding(
  padding: EdgeInsets.only(
    left: 8,
       ),
  child: Text(
         pedido.statuspedidodescricao,
         ),
 ),

to this:

    Expanded(
      child: Padding(
        padding: EdgeInsets.only(
          left: 8,
        ),
        child: Text(
          pedido.statuspedidodescricao,
          overflow: TextOverflow.ellipsis,
          maxLines: 1,
        ),
      ),
    )

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM