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

CodePudding user response：

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