CODEWITHSUNDEEP
dartflutterflutter-layout
Robin Manoli
Robin Manoli

Reputation: 2222

How to place an image below a listview in flutter?

Using this simple design, how can I display the second image under the listview? In reality the list will be fetched from firebase where each item is an ExpansionTile, so the height of the listview can in no way be fixed.

The column should be scrollable so you can see the full image if you scroll down below the list.

import 'package:flutter/material.dart';

List<Widget> list = <Widget>[
  ListTile(
    title: Text('CineArts at the Empire',
        style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
    subtitle: Text('85 W Portal Ave'),
    leading: Icon(
      Icons.theaters,
      color: Colors.blue[500],
    ),
  ),
  ListTile(
    title: Text('The Castro Theater',
        style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
    subtitle: Text('429 Castro St'),
    leading: Icon(
      Icons.theaters,
      color: Colors.blue[500],
    ),
  ),
];

class CartWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Column(children: <Widget>[
      Image.network("https://via.placeholder.com/350x150"),
      Expanded(
        child: ListView(
          children: list,
        ),
      ),
      Image.network("https://via.placeholder.com/350x500"), // error: hides above widget
    ]));
  }
}

Upvotes: 1

Views: 5701

Answers (1)

Marcel
Marcel

Reputation: 9569

The way I understood your problem is that you want the bottom image to appear inside the list view instead of under it, as if it was just another item. Solution: Make it just another item!

More concrete, this is how your implementation for a helper function that enriches the list with the image may look like:

List<Widget> _buildListWithFooterImage(List<Widget> items) {
  return items.followedBy([
    Image.network("https://via.placeholder.com/350x500")
  ]);
}

Then, you could use that function during your build:

Widget build(BuildContext context) {
  return SafeArea(
    child: Column(
      children: <Widget>[
        Image.network("https://via.placeholder.com/350x150"),
        Expanded(
          child: ListView(
            children: _buildListWithFooterImage(list)
         )
        ),
      ]
    )
  );
}

Also, I believe your question is similar to this one.

Upvotes: 1

Related Questions