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
- use
shrinkWrap: true - 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,
),
],
);
},
),
),
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)
.....
.....
)
)