Flutter - Cannot build because the frawework is already building

Question

I am building a page, dynamicly generating some views into it. In my case the list showned will updated given the user input (used as a filter).

All was working perfectly when using a Text Widget to be dynamicly rendered, but when I tried to switch to a Column or Gridview, all went wrong And a got the folowwing error

The following assertion was thrown building ServerGrid(dirty; state: _ServerGridState#59211289()):
I/flutter (14351): setState() or markNeedsBuild() called during build.
I/flutter (14351): This Overlay widget cannot be marked as needing to build because the framework is already in the
I/flutter (14351): process of building widgets. A widget can be marked as needing to be built during the build phase
I/flutter (14351): only if one of its ancestors is currently building. This exception is allowed because the framework
I/flutter (14351): builds parent widgets before children, which means a dirty descendant will always be built.
I/flutter (14351): Otherwise, the framework might not visit this widget during this build phase.
I/flutter (14351): The widget on which setState() or markNeedsBuild() was called was:
I/flutter (14351):   Overlay([LabeledGlobalKey<OverlayState>#774312152]; state: OverlayState#252339409(entries:
I/flutter (14351):   [OverlayEntry#727022347(opaque: false; maintainState: false), OverlayEntry#1051156104(opaque:
I/flutter (14351):   false; maintainState: true), OverlayEntry#280497357(opaque: false; maintainState: false),
I/flutter (14351):   OverlayEntry#41791024(opaque: false; maintainState: true), OverlayEntry#444321361(opaque: false;
I/flutter (14351):   maintainState: false), OverlayEntry#717668788(opaque: false; maintainState: true)]))

Here is the code I got so far,

ServerGrid which is where the error is thrown import 'package:flutter/material.dart';

import'package:firebase_sandbox/models/server.dart';

class ServerGrid extends StatefulWidget {
  ServerGrid({Key key, this.servers}) : super(key: key);

  final servers;

  @override
  State createState() => new _ServerGridState();
}

class _ServerGridState extends State<ServerGrid> {

  showInfos(serv){
    showDialog(context: context, child: new AlertDialog(content: new Text(serv.toString())));
  }

  Widget buildServerTile(Server serv) {
    return new InkWell(
        onTap: showInfos(serv),
        child :
          new Column(
            children: [
                new CircleAvatar(child : new Image.network(serv.image)),
                new Text(
                  serv.name,
                  style : new TextStyle(fontWeight: FontWeight.bold),
                ),
                new Text(
                  serv.description,
                  style : new TextStyle(color : Colors.grey[500]),
                ),
            ],
          ),
    );
  }

   List<Widget> buildGrid() {
    var theGrid = <Widget>[];
    for(Server s in widget.servers) {
      theGrid.add(buildServerTile(s));
    }
    return theGrid;
  }

  @override
  Widget build(BuildContext context) {
    // return new Text("${widget.servers.toString()}"); //Working perfectly
    return new GridView(
              gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
              ),
               children: buildGrid(),
          );
  }
}

Controller calling the view to update :

  filter(value) {
    filteredList = _servers.where(
            (serv) =>
        serv.name.contains(value) || serv.tags
            .where((tag) => tag.contains(value))
            .length > 0
    ).toList();

    print(filteredList);
    setState(() {
      serverList = new ServerGrid(servers : filteredList);
    });
  }

Been searching, but I can't figure out what is wrong when building my Gridview

score 61 · Accepted Answer · answered Jun 11 '17 at 16:07

61

You have an issue with your onTap handler. It is trying to show the dialog immediately during your build function, which is not allowed.

onTap: showInfos(serv),

Change your handler to be a function:

onTap: () => showInfos(serv),

answered Jun 11 '17 at 16:07

Collin Jackson

110,240
31
221
152

1

Wow... I am ashamed of myself for doing such silly error. Thanks Collin ! – Alexi Coard Jun 11 '17 at 16:12
1

It is a very common mistake, I've made it too :) – Collin Jackson Jun 11 '17 at 16:19
Oh man, I've been chasing my tail for the past 12 hours because of this... – dasfima Oct 26 '17 at 13:15
@CollinJackson when ever i had problem with flutter i had almost 100 % percent problems solved by your answers and this time also thanks you are genius thanks. – shakil.k Sep 09 '18 at 18:50
4

what is the difference between onTap: showInfos(serv) and onTap:=> showInfos(serv)? – M.ArslanKhan Dec 26 '19 at 17:43
@M.ArslanKhan see below answer. You will understand the difference. – dilshan Dec 11 '20 at 12:04
@M.ArslanKhan onTap: showInfos(serv) is calling the funtion directly. however, onTap: () => showInfos(serv), is calling the funtion when onTap happens. – Mohammed Fadhl Apr 27 '21 at 08:31
Thank you sir! I just spent 1 hour digging into the internals of widgets building... – Răzvan Puiu Jul 08 '22 at 16:04
@AlexiCoard Bro Thank you so much for asking this question back then – taha khamis Aug 05 '22 at 09:34
@CollinJackson and even bigger thanks to Collin for the great and simple anser! You saved my day ♥ – taha khamis Aug 05 '22 at 09:34
the first one calling the method while the second just set the method definition to be called later – aym1781969 Jun 12 '23 at 20:13

score 6 · Answer 2 · answered Sep 01 '22 at 11:00

For those who are facing the same error but are not in the same situation as @Alexi, you can do this:

WidgetsBinding.instance.addPostFrameCallback((_) {
  // Your code HERE
  // Flutter will wait until the current build is completed before executing this code.
});

score 3 · Answer 3 · answered Jun 29 '21 at 17:15

I have used another interesting solution. So, what is happening here is that it notifies to rebuild the UI, while UI is already building which causes the error. So, what I did to fix it was to put it inside a Future.delayed() function, and give it a small duration of say 1 milisecond. What it does is it runs notifylistener later and you won't get any problem. Obviously this is not a proper fix but can help

Flutter - Cannot build because the frawework is already building

3 Answers3

Linked