CODEWITHSUNDEEP
flutterdart
Paprika
Paprika

Reputation: 174

Constraints unbounded for FittedBox inside Expanded inside container with width

I'm trying to make this:

[Buy                $5,99"]

For that, I divided the row in 2 using flex. The first piece for Buy and the second for $5,99, which I align to the right obviously.

However, I cannot make it work. I tried FittedBox but also other things. I get

RenderFlex children have non-zero flex but incoming width constraints are unbounded.

Which makes no sense since the expanded is inside a container with defined width.

     Expanded(
          child: Container(
              decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.only(
                  bottomLeft: const Radius.circular(ROUNDNESSS),
                  bottomRight: const Radius.circular(ROUNDNESSS),
                ),
              ),
              child: FittedBox(
                  fit: BoxFit.fitWidth,
                  child: Row(
                    children: [
                      Flexible(
                          child: Text("Buy",
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 17,
                                fontWeight: FontWeight.w700,
                                fontFamily: 'Roboto',
                              )),
                          flex: 1),
                      Flexible(
                          child: Text("\$5,99",
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 17,
                                fontWeight: FontWeight.w700,
                                fontFamily: 'Roboto',
                              )),
                          flex: 1)
                    ],
                  ))),
          flex: 3)

Upvotes: 2

Views: 808

Answers (1)

BeefPapa
BeefPapa

Reputation: 84

You can not expand Text widgets. Containers can be expanded so wrapping each of your text widgets in a Container is a start. Now, the containers will not change their dimensions unless they are Expanded. Now inside Expanded you have a property called flex that will work. Here is some working code.

class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return Container(
    color: Colors.cyan,
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    child: Center(
      child: Row(
        children: [
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.red,
              child: Text("\$5,99",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 17,
                    fontWeight: FontWeight.w700,
                    fontFamily: 'Roboto',
                  )),
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.blue,
              child: Text("Buy",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 17,
                    fontWeight: FontWeight.w700,
                    fontFamily: 'Roboto',
                  )),
            ),
          )
        ],
      ),
    ),
  );
 }
}

This, however does not give you the look you were going for. To achieve the spacing you were aiming for there is a much simpler solution using the mainAxisAlignment property of the Row

child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,

Upvotes: 1

Related Questions