Clash Royale CLAN TAG#URR8PPP

Add Widget to bottom in the Card

I'm looking for a way to set a Widget in the bottom of a Card, I don't know if that's the Widget that I have to use, but, the code that I have is the following:

Widget build(BuildContext context)
return GridView.count(
primary: true,
padding: const EdgeInsets.all(20.0),
crossAxisSpacing: 1.0,
childAspectRatio: 1.5,
crossAxisCount: 1,
children: <Widget>[
Card(
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: const Icon(Icons.album),
title: const Text('The Enchanted Nightingale'),
subtitle: const Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
),
new ButtonTheme.bar( // make buttons use the appropriate styles for cards
child: new ButtonBar(
children: <Widget>[
new FlatButton(
child: const Text('BUY TICKETS'),
onPressed: () /* ... */ ,
),
new FlatButton(
child: const Text('LISTEN'),
onPressed: () /* ... */ ,
),
],
),
),
],
),
)
]
);



So, I want to add something like bottom: Text('I am the bottom')

This is what I want, a Widget in the bottom and add children inside it.

I'll appreciate some help.

GirdView with crossAxisCount = 1

ListView

2 Answers
2

You can use an Expanded widget wrapping your ListTile

Expanded

ListTile

@override
Widget build(BuildContext context) {
return Center(
child: Container(
child: GridView.count(
primary: true,
padding: const EdgeInsets.all(20.0),
crossAxisSpacing: 1.0,
childAspectRatio: 1.5,
crossAxisCount: 1,
children: <Widget>[
Card(
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: const ListTile(
leading: const Icon(Icons.album),
title: const Text('The Enchanted Nightingale'),
subtitle: const Text(
'Music by Julie Gable. Lyrics by Sidney Stein.'),
),
),
Container(
color: Colors.blue,
child: new ButtonBar(
children: <Widget>[
new FlatButton(
child: const Text('BUY TICKETS'),
onPressed: () /* ... */,
),
new FlatButton(
child: const Text('LISTEN'),
onPressed: () /* ... */,
),
],
),
)
],
),
)
])));


I just add a container with a custom color to see the bottom part.

I got my solution, using a Scaffold and consuming its own bottomNavigationBar.

Card(
child: Scaffold(
bottomNavigationBar: Text('This is my text'),
body: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: const Icon(Icons.album),
title: const Text('The Enchanted Nightingale'),
subtitle: const Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
),
new ButtonTheme.bar( // make buttons use the appropriate styles for cards
child: new ButtonBar(
children: <Widget>[
new FlatButton(
child: const Text('BUY TICKETS'),
onPressed: () /* ... */ ,
),
new FlatButton(
child: const Text('LISTEN'),
onPressed: () /* ... */ ,
),
],
),
),
],
),
)
)


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.