Ad

Setting Height On Grid Tile Bar

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

I currently have the GridTile display like this:

Current List Tile

My Objective is to have it like this:

Objective

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

Error on size

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.

Ad

Answer

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),
                ),
              ),
            ),
Ad
source: stackoverflow.com
Ad