this is my program but it shows error gridview.builder is not scroll so it shows error
in this gridview it is not working properly it shows error
GridView.builder(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: 4,
itemBuilder: (BuildContext context, int index){
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Stack(overflow: Overflow.visible,
alignment: Alignment.center,
children: [
Container(
height: 200.0,
width:170.0,
padding: EdgeInsets.only(bottom: 24.0),
decoration: BoxDecoration(
color: kLightGreyColor,
borderRadius: BorderRadius.circular(32.0),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children:[
Text("Name", style: TextStyle(fontSize: 16.0,
fontWeight: FontWeight.w600,
color: klightFontColor), ),
SizedBox(height: 12.0,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children:
List.generate(5, (index) => Image.asset("assets/images/star.png", height: 20.0,))
),
SizedBox(height: 12.0,),
Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
"60 \nMin",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: klightFontColor,
),
),
Column(
children:List.generate(6, (index) => Container(
height: 2.0,
width: 2.0,
margin: EdgeInsets.only(bottom: 2),
decoration: BoxDecoration(
color: kDarkGreyColor,
borderRadius: BorderRadius.circular(2.0),
),
))
),
Text(
"Hard \nLV1",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: klightFontColor,
),
)
]),
]),
),
Positioned(
top: -190.0,
bottom: 0.0,
left: 20.0,
right: 20.0,
child:Container(
height: 80,
width:80,
child:Image.asset("assets/images/food1.png",),
)
),
]),
);
}),
I used the `singleChildscrollview()`, and `physics: ScrollPhysics(),` but still same error
just remove the shrinkWrap or set it to false and delete the SingleChildScrollView if you want the GridView to take All the space available wrap it in an Expanded Widget
Related
//ListView Builder
Container(
height: 230,
margin: const EdgeInsets.only(bottom: 30),
child: ListView.separated(
physics: const BouncingScrollPhysics(),
scrollDirection: Axis.horizontal,
itemCount: controller.homeData!.bestSaleWebinars.length,
itemBuilder: (context, index) => InkWell(
onTap: () {
Get.toNamed(RoutesName.allCoursesPageDetails);
allCoursesController.getAllCourseDetails(
controller.homeData!.bestSaleWebinars[index].slug);
},
child: newCoursesBuilder(
controller.homeData!.bestSaleWebinars[index])),
separatorBuilder: (context, _) => const SizedBox(width: 15),
),
//widget
Widget newCoursesBuilder(var coursesCategories) {
return SizedBox(
height: 350,
width: 200,
child: Padding(
padding: const EdgeInsets.only(left: 4.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 100,
width: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.grey)),
child: CachedNetworkImage(
imageUrl: "https://livedivine.in${coursesCategories.thumbnail}",
placeholder: (context, url) => Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
Images.logo,
),
fit: BoxFit.fill),
),
),
errorWidget: (context, url, error) => Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
Images.logo,
),
fit: BoxFit.fill),
),
),
),
),
Container(
padding: const EdgeInsets.only(left: 11, top: 8),
child: Text(
coursesCategories.title,
style: TextStyle(
color: ColorConst.buttonColor,
fontSize: 15,
fontWeight: FontWeight.w900),
),
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
const Icon(
Icons.person,
size: 16,
),
Padding(
padding: const EdgeInsets.only(left: 4.0),
child: Text(
coursesCategories.teacher.fullName,
style: const TextStyle(
color: Colors.black,
fontSize: 12,
fontWeight: FontWeight.w500),
),
)
],
),
Row(
children: [
const Icon(
Icons.calendar_month,
size: 16,
),
Padding(
padding: const EdgeInsets.only(left: 4.0),
child: Text(
"${coursesCategories.duration}",
style: const TextStyle(
color: Colors.black,
fontSize: 12,
fontWeight: FontWeight.w500),
),
)
],
)
],
),
),
const SizedBox(
height: 2,
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
coursesCategories.price.toString(),
style: TextStyle(
color: ColorConst.buttonColor,
fontSize: 20,
fontWeight: FontWeight.w800),
),
Text(
"${coursesCategories.status}"
.replaceFirst("Status.", "")
.toLowerCase(),
style: TextStyle(
color: ColorConst.buttonColor,
fontSize: 19,
fontWeight: FontWeight.w800),
)
],
),
)
],
),
),
);
}
You can wrap the List view builder in an IntrinsicHeight widget, so the height of the ListView builder will be dynamic
You can try using SingleChildScrollView
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: List.generate(
44,
(index) => Padding(
padding: EdgeInsets.only(right: 10),
child: Container(
...
),
),
)),
)
**> Here is my code. it contains a ListView builder which is wrapped with
RawScrollBar widget and they both wrapped with SingleChildScrollView
Widget. I want a show ScrollBar in ListView.Builder**
Scaffold(
backgroundColor: kPrimaryColor,
body: SafeArea(
child: SizedBox(
height: kGetSize(context).height,
child: Column(
children: [
const SizedBox(
height: 16,
),
const Center(
child: UserLevelDetailsContainer(),
),
Expanded(
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 24, vertical: 24),
**child: SingleChildScrollView(
physics: const ScrollPhysics(),
controller: _scrollController,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'General Subjects',
style: GoogleFonts.openSans(
fontWeight: FontWeight.w700,
fontSize: 20,
color: const Color(0xfff3c304)),
),
const SizedBox(
height: 8,
),
RawScrollbar(
thumbVisibility: true,
interactive: true,
thumbColor: Colors.black,
controller: _scrollController,
radius: const Radius.circular(60),
thickness: 6,
child: ListView.builder(
controller: _scrollController,
physics: const NeverScrollableScrollPhysics(),
itemCount: SubjectDetail.listOfSubjects.length,
shrinkWrap: true,
itemBuilder: (context, index) {
return SizedBox(
width: 344,
height: 96,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: ListTile(
contentPadding: const EdgeInsets.symmetric(
horizontal: 24, vertical: 8),
title: Padding(
padding: const EdgeInsets.only(bottom: 4),
child: Text(
SubjectDetail
.listOfSubjects[index].name,
style: GoogleFonts.openSans(
fontWeight: FontWeight.w700,
fontSize: 15),
),
),
subtitle: Text(
SubjectDetail
.listOfSubjects[index].description,
style: GoogleFonts.openSans(
fontWeight: FontWeight.w400,
fontSize: 10),
),
trailing: Image.asset(SubjectDetail
.listOfSubjects[index].imageUrl),
),
),
);
},
),
),**
const SizedBox(
height: 8,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'General Subjects',
style: GoogleFonts.openSans(
fontWeight: FontWeight.w700,
fontSize: 20,
color: const Color(0xfff3c304)),
),
Text(
'*select one subject',
style: GoogleFonts.openSans(
fontWeight: FontWeight.w300,
fontSize: 14,
color: const Color(0xfff3c304)),
)
],
),
],
),
),
),
)
],
),
),
),
);
I have given same ScrollController object to ListView builder,
RawScrollBar and SingleChildScollView widget.Altough I had given
different ScrollController objects to them
i have a error when i don't give to the container a height, it's give me this error :
======== Exception caught by rendering library ===================================================== The following _CastError was thrown during paint(): Null check operator used on a null value
so that why i gihe hime height :200 but its static height me i want to give to the container a size of listview inside him.
container code :
Container(
// height:200,
alignment: Alignment.topLeft,
decoration: const BoxDecoration(
border: Border(
// top: BorderSide(color: Colors.black12),
bottom: BorderSide(color: Colors.black12),
)),
padding: const EdgeInsets.fromLTRB(10, 5, 0, 20),
child: Column(
children: <Widget>[
Container(width: 22, color: colors),
Expanded(
child: ListView.builder(
padding: const EdgeInsets.symmetric(vertical: 8.0),
itemCount: reposReplay?.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
ListTile(
title: Column(children: [
Padding(
padding:
const EdgeInsets.fromLTRB(0, 0, 0, 10),
child: Row(
children: [
Expanded(
child: Text("${reposReplay?[index].by}",
textAlign: TextAlign.start,
style: const TextStyle(
fontSize: 14,
color: Colors.deepOrangeAccent,
fontWeight: FontWeight.bold)),
),
Expanded(
child: Text(time,
textAlign: TextAlign.end,
style: const TextStyle(
fontSize: 14,
color: Colors.deepOrangeAccent,
fontWeight: FontWeight.bold)),
),
],
),
),
]),
subtitle: Text("${reposReplay?[index].text!.replaceAll("'", "'").replaceAll(">", ">").replaceAll(""", "\"").replaceAll("/", "/").replaceAll("<p>", "\n").replaceAll(">."", ">.").replaceAll(exp, "")}",
textAlign: TextAlign.justify,
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.normal, color: Colors.black)),
),
const Divider(
height: 2.0,
),
],
);
}),
)
],
)
),
Use the following inside listview.builder:
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
i am new in flutter and firebase integration. i am trying to build mobile app that connect to firestore.
i am trying to use paginate firestore in my mobile app. But i got error message that said "A RenderShrinkWrappingViewport expected a child of type RenderSliver but received a child of type RenderFlex."
this is my code
Widget build(BuildContext context) {
return Container(
child: StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance
.collection('vendors')
.orderBy('shopName').snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapShot) {
if (snapShot.data == null) return CircularProgressIndicator();
if(snapShot.hasData){
print("error");
}
return Padding(
padding: EdgeInsets.all(8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RefreshIndicator(
child: PaginateFirestore(
bottomLoader: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(
Theme.of(context).primaryColor),
),
header: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding:
const EdgeInsets.only(left: 8, right: 8, top: 20),
child: Text(
'All Nearby Stores',
style: TextStyle(
fontWeight: FontWeight.w900, fontSize: 18),
),
),
Padding(
padding:
const EdgeInsets.only(left: 8, right: 8, top: 20),
child: Text(
'Find quality products near you',
style: TextStyle(
fontWeight: FontWeight.w900,
fontSize: 12,
color: Colors.grey),
),
),
],
),
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilderType: PaginateBuilderType.listView,
itemBuilder: (index, context, document) => Padding(
padding: const EdgeInsets.all(4),
child: Container(
width: MediaQuery.of(context).size.width,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
width: 120,
height: 100,
child: Card(
child: ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Image.network(
document['imageUrl'],
fit: BoxFit.fill,
),
),
),
),
SizedBox(
width: 10,
),
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 35,
child: Text(
document['shopName'],
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
SizedBox(
height: 3,
),
Container(
width:
MediaQuery.of(context).size.width - 250,
child: Text(
document['location'],
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold),
)),
SizedBox(
height: 3,
),
Row(
children: [
Icon(
Icons.star,
size: 12,
color: Colors.grey,
),
SizedBox(
width: 4,
),
Text(
'3.2',
style: TextStyle(
fontSize: 10,
),
)
],
)
],
)
],
),
),
),
query: FirebaseFirestore.instance
.collection('vendors')
.orderBy('shopName'),
listeners: [
refreshChangeListener,
],
footer: Padding(
padding: const EdgeInsets.only(top: 30),
child: Container(
child: Stack(
children: [
Center(
child: Text(
"that's al folks",
style: TextStyle(color: Colors.grey),
),
),
Image.asset(
"image/city.png",
),
Positioned(
right: 10,
top: 80,
child: Container(
width: 100,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Made By : ',
style: TextStyle(color: Colors.black),
),
Text(
"IZZILLY TEAM",
style: TextStyle(
fontWeight: FontWeight.bold,
letterSpacing: 2,
color: Colors.grey),
)
],
),
))
],
),
),
),
),
onRefresh: ()async{
refreshChangeListener.refreshed = true;
},
)
],
),
);
},
),
);
}
does anyone know how to solve this error?
thank you
According to related issues, something that your code should do is to wrap the header and footer widgets (and other box type widgets) inside a SliverToBoxAdapter. You can refer to this other question and this Github issue to see sample code which resemble yours. Wrapping your header, for example, would look like this according to the related question:
header: SliverToBoxAdapter(
child: Column(
...
),
),
You should also attach logs and error details in your question like those present in the github issue and related question I linked. It would shine more light into the details leading to the error.
I'm having an issue aligning a Row at the end of a card within a ListView.Builder. When I apply a
mainAxisAlignment: MainAxisAlignment.end it doesn't go to right side of the card like I want. The distance right it goes varies on how long the data before it is. What Am I doing wrong? Any advice is welcome! Thanks!
This is what it looks like. I want the dollar amounts to be all the way to the right.
Here is the code for the ListView.Builder
return ListView.builder(
itemCount: transaction.length,
shrinkWrap: true,
itemBuilder: (context, index) {
return Padding(
padding: EdgeInsets.symmetric(vertical: 1.0, horizontal: 4.0),
child: Card(
color: (index % 2 == 0) ? greycolor : Colors.white,
child: Container(
height: 60,
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.only(left: 5, top: 13),
child: AutoSizeText(transaction[index].date,
maxLines: 1,
style: TextStyle(
fontSize: 14, color: Colors.black),
textAlign: TextAlign.left),
),
],
),),
Flexible(
flex: 3,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top: 13, left: 10),
child: AutoSizeText(transaction[index].tester,
maxLines: 1,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontFamily: 'Montserrat'),)
),
Padding(
padding: EdgeInsets.only(left: 10),
child:
AutoSizeText(
'${transaction[index].test}',
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black,
fontStyle: FontStyle.italic),
),
),
],
),),
Flexible(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding:
EdgeInsets.only(top: 13),
child: Container(
child: Text(
'\$${transaction[index].amount}',
style: TextStyle(
fontSize: 16,
color: Colors.black),
textAlign: TextAlign.right),
),
),
],
),)
],
)),
),
);
},
);
just replace Flexible with Expanded
Flexible takes only the needed space, and Expanded takes all available space
see this To clarify more
I hope this is helpful