rafaelcb21
Estoy tratando de crear una línea en la que el texto central tenga un tamaño máximo y, si el contenido del texto es demasiado grande, se ajuste al tamaño.
inserto el TextOverflow.ellipsis propiedad para acortar el texto e insertar los puntos triples ... Pero no está funcionando.
dardo principal
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) => new Scaffold(
appBar: new AppBar(
backgroundColor: new Color(0xFF26C6DA),
),
body: new ListView (
children: <Widget>[
new Card(
child: new Container(
padding: new EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0),
child: new Row(
children: <Widget>[
new Container(
padding: new EdgeInsets.only(right: 24.0),
child: new CircleAvatar(
backgroundColor: new Color(0xFFF5F5F5),
radius: 16.0,
)
),
new Container(
padding: new EdgeInsets.only(right: 13.0),
child: new Text(
'Text lar...',
overflow: TextOverflow.ellipsis,
style: new TextStyle(
fontSize: 13.0,
fontFamily: 'Roboto',
color: new Color(0xFF212121),
fontWeight: FontWeight.bold,
),
),
),
new Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Row(
children: <Widget>[
new Text(
'Bill ',
style: new TextStyle(
fontSize: 12.0,
fontFamily: 'Roboto',
color: new Color(0xFF9E9E9E)
),
),
new Text(
'\$ -999.999.999,95',
style: new TextStyle(
fontSize: 14.0,
fontFamily: 'Roboto',
color: new Color(0xFF212121)
),
),
],
),
new Row(
children: <Widget>[
new Text(
'Limit ',
style: new TextStyle(
fontSize: 12.0,
fontFamily: 'Roboto',
color: new Color(0xFF9E9E9E)
),
),
new Text(
'R\$ 900.000.000,95',
style: new TextStyle(
fontSize: 14.0,
fontFamily: 'Roboto',
color: new Color(0xFF9E9E9E)
),
),
],
),
]
)
)
],
),
)
),
]
)
);
}
resultado:
esperado:
collin jackson
Deberías envolver tu Container en un Flexible dejar que tu Row sé que está bien para el Container ser más angosto que su ancho intrínseco. Expanded también funcionará.
Flexible(
child: new Container(
padding: new EdgeInsets.only(right: 13.0),
child: new Text(
'Text largeeeeeeeeeeeeeeeeeeeeeee',
overflow: TextOverflow.ellipsis,
style: new TextStyle(
fontSize: 13.0,
fontFamily: 'Roboto',
color: new Color(0xFF212121),
fontWeight: FontWeight.bold,
),
),
),
),
-
Tengo un problema similar en la columna. Este enfoque no funciona para mí. stackoverflow.com/questions/52206221/…
– Michael Tedla
6 sep 2018 a las 14:44
-
¿Hay alguna manera de que podamos implementar esto en el campo de texto?
– mangkool
31 de julio de 2019 a las 6:51
-
si desea que también tenga el texto wrap_content, especifique la propiedad de ajuste con FlexFit.loose,
– martinseal1987
30 de junio de 2020 a las 15:53
-
Este enfoque no siempre funciona. En mi caso, todos los accesorios de TextFlow como puntos suspensivos, atenuación o clip no funcionan para un texto dentro de un InkWell y dentro de una fila y otra fila. Todas las permutaciones en fila, contenedor, texto, tintero, columna, etc. con FAIL expandido y flexible.
– ombiro
2 de septiembre de 2020 a las 10:21
-
Si este enfoque no funciona para usted cuando usa Column, envuelva la Columna en Flexible
–Isaac Oluwatemilorun
26 de febrero de 2021 a las 15:16
policíasencarretera
Uso de puntos suspensivos
Text(
"This is a long text",
overflow: TextOverflow.ellipsis,
),
Usando Fundido
Text(
"This is a long text",
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
),
Uso de clips
Text(
"This is a long text",
overflow: TextOverflow.clip,
maxLines: 1,
softWrap: false,
),
Nota:
Si estás usando Text dentro de una Rowpuedes poner arriba Text adentro Expanded como:
Expanded(
child: AboveText(),
)
-
¿Puedo agregar cuando el texto se desborda y luego agregar un botón plano como … más enlace
– Sr. hir
28 de enero de 2019 a las 6:33
-
Esto no funciona si tiene texto y otro widget (p. ej., un icono) centrado dentro de una fila.
– Lukasz Ciastko
23 oct 2019 a las 16:07
-
softWrap: falsees exactamente lo que necesitaba, gracias!– abrazo frío
7 de mayo de 2020 a las 12:08
-
Oye, ¿y si queremos añadir, por ejemplo, una nueva página con el texto que se desborda?
– Nithin Sai
5 de julio de 2020 a las 8:47
-
softWrap: falseesencialmente dice aplicar el efecto horizontalmente en lugar de verticalmente. No me di cuenta con los puntos suspensivos, pero cuando cambié a desvanecer lo necesitaba para que no se desvaneciera en la parte inferior del texto o simplemente se ajustara de todos modos– kilkfoe
24 de septiembre de 2020 a las 19:32
Abdurahmán Popal
Primero, envuelva su Row o Column en Expanded artilugio
Entonces
Text(
'your long text here',
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
style: Theme.of(context).textTheme.body1,
)
-
Sí, esta es la forma correcta, ¡primero envolver la Columna dentro del Expandido realmente funcionó! y usar el Texto dentro de los hijos de la Columna.
– ArifMustafa
17 de diciembre de 2019 a las 14:41
Jitesh mohita
1 clip
Recorta el texto desbordado para que se ajuste a su contenedor.
SizedBox(
width: 120.0,
child: Text(
"Enter Long Text",
maxLines: 1,
overflow: TextOverflow.clip,
softWrap: false,
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
),
),
Producción:
2. desvanecerse
Desvanece el texto desbordado a transparente.
SizedBox(
width: 120.0,
child: Text(
"Enter Long Text",
maxLines: 1,
overflow: TextOverflow.fade,
softWrap: false,
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
),
),
Producción:
3.puntos suspensivos
Utilice puntos suspensivos para indicar que el texto se ha desbordado.
SizedBox(
width: 120.0,
child: Text(
"Enter Long Text",
maxLines: 1,
overflow: TextOverflow.ellipsis,
softWrap: false,
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
),
),
Producción:
4.visible
Representa el texto desbordado fuera de su contenedor.
SizedBox(
width: 120.0,
child: Text(
"Enter Long Text",
maxLines: 1,
overflow: TextOverflow.visible,
softWrap: false,
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
),
),
Producción:
Por favor bloguee: https://medium.com/flutterworld/flutter-text-wrapping-ellipsis-4fa70b19d316
Yauhen Sampir
Puede usar este código cortado para mostrar texto con puntos suspensivos
Text(
"Introduction to Very very very long text",
maxLines: 1,
overflow: TextOverflow.ellipsis,
softWrap: false,
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),
-
También incluya una descripción de este código para explicar cómo responde a la pregunta.
– jkdev
28 de noviembre de 2018 a las 20:04
Cenk YAGMUR
Puedes hacerlo así
Expanded(
child: Text(
'Text',
overflow: TextOverflow.ellipsis,
maxLines: 1
)
)
-
También incluya una descripción de este código para explicar cómo responde a la pregunta.
– jkdev
28 de noviembre de 2018 a las 20:04
Justin B
Una forma de corregir un desbordamiento de un widget de texto dentro de una fila si, por ejemplo, un mensaje de chat puede ser una línea muy larga. Puede crear un Contenedor y un BoxConstraint con un maxWidth en él.
Container(
constraints: BoxConstraints(maxWidth: 200),
child: Text(
(chatName == null) ? " ": chatName,
style: TextStyle(
fontWeight: FontWeight.w400,
color: Colors.black87,
fontSize: 17.0),
)
),
El título y el contenido de esta pregunta no coinciden. Su esperado el resultado muestra elipses. Sin embargo, el título dice
wrapyfade. Ajuste su título para que coincida con su pregunta real. Confunde esta pregunta: stackoverflow.com/questions/51930754/flutter-wrapping-text– DarkTrick
7 de mayo de 2022 a las 7:36