Can't center column

Question

I can't center content inside the column widget. If width of the component is normal it's centered, but when width is too much, or infinity it doesn't center. Here is my code example:

return Center(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
      children:[
        Row(
          children: [
            Row(
              children: [
                Text(
                  "Available:",
                  style: TextStyle(color: Colors.grey, fontSize: 17),
                ),
                SizedBox(width: 10),
                Text("\$ " + availableWithFormat.format(widget.available),
                    style: TextStyle(fontFamily: 'SF Pro DIsplay')),
              ],
            ),
          ],
        ),
        Row(
          children: [
            Row(children: [
              Text("\$ ",
                  style: TextStyle(
                      fontSize: 24, fontFamily: 'SF Pro DIsplay')),
              Flexible(
                fit: FlexFit.loose,
                  flex: 1,
                child: Column(
                  children: [
                    TextField(
                      controller: myController,
                      onChanged: (String value) async {
                        setState(() {
                          double input =
                              double.parse((value).replaceAll(",", ""));
                          finalCommission =
                              (input / 100) * widget.commission;
                        });
                      },
                      keyboardType: TextInputType.numberWithOptions(
                          signed: false, decimal: true),
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        constraints: BoxConstraints.tightFor(
                          width: 150,
                        ),
                        hintText: "0.00",
                      ),
                      style: TextStyle(
                          fontSize: 24, fontFamily: 'SF Pro DIsplay'),
                    ),
                  ],
                ),
              ),
            ]),
          ],
        ),
        Row(
          children: [
            Row(
              children: <Widget>[
                if (widget.commission != 0)
                  Text(
                    "Commission:",
                    style: TextStyle(
                        color: Colors.grey, fontFamily: 'SF Pro DIsplay'),
                  ),
                if (widget.commission != 0) SizedBox(width: 10),
                if (widget.commission != 0)
                  Text("\$ " + availableWithFormat.format(finalCommission),
                      style: TextStyle(fontFamily: 'SF Pro DIsplay')),
              ],
            ),
          ],
        ),
      ],
    ),
);

---

Where is the problem? And how can I solve it?

Here is the image, when I set too much width This is image, when width is normal

Answer 1

Besides the crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center for each Row it's possible to use the mainAxisSize: MainAxisSize.min property instead. It's going to minimize the amount of free space along the main axis, subject to the incoming layout constraints instead of maximizing it (the default).

This is the result:

And here's the code:

Center(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start, // <- Here
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Row(
        mainAxisSize: MainAxisSize.min, // <- Here
        children: [
          Text(
            "Available:",
            style: TextStyle(color: Colors.grey, fontSize: 17),
          ),
          SizedBox(width: 10),
          Text("\$ " + availableWithFormat.format(widget.available),
              style: TextStyle(fontFamily: 'SF Pro DIsplay')),
        ],
      ),
      Row(
        mainAxisSize: MainAxisSize.min, // <- Here
        children: [
          Text("\$ ",
              style:
                  TextStyle(fontSize: 24, fontFamily: 'SF Pro DIsplay')),
          Flexible(
            fit: FlexFit.loose,
            flex: 1,
            child: Column(
              children: [
                TextField(
                  controller: myController,
                  onChanged: (String value) async {
                    setState(() {
                      double input =
                          double.parse((value).replaceAll(",", ""));
                      finalCommission = (input / 100) * widget.commission;
                    });
                  },
                  keyboardType: TextInputType.numberWithOptions(
                      signed: false, decimal: true),
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    constraints: BoxConstraints.tightFor(
                      width: 150,
                    ),
                    hintText: "0.00",
                  ),
                  style: TextStyle(
                      fontSize: 24, fontFamily: 'SF Pro DIsplay'),
                ),
              ],
            ),
          ),
        ],
      ),
      Row(
        mainAxisSize: MainAxisSize.min, // <- Here
        children: <Widget>[
          if (widget.commission != 0)
            Text(
              "Commission:",
              style: TextStyle(
                  color: Colors.grey, fontFamily: 'SF Pro DIsplay'),
            ),
          if (widget.commission != 0) SizedBox(width: 10),
          if (widget.commission != 0)
            Text("\$ " + availableWithFormat.format(finalCommission),
                style: TextStyle(fontFamily: 'SF Pro DIsplay')),
        ],
      ),
    ],
  ),
),

Answer 2

you should reduce row into row 1 step then it looks like column( children[ row(children), row(children), ]) then provide alignment crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,

Answer 3

A solution to your problem is to set the alignment for each of your row

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisAlignment: MainAxisAlignment.center,
  children: [...]
)