How to load multiple future in flutter - flutter

Question

I'm creating a flutter application that needs to load email and theme from preferences settings. Loading email will check whether the user is authenticated while loading the theme will check whether the theme is light or dark mode. The problem I'm facing is that dark or light mode is getting applied after the interface has been created. I know that using the future builder can help solve this but I have no idea on how to use it in theme.dart file. Any help please.
theme.dart file
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
CustomTheme customTheme = CustomTheme();
class CustomTheme extends ChangeNotifier {
static bool isDarkTheme = false;
ThemeData get currentTheme => isDarkTheme
? ThemeData(
brightness: Brightness.dark,
scaffoldBackgroundColor: Colors.grey.shade900,
primaryColor: Colors.white,
accentColor: Colors.blue,
iconTheme: const IconThemeData(color: Colors.white, opacity: 0.8),
)
: ThemeData(
brightness: Brightness.light,
scaffoldBackgroundColor: Colors.white,
primaryColor: Colors.black,
accentColor: Colors.blue,
iconTheme: const IconThemeData(color: Colors.black, opacity: 0.8),
dividerColor: Colors.black12,
);
CustomTheme() {
loadPrefs();
}
void toggleTheme() {
isDarkTheme = !isDarkTheme;
savePrefs();
notifyListeners();
}
void savePrefs() async {
SharedPreferences _prefs = await SharedPreferences.getInstance();
_prefs.setBool('theme', isDarkTheme);
}
void loadPrefs() async {
SharedPreferences _prefs = await SharedPreferences.getInstance();
isDarkTheme = _prefs.getBool('theme') ?? false;
notifyListeners();
}
}
main.dart file
import 'package:chatapp/home.dart';
import 'package:chatapp/login.dart';
import 'package:chatapp/themes.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:shared_preferences/shared_preferences.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
Future<String> getSharedPrefs() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
String _email = prefs.getString('email') ?? '';
return _email;
}
#override
void initState() {
super.initState();
customTheme.addListener(() {
setState(() {});
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: customTheme.currentTheme,
home: FutureBuilder<String>(
future: getSharedPrefs(),
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Scaffold(
body: Center(
child: CircularProgressIndicator(),
),
);
} else if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasError) {
return const Text('Error');
} else if (snapshot.hasData && snapshot.data!.isNotEmpty) {
return Home();
} else {
return Login();
}
} else {
return Text('State: ${snapshot.connectionState}');
}
},
),
);
}
}

Answer 1

Try below code hope its helpful to you.used Future.wait([]) method for that refer here
FutureBuilder(
future: Future.wait([
getSharedPrefs(),
// call your extra future method here
]),
builder:
),