Error "RenderIndexedSemantics object was given an infinite size during layout."

The height in GestureDetector is showing infinity, and the code is

return GestureDetector(
 
  onTap: () {
   
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) {
        return Text('Detail page');
      },
    ),
   );
  },
  
  child: buildRecipeCard(Recipe.samples[index]),
);

So, how can I restrain the heighterror 2
?

Hi @p4nd4v could you please let us know which chapter you are working on?

The warning RenderIndexedSemantics object was given an infinite size during layout means the rendering library can’t determine the size of the object during layout.

In this case you have an unbounded height.

Within your buildRecipeCard,
You may need to wrap a SizedBox or Container widget and specify a height.

Please share your buildRecipeCard implementation so we can help more!

1 Like

I am on chapter 2, here is the complete code for RecipeCard:

class RecipeDetail extends StatefulWidget {
  final Recipe recipe;

  const RecipeDetail({
    Key? key,
    required this.recipe,
}) : super(key:key);

  @override
  _RecipeDetailState createState(){
    return _RecipeDetailState();
  }
}

class _RecipeDetailState extends State<RecipeDetail> {
  int _sliderVal = 1;

  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.recipe.label),
      ),
      body: SafeArea(
        child: Column(
          children: <Widget>[
            SizedBox(
              height: 300,
              width: double.infinity,
              child: Image(
              image: AssetImage(widget.recipe.imageUrl),
              ),
            ),
            const SizedBox(
              height: 4,
            ),
            Text(
              widget.recipe.label,
              style: const TextStyle(fontSize: 18),
            ),
            Expanded(
              child: ListView.builder(
                padding: const EdgeInsets.all(7.0),
                itemCount: widget.recipe.ingredients.length,
                itemBuilder: (BuildContext context, int index) {
                  final ingredient = widget.recipe.ingredients[index];

                  return Text(
                    '${ingredient.quantity*_sliderVal}'
                        '${ingredient.measure}'
                        '${ingredient.name}'
                  );
                }
              ),
            ),
            Slider(
              min: 1,
              max: 10,
              divisions: 10,
              label: '${_sliderVal*widget.recipe.servings} servings',
              value: _sliderVal.toDouble(),
              onChanged: (newValue){
                setState(() {
                  _sliderVal = newValue.round();
                });
              },
              activeColor: Colors.green,
              inactiveColor: Colors.black,
            ),
          ],
        ),
      ),
    );
  }
}

Can you show your buildRecipeCard method?
Another option is to open chapter 2’s final project to compare what you did differently.

Chapter 2’s final code helped me.
Thanks a lot.

1 Like