Home > Enterprise >  When adding listview builder , the entire screen is goes blank
When adding listview builder , the entire screen is goes blank

Time:03-20

when i try to add list view builder , my entire screen is 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,
                      ),
                    ],
                  );
                },
              ),

what caused this error? if any other code needed please comment

here is full code : https://github.com/Mishalhaneef/unais-academy-ui-repo

here is this page's code

import 'package:flutter/material.dart';
import 'package:unais_academy_ui/homescreen.dart';
import 'package:unais_academy_ui/screen/counstruction page/construction_page.dart';
import 'package:unais_academy_ui/screen/dashboard/widgets/course_bar.dart';
import 'package:unais_academy_ui/screen/homepage/widgets/course_list.dart';
import 'package:unais_academy_ui/constants.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../dashboard/model.dart';
import 'widgets/card_view.dart';

class MainScreen extends StatelessWidget {
  const MainScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    String userName = 'mishal';
    
    return Container(
      decoration: const BoxDecoration(gradient: kHomeColor),
      child: Scaffold(
        drawer: NavigationDrawerWidget(),
        //appBar code
        appBar: PreferredSize(
          preferredSize: const Size.fromHeight(60.0),
          child: Column(
            children: [
              const SizedBox(height: 2),
              AppBar(
                elevation: 0,
                backgroundColor: kMainTheme,
                leading: Builder(builder: (BuildContext context) {
                  return IconButton(
                    icon: SvgPicture.asset(
                      'assets/icons/sidebar.svg',
                      color: Colors.black,
                    ),
                    iconSize: 10,
                    onPressed: () {
                      Scaffold.of(context).openDrawer();
                    },
                    tooltip:
                        MaterialLocalizations.of(context).openAppDrawerTooltip,
                  );
                }),
                actions: [
                  IconButton(
                      onPressed: () {
                        HomeScreen.selectedIndexNotifier.value = 1;
                      },
                      icon: SvgPicture.asset('assets/icons/search.svg')),
                  const SizedBox(width: 10),
                  GestureDetector(
                    onTap: () {
                      HomeScreen.selectedIndexNotifier.value = 3;
                    },
                    child: CircleAvatar(
                      radius: 16.0,
                      child: ClipRRect(
                        child: Image.asset('assets/account.jpg'),
                        borderRadius: BorderRadius.circular(50.0),
                      ),
                    ),
                  ),
                  const SizedBox(width: 20)
                ],
              ),
            ],
          ),
        ),
        backgroundColor: Colors.transparent,
        //body code
        body: ListView(
          children: [
            Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              const SizedBox(height: 37),
              Padding(
                padding: EdgeInsets.only(left: 30, right: 0),
                child: Row(
                  children: [
                    const Text('Helo ',style: headRichText),
                    Text(userName[0].toUpperCase(), style: headRichText),
                    Text(userName.substring(1).toLowerCase(), style: headRichText),
                  ],
                )
              ),
              const Padding(
                padding: EdgeInsets.only(left: 30, right: 0),
                child: Text("Find a course you want to learn",
                    style: secondRichText),
              ),
              // ignore: sized_box_for_whitespace
              CardView(
                backgroundColor: sLinearColorBlue,
                buttonText: 'Join Now!',
                headText: '50% off',
                personImage: 'assets/person_home.png',
                secondText: 'For Any Course!',
              ),

              const SizedBox(height: 18),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Padding(
                    padding: EdgeInsets.only(left: 30),
                    child: Text('Explore Course', style: helperTextStyle),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(right: 15),
                    child: TextButton(
                      // ignore: prefer_const_constructors
                      style: ButtonStyle(
                        padding: MaterialStateProperty.all(EdgeInsets.zero),
                      ),
                      onPressed: () {
                        Navigator.of(context)
                            .pushNamed(ConstructionPage.routeName);
                      },
                      child: const Text(
                        'See All',
                        style: TextStyle(color: Colors.blue),
                      ),
                    ),
                  )
                ],
              ),
              const SizedBox(height: 1),
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: const [
                    SizedBox(width: 30),
                    CourseList(
                      color: kLiteRed,
                      icon: 'assets/youtube.png',
                      caption: 'How To Market Your YouTube Channel',
                      head: 'Marketing',
                      timePeriod: 18,
                      rating: 4.6,
                    ),
                    SizedBox(width: 20),
                    CourseList(
                      color: kLiteRose,
                      icon: 'assets/chart.png',
                      caption: 'Grow Your Channel With this very usefull tips',
                      head: 'Channel Growth',
                      timePeriod: 18,
                      rating: 4.3,
                    ),
                    SizedBox(width: 20),
                    CourseList(
                      color: kLiteGreen,
                      icon: 'assets/diagram.png',
                      caption: 'How to Make Thumbnail Attractive',
                      head: 'Creative',
                      timePeriod: 18,
                      rating: 3.4,
                    ),
                    SizedBox(width: 20),
                    CourseList(
                      color: kLiteRose,
                      icon: 'assets/calender.png',
                      caption: 'Light Your Video Like A Pro',
                      head: 'Creative',
                      timePeriod: 18,
                      rating: 5.0,
                    ),
                    SizedBox(width: 20),
                    CourseList(
                      color: kLiteRed,
                      icon: 'assets/youtube.png',
                      caption: 'How To Market Your YouTube Channel',
                      head: 'Marketing',
                      timePeriod: 18,
                      rating: 3.9,
                    ),
                    SizedBox(width: 20),
                  ],
                ),
              ),
              // Expanded(
              //   child: GridView.count(
              //     childAspectRatio: 3 / 4,
              //     crossAxisCount: 20,
              //     mainAxisSpacing: 34,
              //     crossAxisSpacing: 30,
              //     padding: const EdgeInsets.all(20),
              //     children: List.generate(
              //       courseCardList.length,
              //       (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,
              //         );
              //       },
              //     ),
              //   ),
              // ),
              // ListView.separated(
              //   shrinkWrap: true,
              //   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,
              //     );
              //   },
              //   itemCount: courseCardList.length,
              //   separatorBuilder: (BuildContext context, int index) {
              //     return SizedBox();
              //   },
              // ),
              const SizedBox(height: 14),
              const Padding(
                padding: EdgeInsets.only(left: 50, right: 50),
                child: Divider(height: 1),
              ),
              const SizedBox(height: 10),
              const Padding(
                padding: EdgeInsets.only(left: 30),
                child: Text('Your Course', style: helperTextStyle),
              ),
              const SizedBox(height: 22),
              SingleChildScrollView(
                scrollDirection: Axis.vertical,
                child: ListView.separated(
                  physics: const BouncingScrollPhysics(),
                  shrinkWrap: true,
                  itemBuilder: (BuildContext context, int index) {
                    final data = myCourseBar[index];
                    return CourseBar(
                      icon: data.icon,
                      caption: data.caption,
                      time: data.time,
                      colorTheme: data.colorTheme,
                      duration: data.duration,
                      status: data.status,
                    );
                  },
                  itemCount: myCourseBar.length,
                  separatorBuilder: (BuildContext context, int index) {
                    return const SizedBox(height: 20);
                  },
                ),
              ),
            ])
          ],
        ),
      ),
    );
  }
}

class NavigationDrawerWidget extends StatelessWidget {
  const NavigationDrawerWidget({Key? key}) : super(key: key);
  final padding = const EdgeInsets.symmetric(horizontal: 20);

  @override
  Widget build(BuildContext context) {
    const name = 'Mishal Haneef';
    const email = '[email protected]';
    const urlImage = 'assets/account.jpg';
    // ignore: prefer_const_constructors
    return Drawer(
      // ignore: prefer_const_constructors
      child: Material(
        color: kDeepBlueTheme,
        child: ListView(
          padding: padding,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                  color: kDeepBlueTheme.withGreen(130),
                  borderRadius: const BorderRadius.only(
                      bottomLeft: Radius.circular(30),
                      bottomRight: Radius.circular(30))),
              child: buildHeader(
                urlImage: urlImage,
                name: name,
                email: email,
                onClicked: () => null,
              ),
            ),
            const SizedBox(height: 48),
            buildMenuItem(
              text: 'Account',
              icon: Icons.people,
            ),
            const SizedBox(height: 16),
            buildMenuItem(
              text: 'Dash Board',
              icon: Icons.dashboard,
            ),
            const SizedBox(height: 16),
            buildMenuItem(
              text: 'Explore',
              icon: Icons.explore,
            ),
            const SizedBox(height: 16),
            buildMenuItem(
              text: 'Wishlist',
              icon: Icons.info,
            ),
            const SizedBox(height: 16),
            const SizedBox(height: 24),
            const Divider(color: Colors.white70),
            const SizedBox(height: 24),
            buildMenuItem(
              text: 'Terms &',
              icon: Icons.info,
            ),
            const SizedBox(height: 16),
            buildMenuItem(
              text: 'Logout',
              icon: Icons.logout,
            ),
          ],
        ),
      ),
    );
  }

  Widget buildMenuItem({
    required String text,
    required IconData icon,
    VoidCallback? onClicked,
  }) {
    return ListTile(
      leading: Icon(
        icon,
        color: Colors.white,
      ),
      title: Text(
        text,
        style: const TextStyle(color: Colors.white),
      ),
      onTap: () {},
    );
  }

  Widget buildHeader({
    required String urlImage,
    required String name,
    required String email,
    required VoidCallback onClicked,
  }) {
    return Padding(
      padding: const EdgeInsets.only(top: 40, right: 10, left: 10),
      child: InkWell(
        borderRadius: BorderRadius.circular(30),
        onTap: onClicked,
        child: Container(
          padding: const EdgeInsets.only(top: 10, bottom: 10),
          child: Row(
            children: [
              CircleAvatar(
                radius: 20,
                backgroundImage: AssetImage(urlImage),
              ),
              const SizedBox(width: 20),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    name,
                    style: const TextStyle(fontSize: 20, color: Colors.white),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    email,
                    style: const TextStyle(fontSize: 14, color: Colors.white),
                  )
                ],
              ),
              const Spacer(),
            ],
          ),
        ),
      ),
    );
  }
}


this is main page code if you need full course i already given before this code

CodePudding user response:

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,
                  );
            },
          ),

CodePudding user response:

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,
                          ),
                        ],
                      );
                    },
                  ),
                );

CodePudding user response:

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

CodePudding user response:

ListView.builder(
            shrinkWrap = true,
            itemCount = 10,
            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,
                  ),
                ],
              );
            },
          ),

missing itemCont= and isn't fixed this then use Expanded Widget in parent of ListView.builder

Expanded(
child: ListView.builder(......)
) 

CodePudding user response:

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)
    .....
    .....
  )
) 

  • Related