How to determine if a Widget is Stateful or Stateless in Flutter?

Question

I understand the basics here. If my data is going to change it should be stateful so I can update it otherwise stateless.

My question is more oriented in a bottomnavigation scenario. So, I have 3 tabs in my bottomnavigator (Profile, Home, Settings) . The entry point is Home which is a stateful Widget.

The other two Widgets I want to basically populate the information in them with the api data.

The Problem If I am in the Home screen and I click in the Profile icon in the bottomnavigator it does not load the information from the api. Even if it does, If I click in the Home screen and click again in the Profile screen to go back, the information does not refresh.

Solution So what would be the way to handle this? I expect that if I click in each of the bottomnavigation items the information is refreshed with the api data. Is this because the Widgets are Stateful or Stateless or I am missing something else?

Answer 1

By default, the pages in Bottom Navigation bar refreshes/rebuild when they are are tapped on. Make sure a few things in your app-

1. You are not using a "indexed stack" or any similar widget for these pages. These widgets preserves the state of your page
2. The navigation is taking place on its own. You have not defined any Navigator.Push etc for tap's in navigation bar.
3. You should call the API inside the initState method of that particular page. Like if you need profile details, call the api for profile information inside the initState method of Profile Tab and not the "Scaffold" page which has the navigation bar.