29

I'm battling an issue where I'm given the error "Object was given an infinite size during layout" and "This probably means that it is a render object that tries to be as big as possible, but it was put inside another render object that allows its children to pick their own size.".

I understand what it means, but not how I can still keep my current widget tree responsive (it renders when running, so for a front-end user there seems to be no problem) while still fixing this issue. Currently I don't set the size of certain things to keep things responsive, and would like to avoid hard coding sizes of widgets if possible.

Any help or pointer in the right direction is greatly appreciated :)

Here's my current code:

    class EditArtikel extends StatefulWidget {
  final String path;

  EditArtikel({this.path});

  @override
  _EditArtikelState createState() => _EditArtikelState(path: path);
}

class _EditArtikelState extends State<EditArtikel> {
  final String path;

  _EditArtikelState({this.path});

  final titleController = TextEditingController();
  final subtitleController = TextEditingController();
  final authorController = TextEditingController();
  final textController = TextEditingController();

  File imageFile;

  List<DropdownMenuItem<dynamic>> dropdownMenuItemFromList() {
    List<DropdownMenuItem<dynamic>> itemsList = [];
    for (var i = 1; i < currentTags.length; i++) {
      itemsList.add(new DropdownMenuItem(
        child: Text(currentTags[i]),
        value: currentTags[i],
      ));
    }
    return itemsList;
  }

  var _selectedValue = "";

  @override
  Widget build(BuildContext context) {
    final isAdmin = Provider.of<bool>(context);
    var pathElements = path.split('/');
    final String artikelID = pathElements[3];
    List<DropdownMenuItem<dynamic>> items = dropdownMenuItemFromList();

    if (isAdmin == true) {
      return LayoutBuilder(
        builder: (context, constraint) {
          return GlobalScaffold(
            body: Container(
              height: constraint.maxHeight,
              child: SingleChildScrollView(
                child: StreamBuilder<ArtikelData>(
                    stream:
                        DatabaseService(pathID: artikelID).artikelByArtikelID,
                    builder: (context, snapshot) {
                      if (snapshot.hasData) {
                        titleController.text == ""
                            ? titleController.text = snapshot.data.title
                            : titleController.text;

                        subtitleController.text == ""
                            ? subtitleController.text = snapshot.data.subtitle
                            : subtitleController.text;

                        authorController.text == ""
                            ? authorController.text = snapshot.data.author
                            : authorController.text;

                        textController.text == ""
                            ? textController.text = snapshot.data.text
                            : textController.text;

                        _selectedValue == ""
                            ? _selectedValue =
                                currentTags.contains(snapshot.data.tags)
                                    ? snapshot.data.tags
                                    : currentTags[1]
                            : _selectedValue = _selectedValue;

                        FirebaseStorageImage fbImage = new FirebaseStorageImage(
                          fileName: artikelID,
                          storageLocation: fbRefArtiklarImages,
                        );

                        return Container(
                          color: primaryColor,
                          padding: EdgeInsets.symmetric(
                              horizontal: 20, vertical: 15),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  GradientHeading(
                                    large: true,
                                    text: "Redigera artikel",
                                  ),
                                  SizedBox(height: 15),
                                  CustomTextFormField(
                                    labelText: "Rubrik",
                                    controller: titleController,
                                  ),
                                  CustomTextFormField(
                                    labelText: "Underrubrik",
                                    controller: subtitleController,
                                  ),
                                  Padding(
                                    padding: EdgeInsets.only(bottom: 7),
                                    child: DropdownButtonFormField(
                                      decoration: customInputDecoration("Tags"),
                                      value: _selectedValue,
                                      isDense: true,
                                      onChanged: (value) {
                                        setState(() {
                                          _selectedValue = value;
                                        });
                                      },
                                      items: items,
                                    ),
                                  ),
                                  CustomTextFormField(
                                    labelText: "Skriven av",
                                    controller: authorController,
                                  ),
                                  CustomTextFormField(
                                    labelText: "Text",
                                    multiline: true,
                                    controller: textController,
                                  ),
                                  NormalButton(
                                    text: "Ladda upp ny bild",
                                    outlined: true,
                                    outlinedBgColor: primaryColor,
                                    onPressed: () async {
                                      FocusScope.of(context).unfocus();
                                      imageFile = await ChooseImage()
                                          .chooseImageFromGallery();
                                      setState(() {});
                                    },
                                  ),
                                  ConditionalBuilder(
                                    condition: imageFile == null,
                                    ifTrue: NormalButton(
                                      text: "Ta bort originalbild",
                                      shouldOverideColor: true,
                                      overriddenColor: redWarningColor,
                                      onPressed: () async {
                                        FocusScope.of(context).unfocus();
                                        showDialog(
                                          context: context,
                                          barrierDismissible: true,
                                          builder: (_) => AlertDialog(
                                            content: Text(
                                                "Vill du radera originalbilden?"),
                                            actions: <Widget>[
                                              FlatButton(
                                                child: Text("Avbryt"),
                                                onPressed: () {
                                                  Navigator.of(context).pop();
                                                },
                                              ),
                                              FlatButton(
                                                child: Text("Radera"),
                                                onPressed: () async {
                                                  await StorageService()
                                                      .deleteArtikelImageToStorage(
                                                          artikelID);
                                                  setState(() {});
                                                  Navigator.of(context).pop();
                                                },
                                              ),
                                            ],
                                          ),
                                        );
                                      },
                                    ),
                                  ),
                                  ConditionalBuilder(
                                    condition: imageFile != null,
                                    ifTrue: NormalButton(
                                      text: "Ta bort bild",
                                      shouldOverideColor: true,
                                      overriddenColor: redWarningColor,
                                      onPressed: () {
                                        FocusScope.of(context).unfocus();
                                        imageFile = null;
                                        setState(() {});
                                      },
                                    ),
                                  ),
                                  ConditionalBuilder(
                                    condition: imageFile != null,
                                    ifTrue: imageFile != null
                                        ? Image(
                                            image: FileImage(imageFile),
                                          )
                                        : Container(),
                                    ifFalse: fbImage,
                                  ),
                                  SizedBox(height: 40),
                                ],
                              ),
                              NormalButton(
                                text: "Publisera ändringar",
                                onPressed: () async {
                                  if (titleController.text != "" &&
                                      subtitleController.text != "" &&
                                      authorController.text != "" &&
                                      textController.text != "") {
                                    DatabaseService().editArtikel(
                                      artikelID,
                                      titleController.text,
                                      subtitleController.text,
                                      _selectedValue,
                                      authorController.text,
                                      textController.text,
                                      imageFile,
                                    );
                                    Navigator.pop(context);
                                  } else {
                                    showDialog(
                                      context: context,
                                      barrierDismissible: true,
                                      builder: (_) => AlertDialog(
                                        content:
                                            Text("Du måste fylla i alla fält"),
                                        actions: <Widget>[
                                          FlatButton(
                                            child: Text("OK"),
                                            onPressed: () {
                                              Navigator.of(context).pop();
                                            },
                                          )
                                        ],
                                      ),
                                    );
                                  }
                                },
                              ),
                            ],
                          ),
                        );
                      } else {
                        return LoadingWidget();
                      }
                    }),
              ),
            ),
          );
        },
      );
    } else {
      return GlobalScaffold(
        body: Center(
          child: Text("Du har inte tillgång till den här sidan"),
        ),
      );
    }
  }
}

And here's the error log: enter image description here enter image description here

2
  • Can you add your error log?. Here most of the widgets are your custom widgets. Commented Feb 4, 2020 at 14:09
  • @CrazyLazyCat I've now added the error log :) Just tell me if you need more info in some specific widget. Commented Feb 4, 2020 at 14:21

1 Answer 1

19

From where I can see, you have the problem because you are inserting the StreamBuilder inside the SingleChildScrollView which has an infinite height to grow, and StreamBuilder asks for his parent's height.

StreamBuilder needs a parent that has a fixed size, so he can understand how much space he has to render his children.

what you need to do is to put the SingleChildScrollView inside a Container with a given size (You can put all the body inside a LayoutBuilder and use the constrains.maxHeight as the height to the container, so SingleChildScrollView knows its size).

like this: (Since I don't have your widgets, I can't run this code... so maybe there are some parentheses missing)

I hope this helps!

return GlobalScaffold(
       body: LayoutBuilder(
         builder: (ctx, constrains){
           return GlobalScaffold(
      body: Container(
        height: constrains.maxHeight,
        child: SingleChildScrollView(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                GradientHeading(text: "Guider", large: true),
                ConditionalBuilder(
                  condition: isAdmin,
                  ifTrue: Column(
                    children: <Widget>[
                      NormalButton(
                        text: "Skapa ny guide",
                        onPressed: () {
                          Navigator.pushNamed(context, createNewArtikelRoute);
                        },
                      ),
                      NormalButton(
                        text: "Lägg till ny kategori",
                        outlined: true,
                        onPressed: () {},
                      ),
                    ],
                  ),
                ),
                SizedBox(height: 10),
                StreamBuilder<List<GuiderCategoriesData>>(
                  stream: DatabaseService().guiderCategoriesByPopularity,
                  builder: (context, snapshot) {
                    if (snapshot.connectionState == ConnectionState.active) {
                      return GuiderCategories(
                        snapshot: snapshot,
                        numberOfCategories: snapshot.data.length,
                      );
                    } else if (!snapshot.hasData) {
                      return GuiderCategories(
                        hasNoCategories: true,
                      );
                    } else {
                      return LoadingWidget();
                    }
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
  )
  );
4
  • 2
    Another similar issue may be happening with the nested Column widgets, wherein Column try to take up all the space possible, so they kinda set the height to infinity, and the second column's like "What? You sure I can be infinitely big?" So the solution there is so wrap the children of each column (or row) in an expanded widget, which helps to manage constraints without hard-coding a specific size. Commented Feb 4, 2020 at 16:59
  • @DanielVofchuk thank you for this! It worked in this widget. But when I try to do the same changes to another widget that also had this issue, the error (same ones) still exists. I've update my question with the new widget (it's a bit more complex and I understand that most of the widgets are custom built ones, but I hope it still works). Any idea why this doesn't work in this particular widget? Commented Feb 5, 2020 at 16:41
  • @RasmusLian I can't exactly understand what kinda problem are you facing.. can you give more detail?
    – Vofch
    Commented Feb 6, 2020 at 17:28
  • @danielvofchuk In the code (now updated) in the question, I applied the changes you suggested (LayoutBuilder with Container and constraints.maxHeight) to two widgets which both was throwing the error. In the first it worked (no error) but in the other widget I'm still getting the error. Do you spot something wrong in the code above in my question? I don't get why the LayoutBuilder solution worked for one widget but not the other. Thanks in advance :) Commented Feb 6, 2020 at 21:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.