Can't center column

user_15493934 0
Viewed 44

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? enter image description here

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

dart flutter
3 Answers

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

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

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,

user_153423040

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:

Screenshot

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')),
        ],
      ),
    ],
  ),
),
user_28283410
Related