Flutter : How to place a Widget below fixed Centered Widget inside a Container

Question

How to place a Widget below fixed Centered Widget inside a Container? I am using a GridView to show widgets horizontally. GridView item will have a Text Widget which has to be fixed at the Centered everytime in the screen. I have to place a Text widget below that Centered Widget.

Reference Screenshot:

Adding the build method code of the GridView item I have tried till now. But the Text Widget is not getting centered. The output I am getting. How to fix this part?

@override
Widget build(BuildContext context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      CustomText(
        (dayModel?.date?.day ?? "").toString(),
        AppTextStyle.Body,
        customColor: _getColorBasedOnStyle(
          dayModel.style,
        ),
      ),
      Visibility(
        visible: dayModel?.style == CalendarDayStyles.NOT_AVAILABLE,
        child: CustomText(
          Strings.no_slots_label,
          AppTextStyle.SublineForCalendar,
          customColor: AppColors.BLACK_20,
        ),
      ),
    ],
  );
}

Answer 1

I believe the secret to doing this right is not only in how you build "6", but also in how you build "5" and "7".

Eg you could build every one of them as column with 3 boxes on top of each other, pseudocode:

Column(
 children: [
  SizedBox(height: fixedHeight, child: empty)
  SizedBox(height: fixedHeight, child: Text("5"))  // or "6" or "7"
  SizedBox(height: fixedHeihgt, child: empty) // or booking status
 ]
)

or other way of doing it if we have to avoid using fixedHeight is by using the Expanded Widget inside the Column Widget

Column(
 children: [
  Expanded(child: Container()),
  Expanded(child: Center(child : Text("5"))), // or "6" or "7"
  Expanded(child: Center(child : Text("No Slots"))) // or booking status
 ]
)

Answer 2

If you set crossAxisAlignment of the row to start and then show a column with "no slots" underneath, shouldn't this fix your issue?

Answer 3

You could use the CrossAxisAlignment.center :

Column(
 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,
),

Full snippet code:

@override
Widget build(BuildContext context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      CustomText(
        (dayModel?.date?.day ?? "").toString(),
        AppTextStyle.Body,
        customColor: _getColorBasedOnStyle(
          dayModel.style,
        ),
      ),
      Visibility(
        visible: dayModel?.style == CalendarDayStyles.NOT_AVAILABLE,
        child: CustomText(
          Strings.no_slots_label,
          AppTextStyle.SublineForCalendar,
          customColor: AppColors.BLACK_20,
        ),
      ),
    ],
  );