flutter error: A RenderFlex overflowed by 1088 pixels on the right

Question

I am using two text in side a column, one text field is long then I got this error "A RenderFlex overflowed by 1088 pixels on the right."

I am using two text in side a column, one text field is long then I got this error "A RenderFlex overflowed by 1088 pixels on the right." How to fix it?

this is my code

import 'package:cwc/constants/constants.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class EvSpeakers extends StatefulWidget {
  final eventsListDetails;
  const EvSpeakers({Key? key, this.eventsListDetails}) : super(key: key);

  @override
  State<EvSpeakers> createState() => _EvSpeakersState();
}

class _EvSpeakersState extends State<EvSpeakers> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.fromLTRB(20, 20, 0, 0),
            child: Text(
              'Speakers & Moderators',
              style: GoogleFonts.poppins(
                  fontWeight: FontWeight.w500,
                  fontSize: 18,
                  color: Color(0xff444444)),
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(20, 0, 0, 0),
            child:
              ListView.builder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount:widget.eventsListDetails.length,
                itemBuilder: (BuildContext context, int index) => Row(
                  children: [
                   widget.eventsListDetails[index]['image'] == null ? Image.asset(
                      'assets/herogirl.png',
                      width: 100,
                      height: 120,
                    ):Image.network(
                     imgBaseUrl+'${widget.eventsListDetails[index]['image']}',
                     width: 100,
                     height: 120,
                   ),
                    SizedBox(
                      width: 14,
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '${widget.eventsListDetails[index]['name']}',
                          style: GoogleFonts.poppins(
                              fontSize: 14, color: Color(0xff158998)),
                        ),
                        Text(
                        "${widget.eventsListDetails[index]['description']}",
                         style: GoogleFonts.poppins(
                              fontSize: 12, color: Color(0xff444444)), overflow: TextOverflow.ellipsis,
                            maxLines: 2,
                        )
                      ],
                    )
                  ],
                ),
              )
            ),

        ],
      ),
    );
  }
}

Answer 1

Wrap your widget inside Expanded or Flexible:

Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Image.network(
        'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
        width: 100,
      ),
      SizedBox(
        width: 10,
      ),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              ' {widget.eventsListDetails[index][ name ]}',
            ),
            Text(
              " {widget.eventsListDetails[index]['description']}{widget.eventsListDetails[index]['description']}{widget.eventsListDetails[index]['description']}{widget.eventsListDetails[index]['description']}",
              overflow: TextOverflow.ellipsis,
              maxLines: 3,
            ),
          ],
        ),
      ),
    ],
  ),

Your Result screen->

Try to add your Inside Row widgets, wrap it with Expanded or Flexible Refer my answer here or here or here