Flutter StreamBuilder complex widget freezes screen

Viewed 546

The main page of our Flutter app is pretty "complex", as it is a CustomScrollView that embeds a list of horizontal ListViews, animations, and other widgets below the CustomScrollView.

We use a StreamBuilder, that displays an CircularProgressIndicator while the data is being fetched from our APIs, and then renders the whole page.

When the data is ready, we notice that there is a short delay (maybe 500ms) where the CircularProgressIndicator "freezes" while the page is being rendered.

If I replace the whole page by a simple Container, this behavior does not happen as everything is super fast to render; the indicator never never freezes.

DEMO

video.mp4 (Flutter 1.25.0-5.0.pre.140 / Debug / Physical Samsung S8)

Simplified Sample Code:

 @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        child: StreamBuilder(
            stream: _myStream,
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return Container(
                  child: Center(
                    child: CircularProgressIndicator(
                      backgroundColor: Colors.transparent,
                      valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
                    ),
                  ),
                );
              }
              // Complex page widget that take time to draw, freezes indicator
              return _buildHomePage(data);

              // Counter-example, does not freeze because fast to draw
              return Container(color: Colors.blue);
            }
        )
    );
  }

How can I prevent this freeze behavior?

1 Answers

Sounds like you might be overwhelming the UI Isolate. Have you looked at the timeline in DevTools? If you're calculating in the UI Isolate, you might need to push that off into another calculate-only Isolate.

Related