fluttertextoverflowflutter-renderflex-error

Flutter Text inside a container, RenderFlex overflowed by pixels on the right


Hey I can't figure out a way to fix the Text inside of a container that it will break the line and expand the container by itself. I already searched for solutions but Expanded and Flexible don't work. Can anyone help me? :)

Here's a picture of the problem:

enter image description here

myContainer({required String title}) {
 return Padding(
  padding: const EdgeInsets.only(bottom: 5.0),
  child: SizedBox(
      child: Padding(
    padding: const EdgeInsets.only(top: 8.0),
    child: GestureDetector(
      onTap: () {
        print("Das hat funktioniert");
      },
      child: Container(
          decoration: BoxDecoration(
            color: const Color.fromRGBO(86, 89, 94, 1),
            borderRadius: BorderRadius.circular(15.0),
            border: Border.all(
              color: Color.fromRGBO(255, 128, 0, 1),
              width: 2,
            ),
          ),
          padding: EdgeInsets.only(top: 10, bottom: 10),
          child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(children: [
                  Padding(
                    padding: const EdgeInsets.only(
                        left: 12.0, top: 14, bottom: 14),
                    child: Container(
                      child: Text(
                        title,
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 22,
                            fontWeight: FontWeight.w400),
                      ),
                    ),
                  ),
                ])
              ])),
    ),
  )));

Thanks so much!


Solution

  • Add your Text widget inside Expanded:

    Padding(
          padding: const EdgeInsets.only(bottom: 5.0),
          child: SizedBox(
            child: Padding(
              padding: const EdgeInsets.only(top: 8.0),
              child: GestureDetector(
                onTap: () {
                  print("Das hat funktioniert");
                },
                child: Container(
                  decoration: BoxDecoration(
                    color: const Color.fromRGBO(86, 89, 94, 1),
                    borderRadius: BorderRadius.circular(15.0),
                    border: Border.all(
                      color: Color.fromRGBO(255, 128, 0, 1),
                      width: 2,
                    ),
                  ),
                  padding: EdgeInsets.only(top: 10, bottom: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Expanded(
                        child: Row(children: [
                          Expanded(
                            child: Padding(
                              padding: const EdgeInsets.only(
                                  left: 12.0, top: 14, bottom: 14),
                              child: Container(
                                child: Text(
                                  'Add your long title here after Expanded it does not give any type of error',
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 22,
                                      fontWeight: FontWeight.w400),
                                ),
                              ),
                            ),
                          ),
                        ]),
                      )
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
    

    Result: image