---
title: "Discussion on \"State Persistence Techniques for the Flutter Bottom Navigation Bar\" | Hashnode"
description: "Discussion on \"State Persistence Techniques for the Flutter Bottom Navigation Bar\". Prevent rebuilding the bottom navigation bar screens in Flutter"
url: "https://hashnode.com/posts/state-persistence-techniques-for-the-flutter-bottom-navigation-bar/624be78b2b09bb392ea5c53a"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [State Persistence Techniques for the Flutter Bottom Navigation Bar](https://blog.nikkigoel.com/state-persistence-techniques-for-the-flutter-bottom-navigation-bar?utm_source=hashnode&utm_medium=feed)

Prevent rebuilding the bottom navigation bar screens in Flutter

Apr 5, 2022 · 8 min read · blog.nikkigoel.com  
Updated Jun 4  
Read the article

-   [#flutter](https://hashnode.com/tag/flutter)
-   [#flutter-examples](https://hashnode.com/tag/flutter-examples)
-   [#tutorial](https://hashnode.com/tag/tutorial)
-   [#learning](https://hashnode.com/tag/learning)
-   [#mobile-development](https://hashnode.com/tag/mobile-development)

## Written by

[Nikki Goel](https://hashnode.com/@nicks101)

@nicks101 · India

  
[View profile](https://hashnode.com/@nicks101)

Software Engineer | Blogger | Flutter Developer

I build apps, internal tools, and sketch stuff on my iPad. Into side projects, and occasionally sharing thoughts here.

## Responses 1

Markdown supported · ⌘↵ to post

[Michael Mao](https://hashnode.com/@krmao)

[Jun 25, 2022](https://hashnode.com/posts/state-persistence-techniques-for-the-flutter-bottom-navigation-bar/624be78b2b09bb392ea5c53a/comment/62b6a8bdb86f939ac81b4d01)

there is still have a problem.

if a page have FutureBuilder in a inner TabBarView, it will reload while change bottomNavigationBar even thouth did AutomaticKeepAliveClientMixin.

[Nikki Goel](https://hashnode.com/@nicks101)

[Jun 25, 2022](https://hashnode.com/posts/state-persistence-techniques-for-the-flutter-bottom-navigation-bar/624be78b2b09bb392ea5c53a/comment/62b6a8bdb86f939ac81b4d01#reply-62b7307492447c9aed5b804c)

Hey Michael, Glad you found the solution for this. There's another one that might help. Here's the [link](https://youtu.be/sqE-J8YJnpg).

[Michael Mao](https://hashnode.com/@krmao)

[Jun 26, 2022](https://hashnode.com/posts/state-persistence-techniques-for-the-flutter-bottom-navigation-bar/624be78b2b09bb392ea5c53a/comment/62b6a8bdb86f939ac81b4d01#reply-62b7fb89b86f939ac81b6dd0)

[Nikki Goel](https://hashnode.com/@nicks101)

sorry about that, my way found not work today!

the youtobe video the future property is no argument, but I need multi FutureBuilder with List.generate, I can't use it.

```
Expanded(
                    child: Container(
                        color: const Color(0xFFF0F0F0),
                        child: _homePageController == null
                            ? Container()
                            : PageView(
                                onPageChanged: (pageIndex) {
                                },
                                physics: const ClampingScrollPhysics(),
                                controller: _homePageController,
                                children: List.generate(_homeRecommendDefaultCategoryList.length, (index) {
                                  return FutureBuilder<dynamic>(
                                      future: _homeRequestGoodsByRecommendCategory(index),
                                      builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
```

[Michael Mao](https://hashnode.com/@krmao)

[Jun 26, 2022](https://hashnode.com/posts/state-persistence-techniques-for-the-flutter-bottom-navigation-bar/624be78b2b09bb392ea5c53a/comment/62b6a8bdb86f939ac81b4d01#reply-62b80736b86f939ac81b6ed6)

I find a newer way to final fix this! change FutureBuilder code into a child StatefulWidget with AutomaticKeepAliveClientMixin, and wrap \_homeRequestGoodsByRecommendCategory(index) to a fix property \_requestFuture with a fix index.

> that is PageView nested PageView all themself's children need AutomaticKeepAliveClientMixin. and FutureBuilder's future need a origin property.

```
children: List.generate(_homeRecommendDefaultCategoryList.length, (index) {
                                  return HomeItemPage(
                                      index: index,
                                      homeRecommendDefaultCategoryList: _homeRecommendDefaultCategoryList,
                                      homeTabBarThresholdNotifier: _homeTabBarThresholdNotifier);
                                }))))
```

and the HomeItemPage should be

```
class HomeItemPage extends StatefulWidget {
  final int index;
  final dynamic homeRecommendDefaultCategoryList;
  final ValueNotifier<double> homeTabBarThresholdNotifier;

  const HomeItemPage({Key? key, required this.index, required this.homeRecommendDefaultCategoryList, required this.homeTabBarThresholdNotifier})
      : super(key: key);

  @override
  HomeItemPageState createState() => HomeItemPageState();
}

class HomeItemPageState extends State<HomeItemPage> with AutomaticKeepAliveClientMixin {
  late Future _requestFuture;

  @override
  void initState() {
    super.initState();
    _requestFuture = _homeRequestGoodsByRecommendCategory();
    print("--> homeItem initState");
  }

  @override
  void dispose() {
    print("--> homeItem dispose");
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    print("--> homeItem build");
    return FutureBuilder<dynamic>(
        future: _requestFuture,
```