I am having problems getting my layout right... I need a somewhat advanced item in my ListView.
My intention was to have the background image (lowest/first item in the stack) to stretch and fill the entire height, and the blue in the top was to be at the bottom with a little padding so it is lifted a little from the bottom.
Reading about Stack I thought that all stack items would get the height of the biggest stack item thus I imagined that we would see the red Container fill the bottom also and it all should work, but it is not. I can ofcourse get all this to work if my item has a fixed height, but it does not.
How can I make something take up the full hight inside a Stack item so it matches the biggest height?
Here is the code. First the entry point to it all (the ListView):
Widget _listView(BuildContext context, MyLoanOverview loanOverview) {
return ListView.builder(
padding: const EdgeInsets.all(16),
itemCount: loanOverview.houses.length,
itemBuilder: (BuildContext context, int index) {
return _houseCard(context, loanOverview.houses[index]);
});
}
Widget _houseCard(BuildContext context, House house) {
GlobalKey _key = GlobalKey();
return Container(
key: _key,
child: InkWell(
onTap: () => _cardTap(_key, context, house),
child: HouseCard(house: house),
),
);
}
The HouseCard widget (sorry for the split up, parts are reused or will be anyways):
class HouseCard extends StatefulWidget {
final House house;
const HouseCard({Key key, this.house}) : super(key: key);
@override
State<StatefulWidget> createState() => _CardState();
}
class _CardState extends State<HouseCard> {
@override
Widget build(BuildContext context) {
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: HouseCardContent(house: widget.house, isFullscreen: false),
elevation: 4,
);
}
}
And then the last one, the big one:
class HouseCardContent extends StatefulWidget {
final House house;
final bool isFullscreen;
const HouseCardContent({Key key, this.house, this.isFullscreen}) : super(key: key);
@override
State<StatefulWidget> createState() => _CardState();
}
class _CardState extends State<HouseCardContent> {
void _onOpenClosePressed() {
di<EventBus>().fire(FullScreenCardEvent(null, null, null, null, false));
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.green,
child: Stack(
children: <Widget>[
ImageHelper.getHouseCategoryImage(widget.house.houseCategory),
Container(
color: Colors.red,
child: Padding(
padding: const EdgeInsets.only(bottom:10.0),
child: Align(
alignment: Alignment.bottomLeft,
child: Container(
color: Colors.blue,
height: 20,
),
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(12, 8, 12, 8),
child: Align(
alignment: Alignment.topLeft,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Text(
widget.house.addressStreet,
style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold, color: Colors.white),
),
),
Align(
alignment: Alignment.centerRight,
child: IconButton(icon: Image.asset(widget.isFullscreen ? 'assets/images/button_collapse.png' : 'assets/images/button_expand.png'), onPressed: widget.isFullscreen ? () => _onOpenClosePressed() : null),
)
],
),
SizedBox(
height: 56,
),
Row(
children: <Widget>[
Expanded(
child: Text(
'Boligværdi',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white),
),
),
Align(
alignment: Alignment.centerRight,
child: Text(
'4.233.123',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white),
),
)
],
),
SizedBox(
height: 32,
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
height: 60,
decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(10.0)),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
height: 60,
decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(10.0)),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
height: 60,
decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(10.0)),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
height: 60,
decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(10.0)),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
height: 60,
decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(10.0)),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
height: 60,
decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(10.0)),
),
)
],
),
),
)
],
),
);
}
}
Thank you
Søren
User contributions licensed under CC BY-SA 3.0