Flutter RenderBox was not laid out

Question

So I'm trying to make a simple app where I have transactions. And I'm trying to show them on column. When I was developing without debugging it didn't gave me any error. But when I tried to debug, it gave me these errors. I checked the other questions and answers on Stackoverflow and tried them but none of them worked.

This is the error

════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderFlex#f47be relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
Scaffold
lib\main.dart:32
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPhysicalShape#d73e6 relayoutBoundary=up8
...........

and so goes on.

And this is my code main.dart

import 'package:flutter/material.dart';

import 'custom_text.dart';
import 'transaction_model.dart';
import 'transaction.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Expense App',
      theme: ThemeData(primaryColor: Colors.indigo.shade400),
      darkTheme: ThemeData.dark(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<TransactionModel> transactionItems = [
    TransactionModel(1, "M1 Macbook Pro", 1299, DateTime.now()),
    TransactionModel(2, "Rampage SMR-X 17", 15.75, DateTime.now()),
    TransactionModel(3, "Xiaomi Redmi Note 8 Pro", 299.99,
        DateTime.fromMicrosecondsSinceEpoch(DateTime.now().millisecond + 20000))
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("Expense App")),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
                width: double.infinity,
                height: 128,
                child: Card(
                  color: Colors.indigo.shade300,
                  child: CustomText("Chart", EdgeInsets.all(8), Colors.white,
                      24, FontWeight.bold),
                  elevation: 8,
                )),
            Container(
              margin: EdgeInsets.fromLTRB(0, 8, 0, 0),
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: transactionItems.map((item) {
                    return Transaction(item);
                  }).toList()),
            )
          ],
        ));
  }
}

This is transaction.dart

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

import 'custom_text.dart';
import 'transaction_model.dart';

class Transaction extends StatelessWidget {
  final TransactionModel item;

  Transaction(this.item);

  final DateFormat dateFormat = DateFormat("MMMM d yyyy");

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(4),
      width: double.infinity,
      child: Card(
        elevation: 8,
        shadowColor: Colors.indigo.shade200.withOpacity(0.6),
        color: Colors.grey.shade100,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
                width: 64,
                height: double.infinity,
                alignment: Alignment.center,
                margin: EdgeInsets.all(8),
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.indigo.shade900, width: 1),
                    borderRadius: BorderRadius.all(Radius.circular(4))),
                child: CustomText(item.amount.toString(), EdgeInsets.all(4),
                    Colors.indigo.shade900, 16, FontWeight.normal)),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                CustomText(
                    item.title.toString(),
                    EdgeInsets.fromLTRB(4, 8, 4, 4),
                    Colors.indigo.shade400,
                    16,
                    FontWeight.bold),
                CustomText(
                    dateFormat.format(item.date),
                    EdgeInsets.fromLTRB(4, 8, 4, 4),
                    Colors.indigo.shade500,
                    16,
                    FontWeight.w400),
              ],
            )
          ],
        ),
      ),
    );
  }
}

App Screenshot

Thank you for helping!

It will be helpful if you include `TransactionModel`. – Md. Yeasin Sheikh Sep 11 '21 at 10:06 — Md. Yeasin Sheikh, Sep 11 '21 at 10:06

score 0 · Answer 1 · edited Sep 11 '21 at 10:19

You have to specify the container height that wraps the column

Change this

Container(
          margin: EdgeInsets.fromLTRB(0, 8, 0, 0),
          child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: transactionItems.map((item) {
                return Transaction(item);
              }).toList()),
        )

To this

Container( height: 200,
          margin: EdgeInsets.fromLTRB(0, 8, 0, 0),
          child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: transactionItems.map((item) {
                return Transaction(item);
              }).toList()),
        )

Suggestion: You should use ListView.builder, not column inside that container

using ListView:

  Container( height: 200,
          margin: EdgeInsets.fromLTRB(0, 8, 0, 0),
          child: ListView.builder(
              itemCount: transactionItems.length,
              builder: (BuildContext ctx, int index){
                return Transaction(transactionItems[index]);
                }),
        )

Also, refer to these answers Flutter: RenderBox was not laid out

Thanks for your answer. I tried 200 and double.infinity as height but none of'em worked. — ch3x, Sep 11 '21 at 10:27

score 0 · Answer 2 · answered Sep 11 '21 at 11:14

I fix the problem with adding height parameter to my Transaction widget.

...

class Transaction extends StatelessWidget {
  final TransactionModel item;

  Transaction(this.item);

  final DateFormat dateFormat = DateFormat("MMMM d yyyy");

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(4),
      width: double.infinity,
      height: 72,
...

Flutter RenderBox was not laid out

2 Answers2