Text inside row is overflow when minimise screen flutter web

Question

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


                                        ],
                                      ),


                                    ],
                                  ),
                                ),
                              ],
                            )

Answer 1

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