Question 77522 in Flutter Question posted in
The official Flutter documentation can be found here.

flutter box constraints not propagating to child as expected

I have learned that to make a Text wrap, you have to wrap it inside a Flexible() and set softWrap: true.

I have a ListView() with items generated by the following code:

return Container(
  constraints: const BoxConstraints(maxWidth: 300), 
  child: Row(mainAxisSize: MainAxisSize.min, children: [
    Checkbox(materialTapTargetSize: MaterialTapTargetSize.shrinkWrap),
    GestureDetector(
        onTap: () {},
        child: Container(
          color: Colors.white,
          child: Row(mainAxisSize: MainAxisSize.min, children: [
            Icon(getCustomIcon(name: f.icon), size: 20, color: Colors.black),
            const SizedBox(width: 6),
            Flexible(
                child: Text(f.name,
                    softWrap: true, style: TextStyle(fontSize: 14))),
            const SizedBox(width: 6),
          ]),
        ))
  ]),
);

The Container should have a maximum width of 300 (see the outer BoxConstraints), but the innermost Text() node does not wrap and overflows.
Somewhere in here the box constraints get lost, but I don’t understand where.

Note: I removed UI non-relevant code like onTap/onChange/…

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After some more testing around I was able to solve the problem myself.

    The problem is wrapping a row inside a row (even with other containers in-between) removes the constraints.

    The solution is to put a Flexible/Expanded as the child of the parent row:

    // innerRow is unconstrained
Row( children: [
  ...otherElements,
  Row() // innerRow
]);

// innerRow is constrained
Row( children: [
  ...otherElements,
  Flexible( // Flexible or Expanded tells the child to fill in the remaining space.
    child: Row() // innerRow
  ) 
]);

  2. 0

    try :
    Wrap your Container with either Row() or Center().

    here is Code :

    return Center(
                child: Container(
                  constraints: const BoxConstraints(maxWidth: 300),
                  child: Row(mainAxisSize: MainAxisSize.min, children: [
                    Checkbox(
                      materialTapTargetSize:
                          MaterialTapTargetSize.shrinkWrap,
                      onChanged: (bool? value) {},
                      value: true,
                    ),
                    GestureDetector(
                        onTap: () {},
                        child: Container(
                          color: Colors.white,
                          child: Row(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                Icon(Icons.abc,
                                    size: 20, color: Colors.black),
                                const SizedBox(width: 6),
                                Flexible(
                                    child: Text("f.name",
                                        softWrap: true,
                                        style: TextStyle(fontSize: 14))),
                                const SizedBox(width: 6),
                              ]),
                        ))
                  ]),
                ),
              );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search