How to use Multiple Providers in flutter - flutter

I'm trying to use Multiple providers in my application, but i'm facing some compile time error at builder by using below code
Code
ChangeNotifierProvider(builder: (_) => FirstProvider()),
ChangeNotifierProvider(builder: (_) => SecondProvider()),


you can use MultiProvider to do so. as following.
MultiProvider(
providers: [
ChangeNotifierProvider(builder: (_) => FirstProvider()),
ChangeNotifierProvider(builder: (_) => SecondProvider()),
],
child: someWidget,
)


Hey builder was deprecated you can refer this link for more info Builder Deprecation
We can use Multiple providers like this
MultiProvider(
providers: [
ChangeNotifierProvider<ProductDataProvider>(
create: (_) => ProductDataProvider()),
ChangeNotifierProvider<AuthenticationProvider>(
create: (_) => AuthenticationProvider()),
],
child: Container())


You can use it like this:
MultiProvider(
providers: [
ChangeNotifierProvider(create: (context) => CartModel()),
Provider(create: (context) => SomeOtherClass()),
],
child: MyApp(),
),

Related

Extract routes into separate dart files

I have a list of routes with more than 50 lines and I wish to simplify it because it is very long and messy. Below is the example of current routes. Is there anyway I can extract it into separate files? For example, put //2 in routes2.dart file and //3 in routes3.dart file? How do I call them back in MyApp?
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider( create: (_) => SettingsNotifier()),
ChangeNotifierProvider(create: (_) => InterstitialTimerNotifier()),
ChangeNotifierProvider(create: (_) => InterstitialReadyNotifier()),
ChangeNotifierProvider(create: (_) => PolicyNotifier()),
],
child: MaterialApp(
themeMode:ThemeMode.system,
theme: ThemeClass.lightTheme,
darkTheme: ThemeClass.darkTheme,
initialRoute: HomeScreen.id,
routes: {
//1. Home
HomeScreen.id: (context) => HomeScreen(),
//2. Puasa
PuasaScreen.id: (context) => PuasaScreen(),
DoaBerbuka.id: (context) => DoaBerbuka(),
NiatPuasa.id: (context) => NiatPuasa(),
WaktuMustajabDoa.id: (context) => WaktuMustajabDoa(),
PuasaPengenalanScreen.id: (context) => PuasaPengenalanScreen(),
PuasaReference.id: (context) => PuasaReference(),
//3. Solat Tarawih
TarawihScreen.id: (context) => TarawihScreen(),
TarawihPengenalanScreen.id: (context) => TarawihPengenalanScreen(),
TarawihNiat.id:(context) => TarawihNiat(),
TarawihTakrif.id: (context) => TarawihTakrif(),
TarawihDalilScreen.id: (context) => TarawihDalilScreen(),
TarawihHukum.id: (context) => TarawihHukum(),
TarawihReference.id: (context) => TarawihReference(),
TarawihWaktuSolat.id: (context) => TarawihWaktuSolat(),
TarawihKelebihanScreen.id: (context) => TarawihKelebihanScreen(),
TarawihBilanganRakaat.id: (context) => TarawihBilanganRakaat(),
Tarawih8Screen.id: (context) => Tarawih8Screen(),
Tarawih8TatacaraScreen.id: (context) => Tarawih8TatacaraScreen(),
//4. Solat Witir
Tarawih8WitirScreen.id: (context) => Tarawih8WitirScreen(),
Tarawih8WitirRakaat1.id: (context) => Tarawih8WitirRakaat1(),
Tarawih8WitirRakaat2.id: (context) => Tarawih8WitirRakaat2(),
Tarawih8WitirRakaat3.id: (context) => Tarawih8WitirRakaat3(),
TarawihTahlil.id: (context) => TarawihTahlil(),
//There're more routes after this
}),
);
}
}

routes: takes Map<String, WidgetBuilder>, you can create
a dart file and create a map like,
final Map<String, WidgetBuilder> route2 = {
PuasaScreen.id: (context) => PuasaScreen(),
.....
};
same goes for routes3.dart.
and you can add theses routes on MaterialApp like
return MaterialApp(
routes: {
HomeScreen.id: (context) => HomeScreen(),
...route2, /// variable name
...route3,
},
);

This is the updated code after applying suggestions from #OMiShah.
I created new dart files for the routes. For example, route_puasa.dart:
import ...
Map routes_puasa = {
PuasaScreen.id: (context) => PuasaScreen(),
DoaBerbuka.id: (context) => DoaBerbuka(),
NiatPuasa.id: (context) => NiatPuasa(),
WaktuMustajabDoa.id: (context) => WaktuMustajabDoa(),
PuasaPengenalanScreen.id: (context) => PuasaPengenalanScreen(),
PuasaReference.id: (context) => PuasaReference(),
};
Then call it in MyApp using ... Spread Operator
routes: {
...routes_puasa,
...route_tarawih,
...routes_tarawih20,
...routes_zakat,
}
Works perfectly!

Flutter BLOC and Provider how to register them together

I'm writing an app using BLOC architecture and registered bloc providers like this in the main.dart:
runApp(MultiBlocProvider(providers: [
BlocProvider<OrderBloc>(
create: (context) {
return OrderBloc()..add(OrderInitialEvent());
},
),
BlocProvider<AuthenticationBloc>(
create: (context) {
return AuthenticationBloc(userService: userService)..add(AppStarted());
},
),
...
], child: MyApp()));
Now I need to use Provider approach along with BLOC but not sure how to register it? Is it possible? Thanks

You can just nest them:
runApp(MultiBlocProvider(providers: [
BlocProvider<OrderBloc>(
create: (context) {
return OrderBloc()..add(OrderInitialEvent());
},
),
BlocProvider<AuthenticationBloc>(
create: (context) {
return AuthenticationBloc(userService: userService)..add(AppStarted());
},
),
...
],
child:
MultiProvider(
providers: [
Provider<Something>(create: (_) => Something()),
Provider<SomethingElse>(create: (_) => SomethingElse()),
Provider<AnotherThing>(create: (_) => AnotherThing()),
],
child: MyApp(),
)));

How to use GraphQLProvider inside MultiProvider?

MultiProvider(
providers: [
ChangeNotifierProvider(
create: (context) => AuthProvider(authService: AuthService()),
),
GraphQLProvider(...),
],
)
The element type GraphQLProvider can't be assigned to the list type SingleChildWidget.

Flutter ChangeNotifierProvider the parameter 'update' is required

with the latest updates I got this:
warning: The parameter 'update' is required. . (missing_required_param
at [pos_mobile] lib\main.dart)
return MultiProvider(
providers: [
ChangeNotifierProvider.value(
value: Auth(),
),
ChangeNotifierProxyProvider<Auth, Operatori>( // here I got the warning
builder: (ctx, auth, prevData) => Operatori(auth.token, auth.userId,
prevData == null ? [] : prevData.operatori),
),
thanks

Check the ChangeNotifierProxyProvider doc
It should be :
ChangeNotifierProxyProvider<Foo, MyChangeNotifier>(
create: (_) => MyChangeNotifier(),
update: (_, foo, myNotifier) => myNotifier
..foo = foo,
child: ...
);

Flutter using StreamingSharedPreferences in MultiProvider

this is simple of implementation for StreamingSharedPreferences using Provider
Future<void> main() async {
final preferences = await StreamingSharedPreferences.instance;
final settings = MyAppSettings(preferences);
runApp(
Provider<MyAppSettings>.value(value: settings, child: MyApp()),
);
}
as i have another multiple Provider in application such as:
runApp(
MultiProvider(providers: [
Provider(builder: (_) => database.userTableDao),
Provider(builder: (_) => database.postsTableDao),
Provider(builder: (_) => database.postsTableDao),
Provider(
builder: (_) => ApiService.create(),
dispose: (_, ApiService) => service.client.dispose(),
)
], child: OKToast(child: MyHomePage())),
);
i'm not sure how can make StreamingSharedPreferences provider inside them, for example:
MultiProvider(providers: [
...
Provider<ApplicationSettings>.value(value: settings),
...
], child: OKToast(child: MyHomePage())),

in this code i used instance of StreamingSharedPreferences.instance into main function and after that i added inside MultiProvider, for example:
final settings = ApplicationSettings( await StreamingSharedPreferences.instance );
MultiProvider(providers: [
...
Provider( builder: (_) => settings ),
...
], child: OKToast(child: MyHomePage())),