如何将 Stack 小部件与屏幕中心对齐？

Question

Faced a problem I can not align the widget to the center of the screen. I have everything in a column, I tried to set the alignment of the column ( mainAxisAlignment , crossAxisAlignment ) and tried to align it to the center through the Alignment widget - it did not help. I understand the reason is that I use the Stack widget. But how can you still align this widget to the center of the screen?

body

return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8),
      child: Column(
        children: [
          const SizedBox(height: 121),
          StarWidget(rating: rating),
          AvatarWidget(),
        ],
      ),
    );

AvatarWidget

return SizedBox(
      height: 32,
      child: Stack(
        children: List.generate(
          userPhoto.length > 3 ? 3 : userPhoto.length,
          (index) => Positioned(
              left: 22.0 *
                  ((userPhoto.length > 3 ? 3 : userPhoto.length) - index),
              child: index == 0 && userPhoto.length > 3
                  ? Container(
                      width: 32,
                      height: 32,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        border: Border.all(
                            color: constants.Colors.blackLight, width: 0.7),
                      ),
                      alignment: Alignment.center,
                      child: Container(
                        width: 30,
                        height: 30,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: constants.Colors.greyXDark.withOpacity(0.5),
                        ),
                        alignment: Alignment.center,
                        child: Text('+${userPhoto.length - 2}',
                            style: constants.Styles.smallerHeavyTextStyleWhite),
                      ),
                    )
                  : Container(
                      width: 32,
                      height: 32,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        border: Border.all(
                            color: constants.Colors.blackLight, width: 0.7),
                      ),
                      alignment: Alignment.center,
                      child: Container(
                        width: 30,
                        height: 30,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          image: DecorationImage(
                              image: AssetImage(userPhoto[index])),
                        ),
                      ),
                    )),
        ),
      ),
    );

Answer 1

While we know the size of item, we can calculate the width and provide on SizedBox(width:renderItemCount*singleChildWidth)

SizedBox(
  height: 32,
  width: (itemCount > 3 ? 3 : itemCount) * 32, //inner container width
  child: Stack(

Answer 2

you can use this function to get screen width and give your widget margin like thise :

double getScreenWidth(BuildContext context) {
  return MediaQuery.of(context).size.width;
}
@override
  
  Widget build(BuildContext context) {
    return Container(
margin: const EdgeInsets.only(left: getScreenWidth - 100),

      padding: const EdgeInsets.symmetric(horizontal: 8),
      child: Column(
        children: [
          const SizedBox(height: 121),
          StarWidget(rating: rating),
          AvatarWidget(),
        ],
      ),
    );

I hope that gonna helps you

Answer 3

try it like this

return SizedBox.expand(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                const SizedBox(height: 121),
                StarWidget(rating: rating),
                AvatarWidget(),
              ],
            ),
          ),
        );

Answer 4

Try "Alignment.center" like below.

Stack(
                alignment: Alignment.center,
                children: [])