Use Provider to provide BLoCs globally to whole flutter module - flutter

Question

https://pub.dev/packages/provider
Can I use Provider to provide blocs globally to all widgets down the tree without MaterialApp? I tried to provide BLoC to a page, but when I'm navigating to the next page, BloC isn't found. So should I provide it whenever I'm navigating to a new page or is there a solution to provide it globally without MaterialApp?
Currently I'm doing it this way
Provider
|_MaterialApp
|_MyPage1 (from which you can navigate to MyPage2...3)
This approach works, and all pages can access provided BLoC.
But if use this approach
Provider
|_MyPage1 (from which you can navigate to MyPage2...3)
MyPage2, MyPage3 can't find provided BLoC. BLoC only can be found on MyPage1

Answer 1

You can achieve this by using the builder property of a MaterialApp.
lib/main.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class SomeBloc {
final String someValue;
SomeBloc(this.someValue);
void dispose() {}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
SomeBloc _someBloc = SomeBloc("someValue");
#override
Widget build(BuildContext context) {
return MaterialApp(
builder: (context, widget) => Provider<SomeBloc>(
create: (_) => _someBloc,
dispose: (_, bloc) => bloc.dispose(),
child: widget,
),
initialRoute: '/first-page',
routes: <String, WidgetBuilder>{
'/first-page': (context) => FirstPage(),
'/second-page': (context) => SecondPage(),
},
);
}
}
class FirstPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
SomeBloc _someBloc = Provider.of<SomeBloc>(context);
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(_someBloc.someValue),
RaisedButton(
child: Text("Open second page"),
onPressed: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => SecondPage(),
),
),
)
],
),
),
);
}
}
class SecondPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
SomeBloc _someBloc = Provider.of<SomeBloc>(context);
return Scaffold(
body: Center(
child: Text(_someBloc.someValue),
),
);
}
}
Per the documentation,
home
The difference between using home and using builder is that the home subtree is inserted into the application below a Navigator.
builder
... the widget returned from builder is inserted above the app's Navigator (if any).
If you want your "blocs" to be provided on all of your routes, you have to provide those above the Navigator widget.
That's why this simply works:
return Provider(
create: (_) => _someBloc,
child: MaterialApp(
home: FirstPage(),
),
);
In this setup above, Provider is on top of the Navigator widget.
And this doesn't:
return MaterialApp(
home: Provider(
create: (_) => _someBloc,
child: FirstPage(),
),
);
_someBloc will only be accessible to the FirstPage widget.
Hope this helps.