Flutter good coding practice

Question

I'm developing a flutter app, in my app I have a userData model to store data about a user. I then have a profile page where it is diplayed almost all of that data. I use Firebase to store those userData objects.

As I have it right now, I have a futureBuilder() for every widgets that needs data about a user, i.e I have a text() widget that displays the user name, inside a futureBuilder which the future is a method that retrieves the name field from firebase doc.

I was wondering if it was better to have the whole page wrapped in a futureBuiler which the future in a method that retrieves the userData object instead of a field at a time, and then build all widgets inside that futureBuilder.

body: Stack(   
        children: [
          _profileBanner(), //futureBuilder
          _whiteBackgroundContainer(),
          _profileImage(), //futureBuilder
          _userName(), //futureBuilder
          _backArrow(),
          _profilePageButtons(),
          _reputationBuble(), //futureBuilder
          _friendsAndGamesCounter(),//futureBuilder
          _personnaInformationRow(), //futureBuilder
          _divider(),
          _biographyTile(), //futureBuilder
          _sportsList(), //futureBuilder
        ],
      )

Answer 1

Well yes, when you are working with APIs or remote databases in general you need to use the approach that uses the least amount of HTTP calls, in this instance if you can fetch the user data all at once do that and have 1 big widget "the profile screen" in a future builder and use the response to populate your UI

PS: avoid using functions for UI elements instead use stateless classes