RenderBox was not laid out error in flutter - flutter

Question

Im working on flutter where fetching data from api. I want to show shimmer loader while data is loading but its giving "Another exception was thrown: RenderBox was not laid out: RenderFlex#c8a3f relayoutBoundary=up2 NEEDS-PAINT". Please find the below code for your reference and help to resolve.
Thanks in advance
class HomepageSectionView extends StatelessWidget {
const HomepageSectionView({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Consumer<HomepageSectionProvider>(
builder: (context, homepageSectionProvider, child) {
return homepageSectionProvider.homepageSectionList.isNotEmpty
? ListView.builder(
itemCount: homepageSectionProvider.homepageSectionList.length,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (ctx, index) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(
Dimensions.PADDING_SIZE_SMALL,
20,
Dimensions.PADDING_SIZE_SMALL,
Dimensions.PADDING_SIZE_SMALL),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
homepageSectionProvider
.homepageSectionList[index].title
.toString(),
style: amberSemibold,
),
],
),
),
ConstrainedBox(
constraints: homepageSectionProvider
.homepageSectionList[index]
.subSections!
.isNotEmpty
? const BoxConstraints(maxHeight: 150)
: const BoxConstraints(maxHeight: 0),
child: ListView.builder(
itemCount: homepageSectionProvider
.homepageSectionList[index]
.subSections!
.length >
10
? 10
: homepageSectionProvider
.homepageSectionList[index]
.subSections!
.length,
padding: const EdgeInsets.all(0),
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (BuildContext context, int i) {
return InkWell(
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) =>
ProductListByHomepageSection(
sectionId: homepageSectionProvider
.homepageSectionList[index]
.subSections![i]
.id
.toString(),
sectionTitle:
homepageSectionProvider
.homepageSectionList[index]
.subSections![i]
.title
.toString(),
)));
},
child: SizedBox(
width: (MediaQuery.of(context).size.width /
1.5) -
5,
child: Card(
child: SizedBox(
width: 300,
height: 100,
child: Stack(children: [
Container(
alignment: Alignment.center,
margin: const EdgeInsets.all(5),
child: FadeInImage.assetNetwork(
placeholder: Images.placeholder,
image: homepageSectionProvider
.homepageSectionList[index]
.subSections![i]
.banner,
fit: BoxFit.cover,
)),
Container(
alignment: Alignment.center,
child: SizedBox(
height: 70,
width: 120,
child: DecoratedBox(
decoration: BoxDecoration(
borderRadius:
const BorderRadius.all(
Radius.circular(5)),
color: const Color.fromARGB(
232, 115, 22, 1)
.withOpacity(0.5)),
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Text(
homepageSectionProvider
.homepageSectionList[
index]
.subSections![i]
.title,
style: const TextStyle(
fontSize: 18,
fontWeight:
FontWeight.bold,
color: Colors.white),
),
Text(
homepageSectionProvider
.homepageSectionList[
index]
.subSections![i]
.bannerText!,
style: const TextStyle(
fontSize: 14,
fontWeight:
FontWeight.bold,
color:
Colors.blueAccent),
),
],
),
),
),
)
]),
),
),
),
);
}),
)
],
);
})
: HomepageSectionShimmer(isHomeScreen: true);
},
);
}
}
class HomepageSectionShimmer extends StatelessWidget {
final bool isHomeScreen;
const HomepageSectionShimmer({Key? key, required this.isHomeScreen})
: super(key: key);
#override
Widget build(BuildContext context) {
return ListView.builder(
shrinkWrap: true,
scrollDirection: isHomeScreen ? Axis.horizontal : Axis.vertical,
itemCount: 2,
itemBuilder: (context, index) {
return Container(
margin: const EdgeInsets.all(5),
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: ColorResources.WHITE,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 1,
blurRadius: 5)
]),
child: Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
enabled: Provider.of<HomepageSectionProvider>(context)
.homepageSectionList
.isEmpty,
child:
Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
Expanded(
flex: 4,
child: Container(
padding: const EdgeInsets.all(Dimensions.PADDING_SIZE_LARGE),
decoration: const BoxDecoration(
color: ColorResources.ICON_BG,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
bottomLeft: Radius.circular(10)),
),
),
),
Expanded(
flex: 6,
child: Padding(
padding: const EdgeInsets.all(Dimensions.PADDING_SIZE_SMALL),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(height: 20, color: ColorResources.WHITE),
const SizedBox(
height: Dimensions.PADDING_SIZE_EXTRA_SMALL),
Row(children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 20,
width: 50,
color: ColorResources.WHITE),
]),
),
Container(
height: 10,
width: 50,
color: ColorResources.WHITE),
const Icon(Icons.star,
color: Colors.orange, size: 15),
]),
]),
),
),
]),
),
);
},
);
}
}

Answer 1

Try wrapping your listview into Expanded() widget which will allow to take all available space