Issue
Render flex issue is getting when minimizing my screen.
My required screen design is attached below.
I got this perfectly in normal screen.But when I minimise the screen size I got the below screen,
Is it possible to avoid render flex issue here.I tried by wrap row with flexible and expanded widget but nothing works.
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 52,
height: 52,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
topRight: Radius.circular(5),
),
color:Color(0xffF4F7F9),
border: controller.isSelected.value && controller.eventTitle.value==evntnam?
Border.all(color: AppColors.secondaryColor):controller.isSelected.value==false && isSelected? Border.all(color: AppColors.secondaryColor):
Border.all(
color: Color(0xffEBEBEB)
)
),
child: Padding(
padding: const EdgeInsets.only(top: 4.0),
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Text(
'$date',
textAlign: TextAlign.center,
),
Center(
child: Text(
'$month',
textAlign: TextAlign.center,
),
)
],
),
),
),
),
SizedBox(
width: 10,
),
Flexible(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AutoSizeText(
'$evntnam',
textAlign: TextAlign.left,
),
SizedBox(
height: 13,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
textBaseline: TextBaseline.alphabetic,
children: [
Container(
height: 12,
width: 12,
decoration: BoxDecoration(
// color: Colors.red,
image: DecorationImage(
image: AssetImage(
'assets/png/marker2.png'))),
),
Padding(
padding: const EdgeInsets.only(left:5.0),
child: Text(
'$loc',
textAlign: TextAlign.left,
),
SizedBox(height: 5,),
loc==""?endDate.toString()==""?Text(
' · ${startDate}',
textAlign: TextAlign.left,
style:eventDateStyleDetails,
):Text(
' · ${startDate} -${endDate}',
textAlign: TextAlign.left,
style:eventDateStyleDetails,
): endDate.toString()==""?Text(
' · ${startDate}',
textAlign: TextAlign.left,
style:eventDateStyleDetails,
):Text(
' · ${startDate} -${endDate}',
textAlign: TextAlign.left,
style: eventDateStyleDetails,
),
],
),
],
),
),
],
)
Solution
Don’t forget to always wrapping your Widget (that contains a Text) inside Row children with Expanded or Flexible
try to wrap all the Text Widget with Expanded or Flexible from your code containing loc == '' ?
Example Code You need to change:
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 12,
width: 12,
decoration: BoxDecoration(
// color: Colors.red,
image: DecorationImage(
image: AssetImage('assets/png/marker2.png'))),
),
SizedBox(width: 5,),
Flexible(
child: Text(
'$loc',
textAlign: TextAlign.left,
),
SizedBox(height: 5,),
loc == "" ?
endDate.toString() == "" ?
Expanded(
child: Text(
' · ${startDate}',
textAlign: TextAlign.left,
style:eventDateStyleDetails,
)) :
Expanded(
child: Text(
' · ${startDate} -${endDate}',
textAlign: TextAlign.left,
style: eventDateStyleDetails,
)) :
endDate.toString() == "" ?
Expanded(
child: Text(
' · ${startDate}',
textAlign: TextAlign.left,
style:eventDateStyleDetails,
)) :
Expanded(
child: Text(
' · ${startDate} -${endDate}',
textAlign: TextAlign.left,
style: eventDateStyleDetails,
)),
],
),
Answered By – Septian Dika
Answer Checked By – Cary Denson (FlutterFixes Admin)