CustomScrollWidget, SliverList, SliverChildBuilderDelegate constantly rebuilds and degrades performance. Flutter

Question

I was thinking of implementing SliverAppBar and a Scrollable items under it, so I have this code right now:

CustomScrollView(
        semanticChildCount: categoryItems.length,
        physics: BouncingScrollPhysics(),
        slivers: [
          SliverAppBar(
            automaticallyImplyLeading: false,
            backgroundColor: Colors.white,
            elevation: 0,
            actions: [
              Padding(
                padding: EdgeInsets.only(right: 15),
                child: IconButton(
                  onPressed: () {},
                  icon: Icon(
                    Icons.more_horiz,
                    color: changeColor == 80 ? Color(0xFFB2A588) : Colors.white,
                    size: 30,
                  ),
                ),
              )
            ],
            expandedHeight: MediaQuery.of(context).size.height / 3,
            stretch: true,
            pinned: true,
            flexibleSpace: LayoutBuilder(
                builder: (BuildContext context, BoxConstraints constraints) {
              // setting state for top to change color of more horiz
              WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {
                    changeColor = constraints.biggest.height;
                  }));
              return FlexibleSpaceBar(
                title: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      constraints.biggest.height == 80 ? 'Title' : '',
                      style: TextStyle(
                        fontSize: 25,
                        fontWeight: FontWeight.bold,
                        color: Color(0xFFB2A588),
                      ),
                    ),
                    Visibility(
                      visible: constraints.biggest.height == 80,
                      child: Icon(
                        Icons.keyboard_arrow_down,
                        size: 35,
                        color: Color(0xFFB2A588),
                      ),
                    )
                  ],
                ),
                stretchModes: [
                  StretchMode.zoomBackground,
                ],
                background: Stack(
                  children: [
                    // category image
                    Image.network(
                      'networkimage',
                      fit: BoxFit.cover,
                      width: double.infinity,
                    ),
                    // category title
                    Positioned(
                      bottom: 30,
                      left: 30,
                      child: Row(
                        children: [
                          SizedBox(
                            width: MediaQuery.of(context).size.width / 2.5,
                            child: Text(
                              'Title',
                              style: TextStyle(
                                  fontSize: 60,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.white),
                            ),
                          ),
                        ],
                      ),
                    ),
                    // button
                    Positioned(
                      bottom: 30,
                      right: 30,
                      child: SizedBox(
                        width: MediaQuery.of(context).size.width / 4,
                        child: RaisedButton(
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          color: Colors.white,
                          elevation: 4.0,
                          child: Text('View more',
                              style: TextStyle(
                                  fontSize: 20,
                                  fontWeight: FontWeight.w600,
                                  color: Colors.black)),
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(25.0)),
                        ),
                      ),
                    ),
                  ],
                ),
              );
            }),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                print(index); },
          childCount: categoryItems.length,
        ),
      )
    ],
  )

The print(index) statement gets executed every second constantly. Any ideas why is that happening? Working with SliverList for the first time.

PS if you put some ListTile s for example inside the SliverChildBuilderDelegate it still executes print statement constantly.

Answer 1

One of the things to consider when using nested structures is to avoid infinite loops. If a field is redrawn when a "state" changes, it will repeat itself in other loops under it. Please delete the specified area and try.

The code to be deleted:

// This field triggers repetition.

WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {
    changeColor = constraints.biggest.height;
}));