Flutter Flexible not wrapping text within a column
Solution 1
You can use Expanded Here. Expanded, which forces the child to expand to fill the available space. you can expand column here.
Here is code snippet for column:-
Expanded(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Title text',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'This is lower text',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Flexible(
child: Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black),
),
)
],
),
),
)
Hope it will work.
Solution 2
you can try this approach by placing the width
of the container to 70% and for an image 30%. There is no need for Flexible widget over here
Container(
width:MediaQuery.of(context).size.width*0.7
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black
)
],
),
),
Solution 3
You need to put the Container to Expanded inside Row widget Like this
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.all(16.0),
child: Icon(
Icons.cake,
size: 60.0,
),
),
Expanded(child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Title text',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'This is lower text',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Flexible(
child: Text(
'Here is some long text that I am expecting will go off of the screen.',
softWrap: true,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black),
),
)
],
),
),
) ],
),
The problem is if you didn't put the Container into Expanded, the Row widget keeps expand itself to horizontal and it would overflow.
thalacker
I am a .NET developer. Currently working with Web API. Also develop iOS apps on the side.
Updated on December 15, 2022Comments
-
thalacker over 1 year
I am trying to make a widget that may have some long text that I would want to wrap a few lines.
I am trying to use the "
Flexible
" widget to wrap myText
but it is still overflowing and I do not know what is going wrong.Here is my code for the
Column
s which will be relevant to theText
:Container( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'My Title text', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 18.0, color: Colors.black), ), Text( 'This is lower text', style: TextStyle( fontWeight: FontWeight.w200, fontSize: 16.0, color: Colors.black), ), Flexible( child: Text( 'Here is some long text that I am expecting will go off of the screen.', style: TextStyle( fontWeight: FontWeight.normal, fontSize: 16.0, color: Colors.black), ), ) ], ), ),
And in case it is relevant, here is the whole widget:
Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Material( color: Colors.transparent, child: Container( height: 100.0, child: Padding( padding: EdgeInsets.all(8.0), child: Row( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Padding( padding: EdgeInsets.all(16.0), child: Icon( Icons.cake, size: 60.0, ), ), Container( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'My Title text', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 18.0, color: Colors.black), ), Text( 'This is lower text', style: TextStyle( fontWeight: FontWeight.w200, fontSize: 16.0, color: Colors.black), ), Flexible( child: Text( 'Here is some long text that I am expecting will go off of the screen.', style: TextStyle( fontWeight: FontWeight.normal, fontSize: 16.0, color: Colors.black), ), ) ], ), ), ], ), ), ), ), ); }