FutureBuilder reloading whenever the BottomNavigationBarItem is changed

Question

I'm using FutureBuilder on a screen with BottomNavigationBar. But whenever I click on a different tab and come back, FutureBuilder reloads everything again. I'm already using AutomaticKeepAliveClientMixin, I'm having trouble saving getLessons() so I don't have to load it again. Can someone help me?

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Lesson>>(
        future: getLessons(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.none) {
          } else if (snapshot.connectionState == ConnectionState.waiting) {
          } else {
            return Container();
          }
        });
  }

This is my getLessons():

  Future<List<Lesson>> getLessons() async {
    String url = "...";
    http.Response response = await http.get(url);
    var data = json.decode(response.body);
    (...)
    return lessons;
  }

How can I maintain the state so as not to update?

score 1 · Answer 1 · answered Mar 05 '20 at 19:32

// Create instance variable
Future myFuture;

@override
void initState() {
  super.initState();

  // assign this variable your Future
  myFuture = getLessons();
}


@override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Lesson>>(
        future: future, // use your future here
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.none) {
          } else if (snapshot.connectionState == ConnectionState.waiting) {
          } else {
            return Container();
          }
        });
  }

Credit to CopsOnRoad

I tried this, but it always returns the connection status "None". Future does not update the status after it is loaded. If I use "getLessons()" directly, it works normally — Jeiel Junio, Mar 05 '20 at 19:46

score 1 · Accepted Answer · answered Mar 06 '20 at 20:32

The problem is that I was calling the screens without using PageView. I started the 4 screens outside the build() and called them all within a PageView, now it works.

body: PageView(
    controller: _pageController,
    onPageChanged: (index) {
      setState(() {
        _index = index;
      });
    },
    children: [_container1, _container2, _container3, _container4],
  ),

score 0 · Answer 3 · answered Jan 03 '23 at 15:22

0

If you replace the PageView with PreloadPageView, the FutureBuilders will not be called again

just install preload_page_view here

answered Jan 03 '23 at 15:22

Charles Van Damme

765
2
6
14

FutureBuilder reloading whenever the BottomNavigationBarItem is changed

3 Answers3