Column widget causing layout problems - flutter

Question

I currently have a list made of Containers() (since I cannot use ListView because I need external scrolling), and it's working well except because in each of them, I have a Row(), with two Column() widgets. The first column should be limited print an image, and the second one, to show certain information in rows. It's a very typical way of doing lists, so I thought it shouldn't cause problems.
Thing is, that the second Text() widget in the second Column(), seems to always cause the upper Text() to shift to the right, causing an overflow and making the text unreadable, unreachable by the user. Look at this picture:
Yes, the titles are there (even if you can't see the second one). They are just quite shifted to the right. If I remove the description below, they show up correctly, at the left side, with just a little left padding. Thing is, these titles should be there no matter how elements are below, or at least, that's how I understand the Column() widget should work.
Take a look at the code:
getListItems(List<Artist> artistList) {
// Iterate through the whole Artists array and render a list item for each one
return artistList.map((Artist artist) {
return Container(
margin: EdgeInsets.only(top: 12),
height: 100,
color: Colors.grey[600],
child: Row(
children: <Widget>[
Padding(padding: EdgeInsets.only(left: 15)),
Column(
children: <Widget>[
Image(
width: 100,
height: 100,
fit: BoxFit.cover,
image: artist.avatar)
],
),
Padding(padding: EdgeInsets.only(top: 5)),
Column(
children: <Widget>[
Text(
artist.name,
style: TextStyle(fontSize: 18),
),
Padding(padding: EdgeInsets.only(top: 5)),
Text(artist.description, style: TextStyle(fontSize: 13))
],
)
],
));
}).toList();
What is wrong in this code? Thank you!

Answer 1

You can wrap the second column with Flexible to avoid overflow:
Container(
margin: EdgeInsets.only(top: 12),
height: 100,
color: Colors.grey[600],
child: Row(
children: <Widget>[
Padding(padding: EdgeInsets.only(left: 15)),
Column(
children: <Widget>[
Image(
width: 100,
height: 100,
fit: BoxFit.cover,
image: artist.avatar)
],
),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
artist.name,
style: TextStyle(fontSize: 18),
),
Padding(padding: EdgeInsets.only(top: 5)),
Text(artist.description, style: TextStyle(fontSize: 13))
],
),
)
],
))

Answer 2

You need to make some modifications to the Column which contains the Text widgets
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
artist.name,
style: TextStyle(fontSize: 18),
),
Padding(padding: EdgeInsets.only(top: 5)),
Container(
width: MediaQuery.of(context).size.width * 0.5, // can change "0.5" according to your requirement
child: Text(
artist.description,
style: TextStyle(fontSize: 13),
),
),
],
)

Answer 3

You can use Flexible() widget Wrap your text widget in flexible widget.
return Center(
child: Padding(padding: EdgeInsets.only(left: 50, right: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: Text('Hii....helloo....how r u?...here you can show multiple line.', textAlign: TextAlign.center,style: TextStyle(fontSize: 20.0, color: Colors.white))),
],
),
)
);

Answer 4

try Expanded
getListItems(List<Artist> artistList) {
// Iterate through the whole Artists array and render a list item for each one
return artistList.map((Artist artist) {
return Container(
margin: EdgeInsets.only(top: 12),
height: 100,
color: Colors.grey[600],
child: Row(
children: <Widget>[
Padding(padding: EdgeInsets.only(left: 15)),
Column(
children: <Widget>[
Image(
width: 100,
height: 100,
fit: BoxFit.cover,
image: artist.avatar)
],
),
Padding(padding: EdgeInsets.only(top: 5)),
Expanded(
child: Column(
children: <Widget>[
Text(
artist.name,
style: TextStyle(fontSize: 18),
),
Padding(padding: EdgeInsets.only(top: 5)),
Text(artist.description, style: TextStyle(fontSize: 13))
],
),
)
],
));
}).toList();

Answer 5

Use Expanded
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
height: 100,
color: Colors.grey[600],
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Container(
width: 100,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage("https://picsum.photos/100"),
),
),
),
const SizedBox(width: 8.0),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Artist Name"),
const SizedBox(height: 8.0),
Text("Artist Description"),
],
),
),
],
),
);
}
}

Answer 6

first of all you can Define the container as a child of Expanded(the container in top of widget)
Expanded(
child:
Container(
margin: EdgeInsets.only(top: 12),
height: 100,
color: Colors.grey[600],......
or you can use
media query,media query, Defines the length or width according to the screen resolution of the phone
you gotta define media query for height or width
use the mediaqueryfor that, MediaQuery.of(context).size.height,
Container(
margin: EdgeInsets.only(top: 12),
height: `MediaQuery.of(context).size.height`,
color: Colors.grey[600],
child: Row(
children: <Widget>[
Padding(padding: EdgeInsets.only(left: 15)),
Column(
children: <Widget>[
Image(
width: 100,
height: 100,
fit: BoxFit.cover,
image: artist.avatar)
],
),
Padding(padding: EdgeInsets.only(top: 5)),
Column(
children: <Widget>[
Text(
artist.name,
style: TextStyle(fontSize: 18),
),
Padding(padding: EdgeInsets.only(top: 5)),
Text(artist.description, style: TextStyle(fontSize: 13))
],
)
],
));
}).toList();
if when you use the media query the overflowed error is showing you gotta say
MediaQuery.of(context).size.height - the pixels that error says pixels are overflowed
it means if error says overflowed by 128 pixels you gotta say
Container( height: MediaQuery.of(context).size.height -128 ,)