Setting Height on Grid Tile Bar - flutter

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