Te damos la bienvenida a nuestra página web, en este sitio encontrarás la respuesta de lo que necesitas.
Solución:
Row y Column están Flex widget y no se desplace, si no hay suficiente espacio, flutter genera un error de desbordamiento.
Si esto ocurre un Expanded o un Flexible widget se puede utilizar para envolver un texto largo.
En los documentos no se indica claramente, pero más allá de expandirse para llenar el espacio disponible en el eje principal, Expanded y Flexible se envuelve en la dirección del eje transversal.
la larga historia
Un enfoque paso a paso puede ayudar a comprender el problema.
Primero, considere este escenario:
class MyApp extends StatelessWidget
// This widget is the root of your application.
@override
Widget build(BuildContext context)
return MaterialApp(
title: 'Text overflow',
home: Scaffold(
appBar: AppBar(
title: Text("MyApp"),
),
body: Column(
children: List.generate(100, (idx) => Text("Short text"))
),
),
);
Es un widget de columna que se desborda en dirección vertical como lo informa claramente flutter:
I/flutter ( 8390): The following message was thrown during layout:
I/flutter ( 8390): A RenderFlex overflowed by 997 pixels on the bottom.
I/flutter ( 8390):
I/flutter ( 8390): The overflowing RenderFlex has an orientation of Axis.vertical.
Ahora, una Fila dentro de una Columna:
class MyApp extends StatelessWidget
// This widget is the root of your application.
@override
Widget build(BuildContext context)
return MaterialApp(
title: 'Text overflow',
home: Scaffold(
appBar: AppBar(title: Text("MyApp"),),
body: Column(
children: [
Row(
children: [
Text(String.fromCharCodes(List.generate(100, (i) => 65)))
],
),
],
),
),
);
Ahora el problema de desbordamiento aparece en el lado derecho.
He insertado una Fila en una Columna solo para parecerse a su caso, pero surge exactamente el mismo problema si usa un widget de Fila simple:
Row y Column son ambos Flex widgets:
- colocan a sus hijos en una dirección;
- no se desplazan, por lo que si los hijos ocupan más espacio del disponible se genera un error de desbordamiento;
El widget ampliado
Considere este diseño, una fila con dos elementos, unidos
Column(
children: [
Row(
children: [Text('AAAA'), Text('ZZZZ')],
),
],
),
Ahora el primer elemento Expanded para llenar todo el espacio disponible:
Column(
children: [
Row(
children: [
Expanded(child: Text('AAAA')),
Text('ZZZZ')],
),
],
),
Finalmente, cuando expandes un espacio muy largo string notará que el texto se ajusta en la dirección del eje transversal:
Column(
children: [
Row(
children: [
Expanded(child: Text(String.fromCharCodes(List.generate(100, (i) => 65)))),
Text('ZZZZ')],
),
],
),
Necesitas envolver el último Column con – Expanded o Flexible artilugio.
De esa manera Column puede ocupar el espacio disponible requerido para el texto.
body: Column(
children: [
Row(
children: [
// The long text inside this column overflows. Remove the row and column above this comment and the text wraps.
Expanded(
child: Column(
children: [
Text("Short text"),
Text(
"Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. ")
],
),
),
],
),
],
),
Para evitar el desbordamiento de los textos en Fila o Columnas. Asegúrese de envolver el texto en Widgets flexibles o ampliados. Después de envolver el texto debajo de uno de los widgets anteriores, envolverá el texto grande en varias líneas. Compartiendo un ejemplo:
Antes del widget ampliado:
return Center(child:
Container(
padding: EdgeInsets.only(left: 50, right: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 200,
child: Text('It is a multiline text It does not auto warp the text.', textAlign: TextAlign.center,style: TextStyle(fontSize: 20.0, color: Colors.white)),
)
],
))
);
Captura de pantalla :
Después de Wapping dentro ampliado:
return Center(
child: Padding(padding: EdgeInsets.only(left: 50, right: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Text('It is a multiline text It does not auto warp the text.', textAlign: TextAlign.center,style: TextStyle(fontSize: 20.0, color: Colors.white))),
],
),
)
);
Captura de pantalla : 
Eres capaz de apoyar nuestro quehacer poniendo un comentario y dejando una valoración te lo agradecemos.