Issue
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%20page/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 = 'msldroidofficial@gmail.com';
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
Solution
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,
),
],
);
},
),
);
Answered By – Babul
Answer Checked By – Pedro (FlutterFixes Volunteer)