Setting Height on Grid Tile Bar

Question

I have a general question regarding the height of a GridTile Bar.

I currently have the GridTile display like this:

My Objective is to have it like this:

When I add the SizedBox to leave a space between price and Address, the address gets cut off the second line.

Any Ideas on how to move it up.

Here is my code of the Grid Tile:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:intl/intl.dart';

import '../providers/listing.dart';

class ListingItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final listing = Provider.of<Listing>(context, listen: false);
    final formatDolar = new NumberFormat("#,##0.00", "en_US");

    return ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: GridTile(
        child: GestureDetector(
          onTap: () {},
          child: Image.network(
            listing.coverPhoto,
            fit: BoxFit.cover,
          ),
        ),
        header: GridTileBar(
          title: Text(''),
          trailing: IconButton(
            icon: Icon(Icons.favorite_border),
            color: Theme.of(context).accentColor,
            onPressed: () {},
          ),
        ),
        footer: GridTileBar(
          backgroundColor: Colors.black54,
          title: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                '\$ ${formatDolar.format(listing.price)}',
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
              SizedBox(
                width: 20,
                height: 5,
              ),
              Expanded(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Flexible(
                      child: Text(
                        '${listing.street}, ${listing.street2}, ${listing.city}, ${listing.state}, ${listing.zipCode}',
                        maxLines: 3,
                        style: TextStyle(
                            fontSize: 14,
                            color: Colors.white,
                            fontWeight: FontWeight.w500),
                      ),
                    ),
                    SizedBox(
                      height: 5,
                    ),
                    Text(
                      '|',
                      style: TextStyle(
                          fontSize: 18,
                          color: Colors.white,
                          fontWeight: FontWeight.bold),
                    ),
                    SizedBox(
                      width: 5,
                    ),
                    Text(
                      '${listing.bedRooms} bds',
                      style: TextStyle(
                          fontSize: 18,
                          color: Colors.white,
                          fontWeight: FontWeight.bold),
                    ),
                    SizedBox(
                      width: 5,
                    ),
                    Text(
                      '|',
                      style: TextStyle(
                          fontSize: 18,
                          color: Colors.white,
                          fontWeight: FontWeight.bold),
                    ),
                    SizedBox(
                      width: 5,
                    ),
                    Text(
                      '${listing.bathRooms} bth',
                      style: TextStyle(
                          fontSize: 18,
                          color: Colors.white,
                          fontWeight: FontWeight.bold),
                    ),
                    SizedBox(
                      width: 5,
                    ),
                  ],
                ),
              ),
              SizedBox(
                height: 1,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

and here it is the code for the Grid:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../providers/listings.dart';
import './listing_item.dart';

class ListingGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final listingData = Provider.of<Listings>(context);
    final listings = listingData.items;

    return GridView.builder(
      padding: const EdgeInsets.all(10.0),
      itemCount: 10,
      itemBuilder: (ctx, i) => ChangeNotifierProvider.value(
        value: listings[i],
        child: ListingItem(),
      ),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 1,
          childAspectRatio: 3.5 / 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10),
    );
  }
}

I have tried changing the childAspectRatio in the grid but I only get the cover photo to get bigger not the Tile Bar which is what I want to move up.

Any Ideas?

Kind Regards.

Answer 1

Put GridTileBar widget in a Container widget and give it the height that you want. Here's an example code:

       GridTile(
            footer: Container(
              padding: const EdgeInsets.all(8),
              color: Colors.black54,
              height: 60,
              child: GridTileBar(
                title: Text(
                  "Example",
                  style: TextStyle(color: Colors.black),
                ),
              ),
            ),