CODEWITHSUNDEEP
flutterdart
mishalhaneef
mishalhaneef

Reputation: 852

When adding ListView builder , the entire screen is goes blank

when I try to add a list view builder, my entire screen goes black here is the list view builder code

ListView.builder(
                shrinkWrap = true,
                scrollDirection: Axis.horizontal,
                itemBuilder: (BuildContext context, int index) {
                  final data = courseCardList[index];
                  return Row(
                    children: [
                      CourseList(
                        color: data.color,
                        icon: data.icon,
                        caption: data.caption,
                        head: data.head,
                        timePeriod: data.timePeriod,
                        rating: data.rating,
                      ),
                    ],
                  );
                },
              ),

when I build the UI, that shows a blank screen, what mistake am I making here?

Upvotes: 3

Views: 1894

Answers (4)

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14775

I think you forgot the itemCount

Expanded(
     child:ListView.builder(
            shrinkWrap = true,
            itemCount = 5,// add this line or put courseCardList.length
            scrollDirection: Axis.horizontal,
            itemBuilder: (BuildContext context, int index) {
              final data = courseCardList[index];
              return Row(
                children: [
                  CourseList(
                    color: data.color,
                    icon: data.icon,
                    caption: data.caption,
                    head: data.head,
                    timePeriod: data.timePeriod,
                    rating: data.rating,
                  ),
                ],
              );
            },
          ),
      ),

Refer ListView and Long List

Upvotes: 0

Babul
Babul

Reputation: 1224

Horizontal Listview.builder needs a fixed height. Horizontal list item shouldn't have a endless height. so solution came to my mind just wrap Listview.builder with a conatiner and set height of that container like below.

The Flutter framework can only know the height of a widget once it's been built.

If you're building ListView children dynamically, it can't calculate the required height of the ListView until all it's children have been built, which might never happen (infinite ListView).

You can either give the ListView a fixed height and build its children dynamically or have the ListView's height depend on it's children.

Container(
                  height: 200,
                  child: ListView.builder(
                    shrinkWrap = true,
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (BuildContext context, int index) {
                      final data = courseCardList[index];
                      return Row(
                        children: [
                          CourseList(
                            color: data.color,
                            icon: data.icon,
                            caption: data.caption,
                            head: data.head,
                            timePeriod: data.timePeriod,
                            rating: data.rating,
                          ),
                        ],
                      );
                    },
                  ),
                );

Upvotes: 1

Vicky Salunkhe
Vicky Salunkhe

Reputation: 10975

Under ListView Widget

  1. use shrinkWrap: true
  2. add itemCount, itemCount: courseCardList.length

If it still doesn't solve the issue,

Remove the Row() widget as I can see you are only returning a single widget under it, so directly return that widget CourseList()

The code should look something like this.

ListView.builder(
            shrinkWrap : true,
            itemCount: courseCardList.length,
            scrollDirection: Axis.horizontal,
            itemBuilder: (BuildContext context, int index) {
              final data = courseCardList[index];
              return CourseList(
                      color: data.color,
                      icon: data.icon,
                      caption: data.caption,
                      head: data.head,
                      timePeriod: data.timePeriod,
                      rating: data.rating,
                  );
            },
          ),

Upvotes: 1

K_Chandio
K_Chandio

Reputation: 777

provide itemCount to your ListviewBuilder and also wrap it with Expanded or some fixed size widget like container like:

Expanded(
child: ListView.builder(
    itemCount: your counts(int)
    .....
    .....
  )
)

Upvotes: -1

Related Questions