CODEWITHSUNDEEP
flutterdart
Alex Ali
Alex Ali

Reputation: 1369

RenderBox was not laid out: RenderCustomPaint Flutter

I keep getting this error when I try to run the app :

════════ Exception caught by rendering library ═════════════════════════════════ RenderBox was not laid out: RenderCustomPaint#534a9 relayoutBoundary=up16 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': box.dart:1 Failed assertion: line 1966 pos 12: 'hasSize'

The relevant error-causing widget was ListView account_screen.dart:32 ════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════ RenderBox was not laid out: RenderRepaintBoundary#d2a6e relayoutBoundary=up15 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': box.dart:1 Failed assertion: line 1966 pos 12: 'hasSize'

The relevant error-causing widget was Column account_screen.dart:19 ════════════════════════════════════════════════════════════════════════════════

here is my code:

body: SingleChildScrollView(
      child: Column(
        children: [
          StreamBuilder(
              stream:
                  FirebaseFirestore.instance.collection('Ads').snapshots(),
              builder: (BuildContext context,
                  AsyncSnapshot<QuerySnapshot> snapshot) {
                if (!snapshot.hasData) {
                  return const Center(
                    child: CircularProgressIndicator(),
                  );
                }

                return ListView(
                    children: snapshot.data!.docs.map((document) {
                  return Card(
                    child: ListTile(
                      leading: Image.asset('assets/images/facebook.png'),
                      title: Text(document['Title']),
                      subtitle: Text(document['Description']),
                      trailing: const Icon(Icons.car_crash),
                    ),
                  );
                }).toList());
              })
        ],
      ),
    ),

Upvotes: 0

Views: 119

Answers (1)

Kantine
Kantine

Reputation: 771

By default, ListView tries to use all the available space but this space is infinite, which leads to the error. You can use shrinkWrap property to make the ListView using only the space needed by its children :

return ListView(
  shrinkWrap: true, // Add this
  children: snapshot.data!.docs.map((document) {
  ...
  }
).toList());

More about shrinkWrap here: https://api.flutter.dev/flutter/widgets/ScrollView/shrinkWrap.html

and here https://stackoverflow.com/a/54008230/11244991

Upvotes: 2

Related Questions