CODEWITHSUNDEEP
flutterwidgetstatebottomnavigationview
Nicolas O
Nicolas O

Reputation: 151

Flutter - Bottom Navigation - How to make page rebuild?

I have an app with three pages, which users can navigate using a bottom navigation bar. Nonetheless, I want one of the three pages to rebuild as users come back to it (thus: delete the current state and re-render it from scratch).

My code to navigate is as follows.

Three pages options:

static List<Widget> _widgetOptions = <Widget>[
    PostFeed(),
    Profile(),
    HabitList(),
  ];

Switch between page options (later in bottom nav):

 void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

In Scaffold:

body: _widgetOptions.elementAt(_selectedIndex),
bottomNavigationBar: BottomNavigationBar(
  items: [
  BottomNavigationBarItem(
    icon: Icon(Icons.home),
  ),
  BottomNavigationBarItem(
    icon: Icon(Icons.person),
  ),
  BottomNavigationBarItem(
    icon: Icon(Icons.list),
  ),
],
currentIndex: _selectedIndex,
  onTap: _onItemTapped,
),

Using this code, the state of all pages stays static as I switch between them. I would like to load only one (PostFeed) now dynamically when a user click on the specific bottom navigation icon.

Does anyone now how to do this?

Many thanks in advance!

Upvotes: 0

Views: 1437

Answers (1)

Marcel
Marcel

Reputation: 173

I hope i understand your Question. I have the following Implementation in my own app and this rebuilds the pages in the _showPage(int index) function where the different pages are called (QuestionPage, OwnQuestionPage and ProfilPage).

    class OpinionPage extends StatefulWidget {
  @override
  _OpinionPageState createState() => _OpinionPageState();
}

class _OpinionPageState extends State<OpinionPage> {
  int currentPageNumber;
  final List<Widget> pages = [
    QuestionPage(),
    OwnQuestionPage(),
    ProfilPage(),
  ];
  Widget currentPage = QuestionPage();
  final PageStorageBucket bucket = PageStorageBucket();

  @override
  void initState() {
    currentPageNumber = 0;
    SystemSettings.allowOnlyPortraitOrientation();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageStorage(bucket: bucket, child: currentPage),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.question_answer, color: currentPageNumber == 0 ? primaryBlue : Colors.grey),
            title: Text(
              'Fragen',
              style: TextStyle(color: currentPageNumber == 0 ? primaryBlue : Colors.grey),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.add_circle, color: currentPageNumber == 1 ? primaryBlue : Colors.grey),
            title: Text(
              'Meine Fragen',
              style: TextStyle(color: currentPageNumber == 1 ? primaryBlue : Colors.grey),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person, color: currentPageNumber == 2 ? primaryBlue : Colors.grey),
            title: Text(
              'Profil',
              style: TextStyle(color: currentPageNumber == 2 ? primaryBlue : Colors.grey),
            ),
          ),
        ],
        onTap: (int index) => _showPage(index),
      ),
    );
  }

  void _showPage(int index) {
    setState(() {
      switch (index) {
        case 0:
          currentPage = QuestionPage();
          currentPageNumber = 0;
          break;
        case 1:
          currentPage = OwnQuestionPage();
          currentPageNumber = 1;
          break;
        case 2:
          currentPage = ProfilPage();
          currentPageNumber = 2;
          break;
      }
    });
  }
}

Upvotes: 1

Related Questions