How to make three container’ child widgets (title, value, and icon) are always parallel (aligned properly across all cards) ?

Code

  GridView(
     gridDelegate:
     const SliverGridDelegateWithFixedCrossAxisCount(
         crossAxisCount: 3,
         childAspectRatio: 0.75,
         crossAxisSpacing: 10,
         mainAxisSpacing: 5,
      ),
     shrinkWrap: true,
     children: [
          _buildDashboardCard(
             context,
             color: const Color(0xFF93C572),
             title: "tenancies".tr(),
             value: 1,
             icon: Assets.images.tenancyExpiring.image(height: 30),
             ),
           _buildDashboardCard(
             context,
             color: const Color(0xFF96DED1),
             title: "currentOccupancyRate".tr(),
             value:"30.77%",
             icon: Assets.images.occupancy.image(height: 20),
             ),
               ...
             ],
       ),

 Widget _buildDashboardCard(BuildContext context,
      {required Color color,
      required String title,
      required String value,
      required Widget icon}) {
    return Container(
      decoration:
          BoxDecoration(borderRadius: BorderRadius.circular(15), color: color),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              title,
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 10),
            const Spacer(),
            Text(
              value,
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const Spacer(),
            Align(
              alignment: Alignment.bottomRight,
              child: icon,
            ),
          ],
        ),
      ),
    );
  }

How to make three container’ child widgets (title, value, and icon) are always parallel (aligned properly across all cards) ?

Code

  GridView(
     gridDelegate:
     const SliverGridDelegateWithFixedCrossAxisCount(
         crossAxisCount: 3,
         childAspectRatio: 0.75,
         crossAxisSpacing: 10,
         mainAxisSpacing: 5,
      ),
     shrinkWrap: true,
     children: [
          _buildDashboardCard(
             context,
             color: const Color(0xFF93C572),
             title: "tenancies".tr(),
             value: 1,
             icon: Assets.images.tenancyExpiring.image(height: 30),
             ),
           _buildDashboardCard(
             context,
             color: const Color(0xFF96DED1),
             title: "currentOccupancyRate".tr(),
             value:"30.77%",
             icon: Assets.images.occupancy.image(height: 20),
             ),
               ...
             ],
       ),

 Widget _buildDashboardCard(BuildContext context,
      {required Color color,
      required String title,
      required String value,
      required Widget icon}) {
    return Container(
      decoration:
          BoxDecoration(borderRadius: BorderRadius.circular(15), color: color),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              title,
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 10),
            const Spacer(),
            Text(
              value,
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const Spacer(),
            Align(
              alignment: Alignment.bottomRight,
              child: icon,
            ),
          ],
        ),
      ),
    );
  }

• flutter
• dart
• containers
• expand

• why vote to close my question？ – John Joe Commented Nov 21, 2024 at 4:35
• try wrap to SizedBox and set height to the card text(title). all titles should have same height. or more flexibly - define the height of the entire card and allocate a fixed percentage of this height for the title. – Vladyslav Ulianytskyi Commented Nov 21, 2024 at 7:38

1 Answer 1

I tried to implement and achived something like this

Here is the code:

     GridView(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          childAspectRatio: 0.75,
          crossAxisSpacing: 10,
          mainAxisSpacing: 5,
        ),
        shrinkWrap: true,
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 32),
        children: [
          buildContainer(
            context,
            title: "First Title",
            subtitle: "1",
            icon: const Icon(Icons.home),
            color: Colors.green[200]!,
          ),
          buildContainer(
            context,
            title: "Second title",
            subtitle: "12.33",
            icon: const Icon(Icons.home),
            color: Colors.teal[200]!,
          ),
          ...
        ],
      )

Code of Container:

Container buildContainer(BuildContext context,
      {required String title,
      required String subtitle,
      required Icon icon,
      required Color color}) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(16),
      ),
      child: Column(
        children: <Widget>[
          Expanded(
            flex: 2,
            child: Center(
              child: Text(
                title,
                style: Theme.of(context).textTheme.bodyLarge,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
                textAlign: TextAlign.center,
              ),
            ),
          ),
          Expanded(
            child: Text(
              subtitle,
              style: Theme.of(context).textTheme.headlineLarge,
            ),
          ),
          const SizedBox(height: 8),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              icon,
            ],
          ),
        ],
      ),
    );
  }
}