Starting a Column from the center of its parent-CodePudding

I am trying to implement a Column within a parent, but the first child of the Column should be centered vertically within the Column's parent, by using MainAxisAlignment.center the whole Column will be centered and if I have more than one child in the Column, the first child won't be in the center.

Here is what i have tried.

child: CircleAvatar(
                          radius: 146,
                          backgroundColor: Colors.black87,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text('11:06',
                                  style: TextStyle(
                                    fontSize: 70,
                                  )),
                              Icon(Icons.restart_alt),
                            ],
                          ),
                        ),

Here is what i got.enter image description here As you see the text is not in the center because the icon pushes it up a bit.

CodePudding user response：

You can wrap your column in another column containing an Expanded widget followed by your column, also wrapped in an Expanded widget.

CodePudding user response：

You can use some padding. I am not aware of a way to get the size of the parent and do like 50% of it like in CSS so you have to keep that in mind. However you can make calculations relative to the viewport height with MediaQuery.of(context).size.height.

CodePudding user response：

Use Align inside Stack (not perfect, still needs adjustment).

CircleAvatar(
...
  child: Stack(
    alignment: Alignment.center,
    children: const [
      Text('11:06', style: TextStyle(fontSize: 70)),
      Align(
        alignment: Alignment(0, 0.4),
        child: Icon(Icons.restart_alt),
      ),
    ],
  ),
)