Expand or any other flex widget inside a ListView item

0

I am having problems getting my layout right... I need a somewhat advanced item in my ListView.

If you see this screenshot: enter image description here

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

flutter
flutter-listview
asked on Stack Overflow Feb 2, 2020 by Neigaard • edited Feb 2, 2020 by Neigaard

0 Answers

Nobody has answered this question yet.


User contributions licensed under CC BY-SA 3.0