CODEWITHSUNDEEP
flutterwidgetflutter-layout
Sasank Sunkavalli
Sasank Sunkavalli

Reputation: 3964

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

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

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 ?

enter image description here

@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,
        ),
      ),
    ],
  );
}

Upvotes: 0

Views: 726

Answers (3)

rgisi
rgisi

Reputation: 942

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".

E.g. 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
 ]
)

Upvotes: 2

Stefano Amorelli
Stefano Amorelli

Reputation: 4854

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,
        ),
      ),
    ],
  );

Upvotes: 0

w461
w461

Reputation: 2678

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

Upvotes: 0

Related Questions