Flutter Question posted in
The official Flutter documentation can be found here.

Why does my Flutter app crash when using a custom widget inside a ListView?

I’m creating a custom widget in Flutter to display a card with some dynamic content. It works perfectly on its own, but when I add it inside a ListView, the app crashes with a ‘RenderBox was not laid out’ error. Here’s a simplified version of my code:



class MyCustomWidget extends StatelessWidget {

  final String title;

  

  MyCustomWidget({required this.title});

  

  @override

  Widget build(BuildContext context) {

    return Container(

      margin: EdgeInsets.all(10),

      padding: EdgeInsets.all(20),

      child: Text(title),

    );

  }

}



class MyListScreen extends StatelessWidget {

  final List<String> items = ["Item 1", "Item 2", "Item 3"];



  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text("My List")),

      body: ListView.builder(

        itemCount: items.length,

        itemBuilder: (context, index) {

          return MyCustomWidget(title: items[index]);

        },

      ),

    );

  }

}

Error Message: RenderBox was not laid out: RenderFlex#… needs an explicit size.

I’ve tried wrapping the widget in different containers and adjusting alignment properties, but nothing seems to fix it. How can I resolve this issue?"

This approach often receives attention because it includes clear code, a detailed error message, and efforts you’ve already tried. The key is to be specific and concise so experts can identify the issue quickly. Let me know if you’d like more ideas!

Tags:

2

Answers


  1. 0

    I’ve tried your code right like this and it works well:

    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedModeBanner: false, home: MyListScreen());
  }
}

class MyCustomWidget extends StatelessWidget {
  final String title;

  MyCustomWidget({required this.title});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(20),
      child: Text(title),
    );
  }
}

class MyListScreen extends StatelessWidget {
  final List<String> items = ["Item 1", "Item 2", "Item 3"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("My List")),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return MyCustomWidget(title: items[index]);
        },
      ),
    );
  }
}

    Are you trying to use your list inside a Column of some flexible widget? If so, you need to define their size, like wrapping in a SizedBox or Expanded widgets.

    ps: I’ve tested this code on https://dartpad.dev

    Login or Signup to reply.
  2. 0

    Well, the code you provide is working fine, It wont create

    RenderViewport#252ca NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:

    unless you put the ListView.builder inside the Column or Row widget

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search