dart - Flutter FutureBuilder called everytime PageView swap pages causing laggy performances - flutter

Question

my FutureBuilder methods return my app everytimes I swap pages.
It cause very bad performances when i navigate between pages.
I have checked solutions on post already in this forum, tried to use provider (didn't fixed my problem), I also tried to move my FutureBuilder into my initState so it's called only one time but didn't manage to make it.
For more details, I printed a line when firebase initialization from FutureBuilder is done, and I witness that everytime i swap pages it print my lane again
My main.dart file:
NotificationService notificationService = NotificationService();
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
notificationService.init();
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
runApp(AppWrapper());
}
class AppWrapper extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _AppWrapperState();
}
}
class _AppWrapperState extends State<AppWrapper> {
#override
Widget build(BuildContext context) {
return OverlaySupport.global(
child: MaterialApp(
theme: ThemeData(
textTheme: GoogleFonts.openSansTextTheme(
Theme.of(context).textTheme,
)),
debugShowCheckedModeBanner: false,
home: App()),
);
}
}
/// We are using a StatefulWidget such that we only create the [Future] once,
/// no matter how many times our widget rebuild.
/// If we used a [StatelessWidget], in the event where [App] is rebuilt, that
/// would re-initialize FlutterFire and make our application re-enter loading state,
/// which is undesired.
class App extends StatefulWidget {
// Create the initialization Future outside of `build`:
#override
_AppState createState() => _AppState();
}
class _AppState extends State<App> {
/// The future is part of the state of our widget. We should not call `initializeApp`
/// directly inside [build].
bool? _isLoggedIn;
final Future<FirebaseApp> _initialization = Firebase.initializeApp();
#override
void initState() {
// initIsLoggedIn();
super.initState();
_asyncMethod();
}
void _asyncMethod() async {
try {
// Get values from storage
final storage = new FlutterSecureStorage();
String isLoggedIn = await storage.read(key: "isLoggedIn") ?? "";
if (isLoggedIn == "true") {
//If the user seems logged in, we check it by trying to authenticate
String mail = await storage.read(key: "mail") ?? "";
String password = await storage.read(key: "password") ?? "";
UserResponse userResponse = await APIUser().login(mail, password);
User? user = userResponse.user;
if (user != null) {
setState(() {
_isLoggedIn = true;
});
} else {
//If we cannot connect the user with the stored mail and password, then we redirect the user to the login page
setState(() {
_isLoggedIn = false;
});
print("returning to login page");
Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (context) => LoginPage()),
);
}
} else {
//If we cannot connect the user with the stored mail and password, then we redirect the user to the login page
setState(() {
_isLoggedIn = false;
});
print("returning to login page");
Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (context) => LoginPage()),
);
}
} catch (e) {
//print the error and redirect the user to the login page
print(e);
Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (context) => LoginPage()));
}
}
//The following variables are used to handle the navigation between the 3 main pages
List<Widget> pages = [
SettingsPage(key: PageStorageKey('settings')),
HomePage(key: PageStorageKey('home')),
AccountPage(
key: PageStorageKey('account'),
),
];
int _selectedIndex = 1;
// void _changePage(int index) {
// setState(() {
// _selectedIndex = index;
// });
// }
#override
Widget build(BuildContext context) {
return FutureBuilder(
// Initialize FlutterFire:
future: _initialization,
builder: (context, snapshot) {
// Check for errors
if (snapshot.hasError) {
return somethingWentWrongWidget();
}
// Once complete, show your application
if (snapshot.connectionState == ConnectionState.done &&
_isLoggedIn != null) {
print("Initialize FireBase done");
return appContentWidget();
}
// Otherwise, show something whilst waiting for initialization to complete
print("loadingpage showing to let initialization load");
return LoadingPage();
},
);
}
Widget somethingWentWrongWidget() {
return Center(
child: Text('Someting went wrong', textDirection: TextDirection.ltr),
);
}
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
PageController _pageController = PageController(
initialPage: 1,
);
final _bottomNavigationItems = [
BottomNavigationBarItem(
activeIcon: ImageIcon(
AssetImage("assets/settingsActive.png"),
size: 32,
),
icon: ImageIcon(
AssetImage("assets/settings.png"),
size: 32,
color: Colors.black,
),
label: ''),
BottomNavigationBarItem(
activeIcon: ImageIcon(
AssetImage("assets/dashboardActive.png"),
size: 32,
),
icon: ImageIcon(
AssetImage("assets/dashboard.png"),
size: 32,
color: Colors.black,
),
label: ''),
BottomNavigationBarItem(
activeIcon: ImageIcon(
AssetImage("assets/userActive.png"),
size: 32,
color: Colors.black,
),
icon: ImageIcon(
AssetImage("assets/user.png"),
size: 32,
color: Colors.black,
),
label: ''),
];
Widget appContentWidget() {
double bottomNavbarHeight = 70;
if (Platform.isIOS) {
bottomNavbarHeight = 90;
}
// check if the user is logged in, if not go to login page
bool loggedIn = _isLoggedIn ?? false;
if (!loggedIn) {
return LoginPage();
} else {
return WillPopScope(
onWillPop: () {
return Future.value(false);
},
child: Scaffold(
key: _scaffoldKey,
body: PageView(
physics: AlwaysScrollableScrollPhysics(),
onPageChanged: (int index) {
setState(() {
_selectedIndex = index;
});
},
controller: _pageController,
pageSnapping: true,
children: [
SettingsPage(key: PageStorageKey('settings')),
HomePage(key: PageStorageKey('home')),
AccountPage(
key: PageStorageKey('account'),
),
],
),
bottomNavigationBar: Container(
height: bottomNavbarHeight,
decoration: BoxDecoration(
boxShadow: [BoxShadow(color: Colors.grey.shade200)]),
child: Theme(
data: ThemeData(
brightness: Brightness.light,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
elevation: 20,
backgroundColor: Colors.white,
selectedFontSize: 0,
//As the label is obligatory, we give it a size of zero
unselectedFontSize: 0,
//As the label is obligatory, we give it a size of zero
items: _bottomNavigationItems,
selectedItemColor: Colors.black,
currentIndex: _selectedIndex,
onTap: (int index) {
_pageController.animateToPage(index,
duration: Duration(milliseconds: 500),
curve: Curves.easeInCubic);
},
),
),
),
),
);
}
}
}
What i would like to achieve is that FutureBuilder initialize only on initState.

Answer 1

you're using await Firebase.initializeApp() already in your main function, why would you need to initialize it one more time in the FutureBuilder ?
On a more general note, your FutureBuilder function is called many times because of the setState on your nav bar, which recalls the build function where your FutureBuilder is.
Whenever you face that, I suggest you split your widget, by having:
-a StatelessWidget containing your FutureBuilder
-a StatefulWidget containing all the display and logic needed.