Flutter Flexible not wrapping text within a column - flutter

Question

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 my Text but it is still overflowing and I do not know what is going wrong.
Here is what is happening:
Here is my code for the Columns which will be relevant to the Text:
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),
),
)
],
),
),
],
),
),
),
),
);
}

Answer 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),
),
)
],
),
),
)
Here is what you expect:-
Hope it will work.

Answer 2

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.

Answer 3

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
)
],
),
),