Icons inside flexibleSpace not hiding when SliverAppBar scrolled

Question

I am having 'Next' and 'Prev' buttons inside flexibleSpace, as you can see below, Text of 'Next' and 'Prev' button does hide on scroll but forward and backward arrows do not hide. I want them to hide when scrolled.

This is my code,

            SliverAppBar(
              backgroundColor: selectedColor ?? Colors.blue,
              expandedHeight: 112,
              snap: true,
              pinned: false,
              floating: true,
              forceElevated: true,
              actions: <Widget>[
                IconButton(
                    icon: Icon(Icons.event),
                    onPressed: () {
                      DateTime now = DateTime.now();
                      _selectDate(context, now);
                    })
              ],
              flexibleSpace: selectedTitle != null ? SafeArea(
                child: Column(
                  children: <Widget>[
                    Container(
                      height: kToolbarHeight,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Text(
                            selectedTitle?.toUpperCase() ?? '',
                            style: Theme
                                .of(context)
                                .textTheme
                                .title
                                .copyWith(fontSize: 16, color: Colors.white),
                          ),
                          SizedBox(
                            height: 2,
                          ),
                          isWeekly
                              ? SizedBox(
                            height: 0,
                            width: 0,
                          )
                              : Text(
                            displayDate ?? '',
                            style: Theme
                                .of(context)
                                .textTheme
                                .caption
                                .copyWith(fontSize: 10, color: Colors.white),
                          ),
                          SizedBox(
                            height: 2,
                          ),
                          Text(
                            selectedParshaNodeModel?.parshaName ?? '',
                            style: Theme
                                .of(context)
                                .textTheme
                                .subtitle
                                .copyWith(fontSize: 14, color: Colors.white),
                          ),
                        ],
                      ),
                    ),
                    Expanded(
                      child: Container(
                        height: kToolbarHeight,
                        width: MediaQuery
                            .of(context)
                            .size
                            .width,
                        color: Colors.white,
                        child: Row(
                          children: <Widget>[
                            Expanded(
                                child:
                                FlatButton(
                                    onPressed: () {}
                                     ,
                                    child: Row(
                                      crossAxisAlignment:
                                      CrossAxisAlignment.center,
                                      mainAxisAlignment:
                                      MainAxisAlignment.spaceAround,
                                      children: <Widget>[
                                        Icon(Icons.arrow_back,
                                            color: Colors.grey),
                                        Text(
                                          'Prev',
                                          style: Theme
                                              .of(context)
                                              .textTheme
                                              .subhead
                                              .copyWith(color: Colors.grey),
                                        )
                                      ],
                                    ))),
                            Expanded(
                                child:
                                FlatButton(
                                    onPressed: (){},
                                    child: Row(
                                      mainAxisAlignment:
                                      MainAxisAlignment.spaceAround,
                                      crossAxisAlignment:
                                      CrossAxisAlignment.center,
                                      children: <Widget>[
                                        Text('Next',
                                            style: Theme
                                                .of(context)
                                                .textTheme
                                                .subhead
                                                .copyWith(color: Colors.grey)),
                                        Icon(
                                          Icons.arrow_forward,
                                          color: Colors.grey,
                                        ),
                                      ],
                                    )))
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ) : Container(),
            ),

Solution

This is happening because the arrows are spilling out of the bounds of your button. Adding clipBehavior: Clip.hardEdge should solve your issue:

child: FlatButton(
  clipBehavior: Clip.hardEdge,
  onPressed: () {},
  child: Row(
    ...Your Arrow and Text
  ),
),