Flutter ListView Not Displaying Items When Wrapped Without A Sized Box

March 28, 2022

I have implemented a Card containing a Stream-Builder that has a List-View which displays items.(Items are present and display is okay). However the Card won’t display items unless I wrap it within a Sized-Box with specific height. Fixed height isn’t ideal as I want the text to wrap content since I can’t tell what the length of the dynamic text will be. Without the sized-box with fixed height items just don’t appear at all.

Have tried wrapping the Card with Flexible, Wrap, Column and Row but in all these items just won’t display. How can I fix this?

        Card(
            child: StreamBuilder(
              stream: _midref.onValue,
              builder: (context, AsyncSnapshot snapshot) {
                if (snapshot.hasData &&
                    !snapshot.hasError &&
                    snapshot.data.snapshot.value != null) {
                  midlists.clear();

                  DataSnapshot dataValues = snapshot.data.snapshot;
                  Map<dynamic, dynamic> values =
                  dataValues.value as Map;
                  values.forEach((key, values) {
                    midlists.add(values);
                  });

                  return ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: midlists.length,
                    itemBuilder: (BuildContext context, int index) {
                      return Card(
                        margin: EdgeInsets.fromLTRB(2, 2, 2, 2),
                        elevation: 20,
                        child: Text(
                          midlists[index]["name"].toUpperCase(),
                          textAlign: TextAlign.center,
                          style: TextStyle(fontSize: 13),
                        ),
                      );
                    },
                  );
                }

                return Container();
              },
            ),
          ),

Parent Container. This Container is wrapped inside a Single Child ScrollView

                         Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.stretch,
                                children: [
                                
                                  ]),

>Solution :

wrap your card With Expanded like:

 Expanded(child:  Card(
        child: StreamBuilder(
          stream: _midref.onValue,
          builder: (context, AsyncSnapshot snapshot) {
            if (snapshot.hasData &&
                !snapshot.hasError &&
                snapshot.data.snapshot.value != null) {
              midlists.clear();

              DataSnapshot dataValues = snapshot.data.snapshot;
              Map<dynamic, dynamic> values =
              dataValues.value as Map;
              values.forEach((key, values) {
                midlists.add(values);
              });

              return ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: midlists.length,
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    margin: EdgeInsets.fromLTRB(2, 2, 2, 2),
                    elevation: 20,
                    child: Text(
                      midlists[index]["name"].toUpperCase(),
                      textAlign: TextAlign.center,
                      style: TextStyle(fontSize: 13),
                    ),
                  );
                },
              );
            }

            return Container();
          },
        ),
      ));