Flutter: Change Scroll Offset in a child through NavigationBar

Question

I currently have a Homepage, which consists of a Scaffold, with a bottomAppBar for navigation:

The body has 5 pages, the first page is a feed, which consists of a ListView of Widgets. What I want to do is same as Instagram has it: when I scroll down the feed and I click the Feed Button on the Navigation Bar, then I want the ListView to scroll back to the top automatically.

This is part of my code:

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
  int _selectedIndex = 0;
  
  @override
  Widget build(BuildContext context) {
  return Scaffold(
    body: [
      HomeFeed(),
      Page2(),
      ...
      ].elementAt(_selectedIndex),
      
    bottomNavigationBar: BottomAppBar(
      child: Row(
        children: <Widget>[
          IconButton(
            icon: FaIcon(FontAwesomeIcons.houseUser),
            onPressed: (){
              if (_selectedIndex == 0) {
                //add logic to make the HomeFeed ListView scroll up
              } else {
                 setState((){
                   _selectedIndex = 0;
                 });
              }
            },
          IconButton(
            icon: FaIcon(FontAwesomeIcons.compass),
            onPressed: (){
              setState((){
                _selectedIndex = 1;
              });
            },
          ...
         ],
        ),
       ),  //BottomAppBar
       
    ), //Scaffold  
       
    }
   

I know that if I had the code of the HomeFeed inside the Scaffold.body then I could just use a Scrollcontroller and the animateTo method. The problem is that the Homefeed is another stateful widget and even though setState is called when clicking the feed icon, the HomeFeed widget is not rebuilding. I tried defining a Scrollcontroller in the Homepage and pass it to the HomeFeed but it did not work.

Can anyone help me with that?

Answer 1

You can set a GlobalKey for the state of the HomeFeed widget. Using this GlobalKey you can call the functions of the state of the HomeFeed widget.

Main code:

  GlobalKey<HomeFeedState> feedKey = new GlobalKey<HomeFeedState>(); // this is new

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: [
        HomeFeed(key: feedKey), // this is new
        Page3(),
      ].elementAt(_selectedIndex),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          children: <Widget>[
            IconButton(
              icon: FaIcon(FontAwesomeIcons.houseUser),
              onPressed: (){
                if (_selectedIndex == 0) {
                  feedKey.currentState.jumpUp(); // this is new
                } else {
                  setState(() {
                    _selectedIndex = 0;
                  });
                }
              },
            ),
            IconButton(
              icon: FaIcon(FontAwesomeIcons.compass),
              onPressed: (){
                setState(() {
                  _selectedIndex = 1;
                });
              },
            ),
          ],
        ),
      ), //BottomAppBar
    );
  }

HomeFeed:

class HomeFeed extends StatefulWidget {
  final GlobalKey<HomeFeedState> key; // this is new
  HomeFeed({this.key}) : super(key: key); // this is new
  @override
  HomeFeedState createState() => HomeFeedState();
}

class HomeFeedState extends State<HomeFeed> {
  var _scrollController = new ScrollController();

  jumpUp() { // this will be called when tapped on the home icon
    _scrollController.animateTo(0,
        duration: Duration(seconds: 2), curve: Curves.ease);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        shrinkWrap: true,
        controller: _scrollController,
        itemCount: 100,
        itemBuilder: (context, index) {
          return Container(
            height: 300,
            child: Card(
              child: Center(
                child: Text('$index'),
              ),
            ),
          );
        },
      ),
    );
  }
}

Answer 2

              class HomePage extends StatefulWidget {
                @override
                _HomePageState createState() => _HomePageState();
              }

              class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
                int _selectedIndex = 0;
                  Widget homeWidget  = HomeFeed();
                
                PageController pageController = PageController();
                @override
                Widget build(BuildContext context) {
                return Scaffold(
                  body: PageView(
                    controller: pageController,
                  
                    children: <Widget>[
                      homeWidget,
                      Second(),
                        ...
                    ],
                  ),
                    
                  bottomNavigationBar: BottomAppBar(
                    child: Row(
                      children: <Widget>[
                        IconButton(
                          icon: FaIcon(FontAwesomeIcons.houseUser),
                          onPressed: (){
                            setState((){
                             homeWidget = HomeFeed();
                              _selectedIndex = 0;
                              pageController.jumpToPage(0);
                            });
                          },
                        IconButton(
                          icon: FaIcon(FontAwesomeIcons.compass),
                          onPressed: (){
                            setState((){
                              _selectedIndex = 1;
                              pageController.jumpToPage(1);
                            });
                          },
                        ...
                      ],
                      ),
                    ),  //BottomAppBar
                    
                  ), //Scaffold  
                    
                  }

use like this