Flutter state management - flutter

If I only want a widget and its children have specific Provider but not in whole app, how do I achieve that ?
// not this
void main() {
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider(create: (context) => CartModel()),
Provider(create: (context) => SomeOtherClass()),
],
child: MyApp(),
),
);
}

You just need to wrap MultiProvider to the Widget you want.
Like this:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MultiProvider(
providers: [Provider(create: (context) => TestModel(index: 1)),],
child: MyHomePage(title: 'Flutter Demo Home Page')
),
);
}
}

You can wrap this widget with the provider and can be used as
final _myProvider=Provider.of<MyProvider>(context, listen: false);
or using
Consumer<MyProvider>(
builder: (BuildContext context, MyProvider myProvider, Widget child) {
return child;
),

Related

Could not find the correct Provider above the BlocListener Widget

I'm trying to use Bloc provider for user authentication in my flutter app. When I try to access the data i'm always getting this error even though I double checked all the files.
This is the error i'm getting:
Error: Could not find the correct Provider<StateStreamable<Object?>> above this
BlocListener<StateStreamable<Object?>, Object?> Widget
This happens because you used a `BuildContext` that does not include the provider
main.dart:
void main() async {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MultiBlocProvider(
providers: [
BlocProvider(
create: (context) => AuthBloc(LoginInitState(), AuthRepository()))
],
child: MaterialApp(
title: 'Flutter app',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity),
home: const LoginPage(),
),
);
}
}
parts from login.dart:
#override
void initState() {
authBloc = BlocProvider.of<AuthBloc>(context);
super.initState();
}
######################################################
return Scaffold(
backgroundColor: Colors.grey[300],
body: BlocListener(
listener: (context, state) {
if (state is UserLoginSuccessState) {
Navigator.push(context,
MaterialPageRoute(builder: (context) => const HomeScreen()));
}
},
child: SafeArea...
I'm still new to flutter and struggling with the state management part, I'd be glad if anybody can help!
In your BlocListener you're missing the State and the Bloc
Here's what I mean
BlocListener<AuthBloc, AuthState>(
listener: (context, state) {
if (state is UserLoginSuccessState) {
Navigator.push(context,
MaterialPageRoute(builder: (context) => const HomeScreen()));
}
},
child: SafeArea...

How do I handle two packages that require MaterialApp as child in flutter?

I am using this screen util package that helps handle the responsiveness of the app on different screen size and I am also using provider both of them require MaterialApp as child but I don't know how to go about it instead I did this and now I'm having some issues navigating in the app.
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MultiProvider(providers: [
ChangeNotifierProvider(create: (_)=>
TestimonyVeiwModel()
),
],
child: ScreenUtilInit(
builder:() => MaterialApp(
title: 'Stea app',
theme: ThemeData();
I prefer using this way
return ScreenUtilInit(
builder: () => MultiProvider(
providers: [...],
child: MaterialApp(
//...
),
),
);

Using more than one provider in a flutter app

I have started using PROVIDER to manage state in my app. I followed tutorials and wrapped my Material app with ChangeNotifierProvider.
Here's the code :
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (BuildContext context) => ListsProvider(),
child: MaterialApp(
title: 'WordsApp',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: StartingPage.id,
routes: {
StartingPage.id: (context) => StartingPage(),
RegistrationScreen.id: (context) => RegistrationScreen(),
},
),
);
}
}
This provider called "ListsProvider" takes care of "providing" lists that need to be displayed on different screens.
I have now created a second provider which I called "user_data_provider" and I now need to add it to my app too. It will take care of providing user data to many different screens.
How can I do that ?
To achive this you can use Multiprovider as shown below
Add this to the top of your app. If you need these obj everywhere.
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider<user_data_provider>(
create: (_) => user_data_provider(),
),
ChangeNotifierProvider<ListsProvider>(
create: (_) => ListsProvider(),
),
],
child: Builder(
builder: (BuildContext context) {
return MaterialApp(
//YOur code goes here
);
},
),
);

How do have multiple provider in changenotifierprovider?

I'm new to Flutter. I have encountered the following problem where I have no idea how to add another changenotifierprovider to my app.dart. Before that I already have the EntryProvider(), Now I wish to add another provider called EnterProvider(). Below is my coding for app.dart:
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => EntryProvider(),
child: MaterialApp(
home: WelcomeBackPage(),
theme: ThemeData(
accentColor: Colors.orangeAccent,
primaryColor: Colors.black,
textTheme: GoogleFonts.openSansTextTheme(),
),
debugShowCheckedModeBanner: false,),
);
}
}
Could anyone help me out on this?
You can try MultiProvider .
MultiProvider(
providers: [
Provider<Something>(create: (_) => Something()),
Provider<SomethingElse>(create: (_) => SomethingElse()),
Provider<AnotherThing>(create: (_) => AnotherThing()),
],
child: someWidget,
)

What does this means in flutter?

I come across these codes while exploring flutter as a beginner
FIRST CODE
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Helo world',
theme: ThemeData(primarySwatch: Colors.cyan),
home: HomePage(),
routes: {
"/fullPage": buildFullPage,
"/form": buildFormPage,
"/view": buildViewPage,
},
);
}
SECOND CODE
void main() => runApp(MaterialApp(
title: 'GridView Demo',
home: SplashScreen(),
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.red,
accentColor: Color(0xFF761322),
),
routes: <String, WidgetBuilder>{
SPLASH_SCREEN: (BuildContext context) => SplashScreen(),
HOME_SCREEN: (BuildContext context) => HomeScreen(),
//GRID_ITEM_DETAILS_SCREEN: (BuildContext context) => GridItemDetails(),
},
));
I NEED YOUR HELP IN KNOWING THESE MULTIPLE ROUTING
What these mean in FIRST CODE
home: HomePage(),
routes: {
"/fullPage": buildFullPage,
"/form": buildFormPage,
"/view": buildViewPage,
},
What these mean in SECOND CODE
home: SplashScreen(),
routes: <String, WidgetBuilder>{
SPLASH_SCREEN: (BuildContext context) => SplashScreen(),
HOME_SCREEN: (BuildContext context) => HomeScreen(),
//GRID_ITEM_DETAILS_SCREEN: (BuildContext context) => GridItemDetails(),
},