Created data from Firebase database keeps overlapping on one another

问题

Can you help me with my problem? I managed to read my data from the Firebase Database but for some reason they look like this:

What I want is to just have them displayed correctly in a column like manner with an image in the background

my code that is used to build the widgets is below:

  Widget buildItem(DocumentSnapshot doc) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
      // crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
        Text('Name:   ${doc.data['offerName']}',
          style: TextStyle(fontSize: 20),
        ),
        Text('Type:   ${doc.data['offerType']}',
          style: TextStyle(fontSize: 20),
        ),
        Text(
          'End Date:${doc.data['end']}',
          style: TextStyle(fontSize: 20),
        ),
        // Text(
        //   'Start Date:${doc.data['start']}',
        //   style: TextStyle(fontSize: 20),
        // ),
      ],
      ),
    );
  }

my code to where I want to place it is this:

               child: Card(
                  child: Container(
                    height: 190.0,
                    width: 300.0,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Stack(
                          children: <Widget>[
                          StreamBuilder<QuerySnapshot>(
                          stream: db
                              .collection('createdoffers')
                              .snapshots(),         
                          builder: (context, snapshot) {
                            if (snapshot.hasData) {
                              return Stack(
                                  children: snapshot.data.documents
                                      .map((doc) => buildItem(doc))
                                      .toList());
                            } else {
                              return SizedBox();
                            }
                          },
                        ),

                          ],
                        )
                      ],
                    ),
                  ),
                ),

my whole dart code:

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:vmembershipofficial/Screens/discount_clicked.dart';

class DiscountCarousel extends StatefulWidget {
  const DiscountCarousel({Key key}) : super(key: key);

  @override
  _DiscountCarouselState createState() => _DiscountCarouselState();
}

class _DiscountCarouselState extends State<DiscountCarousel> {
  Widget buildItem(DocumentSnapshot doc) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
      // crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
        Text('Name:   ${doc.data['offerName']}',
          style: TextStyle(fontSize: 20),
        ),
        Text('Type:   ${doc.data['offerType']}',
          style: TextStyle(fontSize: 20),
        ),
        Text(
          'End Date:${doc.data['end']}',
          style: TextStyle(fontSize: 20),
        ),
        // Text(
        //   'Start Date:${doc.data['start']}',
        //   style: TextStyle(fontSize: 20),
        // ),
      ],
      ),
    );
  }

  final db = Firestore.instance;
  String offer;
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 220.0,
        child: ListView.builder(
          padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          itemCount: 5,
          itemBuilder: (BuildContext context, int posiition) {
            return Padding(
              padding: EdgeInsets.symmetric(horizontal: 5.0),
              child: InkWell(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (BuildContext context) => DiscountClicked(),
                    ),
                  );
                },
                child: Card(
                  child: Container(
                    height: 190.0,
                    width: 300.0,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Stack(
                          children: <Widget>[
                          StreamBuilder<QuerySnapshot>(
                          stream: db
                              .collection('createdoffers')
                              .snapshots(),         
                          builder: (context, snapshot) {
                            if (snapshot.hasData) {
                              return Stack(
                                  children: snapshot.data.documents
                                      .map((doc) => buildItem(doc))
                                      .toList());
                            } else {
                              return SizedBox();
                            }
                          },
                        ),

                          ],
                        )
                      ],
                    ),
                  ),
                ),
              ),
            );
          },
        ));
  }

  void readData() async {
    DocumentSnapshot snapshot =
        await db.collection('createdoffers').document(offer).get();
    print(snapshot.data['name']);
  }
}

来源：https://stackoverflow.com/questions/59624082/created-data-from-firebase-database-keeps-overlapping-on-one-another