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

Question

我在一列的一侧使用了两个文本，一个文本字段很长然后我收到此错误“RenderFlex 在右侧溢出 1088 像素。”

我在一列的旁边使用了两个文本，一个文本字段很长然后我收到了这个错误“RenderFlex 在右边溢出了 1088 像素。” 如何解决？

这是我的代码

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

尝试通过将文本包裹在 SizedBox 中并为其指定固定宽度来限制文本的宽度。

      SizedBox(
        width: 200,
        child: Text(
          "${widget.eventsListDetails[index]['description']}",
          style: GoogleFonts.poppins(fontSize: 12, color: Color(0xff444444)),
          overflow: TextOverflow.ellipsis,
          maxLines: 2,
        ),
      ),

Answer 2

使用这个

             Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '${widget.eventsListDetails[index]['name']}',
                          style: GoogleFonts.poppins(
                              fontSize: 14, color: Color(0xff158998)),
                        ),
                        Expanded(
                       Text(
                        "${widget.eventsListDetails[index]['description']}",
                         style: GoogleFonts.poppins(
                              fontSize: 12, color: Color(0xff444444)), overflow: TextOverflow.ellipsis,
                            maxLines: 2,
                        ),),
                      ],
                    )

Answer 3

将您的小部件包裹在扩展或灵活的内部：

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

您的结果屏幕->

尝试添加 Inside Row 小部件，用 Expanded 或 Flexible 包裹它参考我的回答 or or

Answer 4

用 Expanded/Flexible 小部件换行。

Expanded(
                      child: 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,
                          )
                        ],
                      ),
                    )

完整代码：

import 'package:flutter/material.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,
                    ),
                

Expanded(
                  child: 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,
                      )
                        ],
                      ),
                    )
                  ],
                ),
              )
          ),
        ],
      ),
    );
  }
}

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

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

flutter

flutter-layout

flutter-web

flutter-animation

flutter-test

我在一列的一侧使用了两个文本，一个文本字段很长然后我收到此错误“RenderFlex 在右侧溢出 1088 像素。”