How can i return diffrent Sliver depending on which item the user clicked without rebuilding the whole StatefullWidget

Issue

I’m Having a problem as i said in the title which is mainly about slivers and displaying diffrent slivers depending on which menu Item clicked (SliverListView) .

ListMenu.dart

class _ListMenuState extends State<ListMenu> {


  final List<Widget> _menuItemsReturn =
  [
    MyApp(),
    AnimeListPage(),
    LastEpisodes(), 
    Announces(), 
    MostRated(), 
    Newest(), 
    Favourite(),
    ToWatch(), 
    Settings()
  ];

  Widget _gestureClickMenuItem(int index, String menuItemName , IconData ico)
  {
    return       
      GestureDetector(
        onTap: () => null,
        // Navigator.of(widget.context).push(MaterialPageRoute( builder: (b) => _menuItemsReturn[index])),
        child: mostWatched(widget.screenWidth, ico , Colors.white, menuItemName),
      );
  }



  @override
  Widget build(BuildContext context) {

  List<Widget> _menuItems = 
  [
      SizedBox(width: 2,),

      _gestureClickMenuItem(0, 'Home' ,       Icons.home),
      _gestureClickMenuItem(1, 'Animes' ,     Icons.video_library),
      _gestureClickMenuItem(2, 'Last Eps' ,   Icons.poll),
      _gestureClickMenuItem(3, 'Announces' ,  Icons.announcement),
      _gestureClickMenuItem(4, 'M. Rated' ,   Icons.star_border),
      _gestureClickMenuItem(5, 'Newest' ,     Icons.fiber_new),
      _gestureClickMenuItem(6, 'Favourite' ,  Icons.favorite),
      _gestureClickMenuItem(7, 'To Watch' ,   Icons.schedule),
      _gestureClickMenuItem(8, 'Settings' ,   Icons.settings),

      SizedBox(width: 2,),

  ];

    return SliverPersistentHeader
    (
      pinned: true,
      //floating: true,

      delegate: SliverAppBarDelegate(
        maxHeight: 60,
        minHeight: 60,
        child: Container(
          width: double.infinity,
          decoration: BoxDecoration(
            color: mainBgColor ,
          ),

          child: ScrollablePositionedList.builder(
            itemCount: 11,
            initialScrollIndex: widget.scrollTo,
            scrollDirection: Axis.horizontal,
            padding: EdgeInsets.all(5),
            itemBuilder: (b, ind)
            {
              return _menuItems[ind];
            },

          ),
        )
      ),
    );
  }
}

ListMenu basically returns a horizontal listView containing [Home … AnimeList …etc] ..

my MainScrollView.dart

  return CustomScrollView(
                slivers: <Widget>
                [
                  MySliverAppBar(height: widget.sc_height / 3), // this is a persistent SliverAppBar
                  ListMenu(widget.sc_width, context, 0),

                  // What i want to achieve is returning either MyDynamicSliver() or MyDynamicSliver2().. etc
                  // depending on which _gestureClickMenuItem() the user clicked and ofcours without the need to rebuild everything from 0 ..
                  // because rebuilding everything is same as just doing Navigator.of(cntx).push .. which is not my goal .
                  MyDynamicSliver(),
                ],
              );

Any Possible Solution , weither Slivers-related or not would be acceptable , thanks you .

Solution

Try using a StatefulBuilder widget:

In the builder parameter, pass in a context and a StateSetter. You can name it whatever you want.

When it’s time to rebuild the widget, just call your StateSetter.

Ex:

return: StatefulBuilder(

//You can name the StateSetter anything you want. In this case, it's setState
        builder: (BuildContext context, StateSetter setState) {
          return FlatButton(
            child: Text("Set Your State"),
            onPressed: () => setState();
          );
        }),

Answered By – Wilson Wilson

Answer Checked By – David Marino (FlutterFixes Volunteer)