1

I am trying to add 70.0px at the bottom of each of my Container item in my ListView. I have been looking at a lot of answers from StackOverflow and trying them in many different ways, and adding padding inside ListView doesn't work somehow. However, I still couldn't tackle it. Can someone please give me some advice please?

class PortfolioRow extends StatelessWidget {    
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
        return Container(
            margin: const EdgeInsets.only(bottom: 70.0),
            child: StreamBuilder(
                stream: Firestore.instance
                    .collection('portfolio')
                    .where('category')
                    .snapshots(),
                builder: (context, snapshot) {
                  return ListView.builder(
                      physics: ScrollPhysics(),
                      shrinkWrap: true,
                      itemExtent: 450.0,
                      itemCount: snapshot.data.documents.length,
                      itemBuilder: (context, index) => portfolioContainer(
                          context, snapshot.data.documents[index]));
                }));
      ...
}

Widget portfolioContainer(
    BuildContext context, DocumentSnapshot documentSnapshot) {
  return Align(
      child: SizedBox(
          height: 540,
          width: 330,
          child: Container( // if I add padding bottom here, there will be a pixel overflow in my container
            child: Column(children: [
              Container(
                  ...
}
Karen Chan
  • 164
  • 1
  • 1
  • 16

1 Answers1

1

ListView has a named constructor for exactly that : ListView.separated(). The separatorBuilder parameter lets you specify a widget that will be added at the bottom of each item :

ListView.separated(
  itemCount: 25,
  separatorBuilder: (BuildContext context, int index) => Divider(),
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text('item $index'),
    );
  },
)
MickaelHrndz
  • 3,604
  • 1
  • 13
  • 23
  • Hi @MickaelHrndz, thank you very much for your answer. However, when I use `ListView.separated`, I would lose my `itemExtent` that sets the height of my `ListView` items. May I ask if there's any suggestion to it please? x – Karen Chan Jul 15 '20 at 13:03
  • Is the `SizedBox` not enough to set it ? Btw you can also try wrapping or replacing the `Align` with a `Padding(padding: EdgeInsets.only(bottom: 16))` (while using `ListView.builder`). Also, you might want to set `mainAxisSize: MainAxisSize.min` on the column so it doesn't extend infinitely. – MickaelHrndz Jul 15 '20 at 13:25
  • The `SizedBox` is not working in this case. I have tried to set `mainAxisSize: MainAxisSize.min` in my column and it didn't work either. For your suggestion of replacing `Align` with `Padding`, that would set the width of my container to `ScreenWidth`, which is not what I am looking for. The answer you provided above did add a padding to the bottom to each of my `ListView Container`, however, it disrupted the height of each of my `ListView Container`... – Karen Chan Jul 16 '20 at 06:32