Search code examples
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