I was trying to create an app with Flutter and Dart and I was wondering if there was a way to go newline if a container inside a row overflows.
Here’s an example, the thing I want to do is to make the "button" go newline if it intersects into another one to make it more readable.
I hope someone can help me, I will link the code also for a better understanding.
Padding(
padding: EdgeInsets.fromLTRB(0, MediaQuery.of(context).size.height/40, 0, 0),
child: Column(
children: [
Row( //I tre bottoni di 'Like', 'Commenta' e 'Condividi'
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container( //Like button
width: MediaQuery.of(context).size.width/4,
height: MediaQuery.of(context).size.height/15,
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.blue,
spreadRadius: 5,
blurRadius: 20,
)
]
),
child: Row( //Contenuto del container, 'child:' perché è il figlio del container
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [ //'Children:[]' perché contiene più elementi
Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 5, 0),
child: Icon(
Icons.thumb_up, color: Colors.white,
size: MediaQuery.of(context).size.height/40,
),
),
Center(
child: Text('Like',
overflow: TextOverflow.fade,
style: TextStyle(
fontSize: MediaQuery.of(context).size.height/40,
fontFamily: 'Poppins',
color: Colors.white,
),
),
),
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(MediaQuery.of(context).size.width/40, 0, MediaQuery.of(context).size.width/40, 0),
child: Container( //Comment button
width: MediaQuery.of(context).size.width/4,
height: MediaQuery.of(context).size.height/15,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.green,
boxShadow: [
BoxShadow(
color: Colors.green,
spreadRadius: 5,
blurRadius: 20,
)
]
),
child: Row( //Contenuto del secondo bottone (quello centrale)
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 5, 0),
child: Icon(
Icons.message, color: Colors.white,
size: MediaQuery.of(context).size.height/40,
),
),
Text('Commenta',
overflow: TextOverflow.clip,
style: TextStyle(
fontSize: MediaQuery.of(context).size.height/40,
fontFamily: 'Poppins',
color: Colors.white,
),
),
],),
),
),
Container( //Share post button
width: MediaQuery.of(context).size.width/4,
height: MediaQuery.of(context).size.height/15,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.red,
boxShadow: [ //Parentesi quadre perché può contenere più proprietà, è perciò una lista
BoxShadow(
color: Colors.red,
spreadRadius: 5,
blurRadius: 20,
)
]
),
child: Row( //Contenuto del container
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 5, 0),
child: Icon(
Icons.share, color: Colors.white,
size: MediaQuery.of(context).size.height/40,
),
),
Text('Condividi',
style: TextStyle(
fontSize: MediaQuery.of(context).size.height/40,
fontFamily: 'Poppins',
color: Colors.white,
),
)
]
)
),
],
),
],
),
)
],),
2
Answers
Just figured out the problem, I put the
Wrapwidget in the wrong position and now it works as needed. Here's the code to help others who have the same problem.Method1: You have to use
Flexiblewidget to avoid overflow.Edited
Method 2:
Method 3: Try with
Wrapto make the buttons in multiple lines but text will be in single line