I am trying to make a widget tree consisting of a grid tile inside a List View. The child is a container (with Image Carousel Slider ) and footer is a container (with a ListTile as its child). I am getting the following error with a blank screen

======== Exception caught by rendering library ===================================================== The following assertion was thrown during performLayout(): 'package:flutter/src/rendering/stack.dart': Failed assertion: line 570 pos 12: 'size.isFinite': is not true.

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause. In either case, please report this assertion by filing a bug on GitHub: https://github.com/flutter/flutter/issues/new?template=2_bug.md

The relevant error-causing widget was: GridTile GridTile:file:///D:/e_shoppie/lib/pages/item_details.dart:54:11

My Code is-

body: ListView(
        scrollDirection: Axis.vertical,
        children: [
          GridTile(
            footer: Container(
              color: Colors.black12,
              child: ListTile(
                leading: Text(
                  widget.productName ?? 'Product Name',
                  style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.w700,
                  ),
                  textAlign: TextAlign.start,
                ),
              ),
            ),
            child: Container(
              color: Colors.white10,
              child: CarouselSlider.builder(
                itemCount: carousel_image_list.length,
                itemBuilder: (context, index, realIndex) {
                  final imageAdd = carousel_image_list[index];
                  return buildImage(imageAdd, index);
                },
                options: CarouselOptions(
                  onPageChanged: (index, reason) {
                    setState(() {
                      activeIndex = index;
                    });
                  },
                  initialPage: 0,
                  height: 200,
                  autoPlay: true,
                  enlargeCenterPage: true,
                  enableInfiniteScroll: false,
                  enlargeStrategy: CenterPageEnlargeStrategy.height,
                  viewportFraction: 0.8,
                  pauseAutoPlayOnTouch: true,
                  pauseAutoPlayOnManualNavigate: true,
                  autoPlayCurve: Curves.fastOutSlowIn,
                  autoPlayInterval: Duration(seconds: 3),
                ),
              ),
            ),
          ),
        ],
      ),

CodePudding user response：

You can provide height on GridTile to solve this issue.

scrollDirection: Axis.vertical,
children: [
SizedBox(
  height: 200, // based on your need
  child: GridTile(
    footer: Container(

Better using LayoutBuilder

return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) => ListView(
  scrollDirection: Axis.vertical,
  children: [
    SizedBox(
      height: constraints.maxHeight * .6, //getting 60% height of body
      child: GridTile(
        footer: Container(