RenderBox was not laid out: _RenderDecoration#f6ed4 relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

Question

so I am new to Flutter but I am trying to figure it out how to display a list view of cards, each card with its details.

My problem is that every time I try to display it I get an error(see below).

From what I found online they say that I need to use an Expand since I use a widget inside a column as a child, I used it but nothing I get the same error.

Can anyone help me because at this point I don't know what else to do and I got blocked for a day now.

Thank you.

Below I will add the code and the error.

import 'dart:ui';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:ipill/PharmacyNameClass.dart';

class SearchForMedicineScreen extends StatefulWidget {
  @override
  _SearchForMedicineScreenState createState() =>
      _SearchForMedicineScreenState();
}

class _SearchForMedicineScreenState extends State<SearchForMedicineScreen> {
  String NameOfThePharmacyFromSearchField = "";

  final Pharmacy pharmacyName = Pharmacy("");

  Future<QuerySnapshot> MedicineIGetAfterTheSearch;

  List<Card> listOfPharmacies = [];

  //Method that allows me seach for the drug
  Future getYourDrugs(String NameOfThePharmacy) {
    setState(() {
      MedicineIGetAfterTheSearch = FirebaseFirestore.instance
          .collection('Pharmacies')
          .doc(NameOfThePharmacy)
          .collection('Drugs')
          .where('SearchKey',
              isEqualTo: NameOfThePharmacyFromSearchField.substring(0, 1)
                  .toUpperCase())
          .get();
    });
    return MedicineIGetAfterTheSearch;
  }

  Widget projectWidget() {
    return FutureBuilder<QuerySnapshot>(
        future: MedicineIGetAfterTheSearch,
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (snapshot.hasError) {
            return Text("Something went wrong");
          }
          if (snapshot.connectionState == ConnectionState.done) {
            QuerySnapshot dataIWorkWithAfterIGetTheMedicines = snapshot.data;

            for (int i = 0;
                i < dataIWorkWithAfterIGetTheMedicines.docs.length;
                i++) {
              Card temContainer = Card(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    ListTile(
                      leading: Icon(Icons.local_hospital),
                      title: Text(
                          "Name ${dataIWorkWithAfterIGetTheMedicines.docs[i].get("Name")}"),
                      subtitle: Text(
                          "Price ${dataIWorkWithAfterIGetTheMedicines.docs[i].get("Price")}"),
                      trailing: Text(
                          "Quantity ${dataIWorkWithAfterIGetTheMedicines.docs[i].get("Quantity")}"),
                    ),
                    Row(
                      children: <Widget>[
                        Column(
                          children: <Widget>[
                            IconButton(
                              onPressed: () {},
                              icon: Image.asset("shopicon.png"),
                            )
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
              );
              if (temContainer == null) {
                listOfPharmacies = [];
              }
              listOfPharmacies.add(temContainer);
            }
            return ListView.builder(
                itemCount: listOfPharmacies.length,
                itemBuilder: (BuildContext context, int index) {
                  return listOfPharmacies[index];
                });
          }

          return Text("loading");
        });
  }

  @override
  Widget build(BuildContext context) {
    Pharmacy pharmacyName = ModalRoute.of(context).settings.arguments;
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              width: 20,
            ),
            Row(
              children: <Widget>[
                TextField(
                  onChanged: (val) {
                    setState(() {
                      if (val == null) {
                        listOfPharmacies = [];
                      }
                      NameOfThePharmacyFromSearchField = val;
                      listOfPharmacies = [];
                      getYourDrugs(pharmacyName.name);
                    });
                  },
                ),
              ],
            ),
            SizedBox(
              height: 20,
            ),
            projectWidget(),
          ],
        ),
      ),
    );
  }
}

This is the error :

    ======== Exception caught by rendering library =====================================================
RenderBox was not laid out: RenderFlex#e9630 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
The relevant error-causing widget was: 
  SafeArea file:///D:/2_Flutter/ipill/lib/SearchForMedicineScreen.dart:99:13
====================================================================================================

======== Exception caught by rendering library =====================================================
RenderBox was not laid out: RenderPadding#455b0 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
The relevant error-causing widget was: 
  Scaffold file:///D:/2_Flutter/ipill/lib/SearchForMedicineScreen.dart:98:12
====================================================================================================
Reloaded 4 of 798 libraries in 1,312ms.

======== Exception caught by rendering library =====================================================
The following _CastError was thrown during paint():
Null check operator used on a null value

The relevant error-causing widget was: 
  Column file:///D:/2_Flutter/ipill/lib/SearchForMedicineScreen.dart:100:16
When the exception was thrown, this was the stack: 
#0      RenderFlex._hasOverflow (package:flutter/src/rendering/flex.dart:487:37)
#1      RenderFlex.paint (package:flutter/src/rendering/flex.dart:970:10)
#2      RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2311:7)
#3      PaintingContext.paintChild (package:flutter/src/rendering/object.dart:189:13)
#4      RenderShiftedBox.paint (package:flutter/src/rendering/shifted_box.dart:70:15)

Answer 1

So after searching a lot online I found out that the problem was with the Row widget. Once I removed it, it worked perfectly. Below you can see how I changed the code to be more friendly and is working too.

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:ipill/PharmacyNameClass.dart';

class SearchForMedicineScreen extends StatefulWidget {
  @override
  _SearchForMedicineScreenState createState() =>
      _SearchForMedicineScreenState();
}

class _SearchForMedicineScreenState extends State<SearchForMedicineScreen> {
  String NameOfThePharmacyFromSearchField = "";

  final Pharmacy pharmacyName = Pharmacy("");

  Future<QuerySnapshot> MedicineIGetAfterTheSearch;

  List<CardWidget> listOfPharmacies = [];

  //Method that allows me seach for the drug
  Future getYourDrugs(String NameOfThePharmacy) {
    setState(() {
      MedicineIGetAfterTheSearch = FirebaseFirestore.instance
          .collection('Pharmacies')
          .doc(NameOfThePharmacy)
          .collection('Drugs')
          .where('Name', isEqualTo: NameOfThePharmacyFromSearchField)
          .get();
    });
    return MedicineIGetAfterTheSearch;
  }

  @override
  Widget build(BuildContext context) {
    Pharmacy pharmacyName = ModalRoute.of(context).settings.arguments;
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            TextField(
              onChanged: (val) {
                setState(() {
                  if (val.isEmpty == true) {
                    listOfPharmacies = [];
                  }
                  if (NameOfThePharmacyFromSearchField.isEmpty == true) {
                    listOfPharmacies = [];
                  }
                  NameOfThePharmacyFromSearchField = val;
                  listOfPharmacies = [];
                  getYourDrugs(pharmacyName.name);
                });
              },
            ),
            Expanded(
              child: FutureBuilder<QuerySnapshot>(
                  future: MedicineIGetAfterTheSearch,
                  builder: (BuildContext context,
                      AsyncSnapshot<QuerySnapshot> snapshot) {
                    if (snapshot.hasError) {
                      return Text("Something went wrong");
                    }
                    if (snapshot.connectionState == ConnectionState.done) {
                      QuerySnapshot dataIWorkWithAfterIGetTheMedicines =
                          snapshot.data;

                      for (int i = 0;
                          i < dataIWorkWithAfterIGetTheMedicines.docs.length;
                          i++) {
                        CardWidget temContainer =
                            CardWidget(dataIWorkWithAfterIGetTheMedicines, i);
                        if (temContainer == null) {
                          listOfPharmacies = [];
                        }
                        listOfPharmacies.add(temContainer);
                      }
                      return ListView.builder(
                          itemCount: listOfPharmacies.length,
                          itemBuilder: (BuildContext context, int index) {
                            return listOfPharmacies[index];
                          });
                    }

                    return Text("loading");
                  }),
            ),
          ],
        ),
      ),
    );
  }
}

class CardWidget extends StatelessWidget {
  final QuerySnapshot dataIWorkWithAfterIGetTheMedicines;
  final int i;
  CardWidget(this.dataIWorkWithAfterIGetTheMedicines, this.i);
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.local_hospital),
            title: Text(
                "Name ${dataIWorkWithAfterIGetTheMedicines.docs[i].get("Name")}"),
            subtitle: Text(
                "Price ${dataIWorkWithAfterIGetTheMedicines.docs[i].get("Price")}"),
            trailing: Text(
                "Quantity ${dataIWorkWithAfterIGetTheMedicines.docs[i].get("Quantity")}"),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Column(
                children: <Widget>[
                  IconButton(
                    onPressed: () {},
                    icon: Image.asset("shopicon.png"),
                  )
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}