In appbar I am trying to show profile icon after logged. When app start, appbar show profile icon, but at the same time in debug console give me an error 'A build function returned null'. When open profile page and return back, still the same error 'returned null' How to solve it?
class TestApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MultiBlocProvider(
providers: [
BlocProvider(
create: (context) => AuthBloc(
authService: AuthService())
..add(
AppStart(),
),
),
],
child: MaterialApp(
home: HomePage(),
),
);
}
}
homepage:
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: <Widget>[
BlocBuilder<AuthBloc, AuthState>(
builder: (context, state) {
if (state is Authenticated) {
return profileIcon(context);
} else if (state is UnAuthenticated) {
return logIn(context);
}
},
),
],
),
);
}
}
bloc
#override
AuthState get initialState => AuthState();
#override
Stream<AuthState> mapEventToState(AuthEvent event) async* {
if (event is AppStart) {
try {
final user = await AuthService.getCurrentUser();
yield Authenticated(user: user);
} catch (e) {
yield UnAuthenticated();
}
}
}
icon:
Widget profileIcon(context) {
return Row(
children: <Widget>[
FlatButton.icon(
icon: Icon(),
label: Text(
'Profile',
),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => UserProfile()));
},
),
],
);
}
state:
class Authenticated extends AuthState {
final FirebaseUser user;
Authenticated({this.user});
#override
List<Object> get props => [user];
}
class UnAuthenticated extends AuthState {
#override
List<Object> get props => [];
}
I'm not really sure but my guess is you have another state for your initialState which is not handled in the BlocBuilder. Even though you add AppStart event right after providing AuthBloc which will end up with either Authenticated or UnAuthenticated state, you still need to put another else for your initialState. Even if it's not the case, try to add an else statement
appBar: AppBar(
actions: <Widget>[
BlocBuilder<AuthBloc, AuthState>(
builder: (context, state) {
if (state is Authenticated) {
return profileIcon(context);
} else if (state is UnAuthenticated) {
return logIn(context);
} else {
return Container();
}
},
),
],
),
Related
i am trying to create a login page so that when i am logged-in, the Navigationrail Widget lets me access all its destinations. When logged off i can only access two pages.
I am using Provider in login.dart to triger a widget rebuild in main.dart .
here is the code.
login.dart
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:httptest/depand/XmlLogin.dart';
import 'package:httptest/main.dart';
void login(String userName, String passWord) async {
Response response;
Dio dio = Dio();
dio.interceptors.add(InterceptorsWrapper(
onResponse: (response, handler) {
var token = getToken.Transcribe(response.data);
LoginProvider obj = LoginProvider();
obj.providestate(true);
print(token);
print("logged in");
handler.next(response);
},
));
try {
//Http Post method
} catch (e) {
print(e);
}
}
class LoginProvider extends ChangeNotifier {
bool loginstate = false;
void providestate(bool val) {
loginstate = val;
print("loginstate changed to $loginstate");
notifyListeners();
}
}
main.dart
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
#override
State<MyHomePage> createState() => MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
var selectedIndex = 0;
List<Widget> pages = [Page0(), Page1(), Page2(), Placeholder()];
#override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
return Scaffold(
body: Row(
children: [
SafeArea(
child: ChangeNotifierProvider<LoginProvider>(
create: (context) => LoginProvider(),
child: Builder(
builder: (context) {
return Consumer<LoginProvider>(
builder: (context, provider, child) {
return NavigationRail(
extended: constraints.maxWidth >= 600,
minExtendedWidth: 200,
destinations: [
NavigationRailDestination(),
NavigationRailDestination(),
NavigationRailDestination(),
NavigationRailDestination()
],
selectedIndex: selectedIndex,
onDestinationSelected: (value) {
if (provider.loginstate) {
setState(() {
selectedIndex = value;
});
print("On");
} else {
if (value == 0 || value == 3) {
setState(() {
selectedIndex = value;
});
print("OFF");
}
}
},
);
});
},
),
)),
Expanded(
child: Scaffold(
body: IndexedStack(
index: selectedIndex,
children: pages,
),
),
),
],
),
);
});
}
}
the login goes through but i Still cant access pages 1 and 2.
it prints out 'loginstate changed to True' from login.dart.
To ensure access place a provider in a widget tree something like this:
void main() {
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider(create: (context) => LoginProvider()),
...
],
child: const MyApp(),
),
);
}
Then in child widgets access it using either Consumer to listen changes or Provider.of when just calling a method.
Consumer<LoginProvider>(
builder: (context, provider, child) {
...
},
)
Provider.of<LoginProvider>(context, listen: false).login(userName, passWord);
See Simple app state management for the full example.
i'm just getting started with flutter bloc.
i try to make state but it always goes to initial. what's the solution?
BLOC
class VisiMisiBloc extends Bloc<VisiMisiEvent, VisiMisiState> {
VisiMisiBloc(this.visiMisiRepository) : super(VisiMisiInitial());
final VisiMisiRepository visiMisiRepository;
#override
Stream<VisiMisiState> mapEventToState(VisiMisiEvent event) async* {
if (event is GetVisiMisiList) {
yield* _getVisiMisi(event, state);
}
}
Stream<VisiMisiState> _getVisiMisi(VisiMisiEvent event, VisiMisiState state) async* {
yield VisiMisiLoading();
try {
ResponseModel<VisiMisiModel> response = await visiMisiRepository.getVisiMisi();
print(response);
if (response.statusCode == 0) {
int insertedId = await visiMisiRepository.insertVisiMisi(response.data);
print(insertedId);
List<VisiMisiModel> visiMisiList = await visiMisiRepository.getAllVisiMisi();
yield VisiMisiLoaded(visiMisiList);
} else {
yield VisiMisiError(response.errorMessage);
}
} on Exception catch (e) {
yield VisiMisiError(e.toString());
}
}
}
STATE
part of 'visi_misi_bloc.dart';
abstract class VisiMisiState extends Equatable {
const VisiMisiState();
}
class VisiMisiInitial extends VisiMisiState {
const VisiMisiInitial();
#override
List<Object>get props => [];
}
class VisiMisiLoading extends VisiMisiState {
const VisiMisiLoading();
#override
List<Object>get props => [];
}
class VisiMisiLoaded extends VisiMisiState {
final List<VisiMisiModel> visiMisiModel;
const VisiMisiLoaded(this.visiMisiModel);
#override
List<Object> get props => [visiMisiModel];
}
class VisiMisiError extends VisiMisiState {
final String message;
const VisiMisiError(this.message);
#override
List<Object>get props => [message];
}
EVENT
part of 'visi_misi_bloc.dart';
abstract class VisiMisiEvent extends Equatable{
const VisiMisiEvent();
}
class GetVisiMisiList extends VisiMisiEvent {
#override
List<Object> get props => [];
}
REPOSITORY
abstract class VisiMisiRepository {
Future<int> insertVisiMisi(VisiMisiModel todo);
Future<ResponseModel<VisiMisiModel>> getVisiMisi();
Future<List<VisiMisiModel>> getAllVisiMisi();
}
REPOSITORY IMPL
class VisiMisiRepositoryImpl extends VisiMisiRepository {
final NetworkInfoImpl networkInfo;
final RemoteDataSource remoteDatasource;
final VisiMisiDao dao;
VisiMisiRepositoryImpl(this.networkInfo, this.remoteDatasource, this.dao);
#override
Future<ResponseModel<VisiMisiModel>> getVisiMisi() {
return remoteDatasource.visiMisi();
}
#override
Future<int> insertVisiMisi(VisiMisiModel todo) {
return dao.upsert(todo);
}
#override
Future<List<VisiMisiModel>> getAllVisiMisi() {
return dao.getAll(userTABLE, VisiMisiModel.fromJson);
}
}
REMOTE DATASOURCE
Future<ResponseModel<VisiMisiModel>> visiMisi() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
String auth_token = prefs.getString("auth_token");
try {
final response = await httpClient.get(ServiceUrl.visiMisi, auth_token);
if(response.statusCode != 200){
throw new Exception('Error getting visi misi');
}
return ResponseModel<VisiMisiModel>.fromJson(response, VisiMisiModel.fromJson);
}catch(e){
print(e);
}
}
VIEW
class VisiMisiPage extends StatefulWidget {
#override
_VisiMisiPageState createState() => _VisiMisiPageState();
}
class _VisiMisiPageState extends State<VisiMisiPage> {
VisiMisiRepository repository;
#override
void initState(){
super.initState();
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: AppColor.white,
appBar: AppBar(
title: Text("VISI & MISI", style: TextStyle(fontSize: 16, color: AppColor.deepCerulean),),
backgroundColor: Colors.white,
elevation: 0,
automaticallyImplyLeading: false,
brightness: Brightness.light,
leading: IconButton(
icon: new Icon(Icons.arrow_back, color: AppColor.deepCerulean,),
onPressed: () => Navigator.of(context).pop(),
),
),
body: BlocProvider<VisiMisiBloc>(
create: (_) => VisiMisiBloc(repository),
child: BlocBuilder<VisiMisiBloc, VisiMisiState>(
builder: (context, state) {
if (state is VisiMisiInitial) {
//BlocProvider.of<VisiMisiBloc>(context).add(GetVisiMisiList());
return Center(child: Text(state.toString()),);
} else if (state is VisiMisiLoading) {
return Center(child: CircularProgressIndicator(),);
} else if (state is VisiMisiLoaded) {
return SingleChildScrollView(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_visiWidget(context, state),
SizedBox(height: 20,),
_misiWidget(context),
SizedBox(height: 30,),
_footerWidget(context)
],
),
),
);
} else if (state is VisiMisiError) {
return Center(child: Text(state.message),);
}
}
)
),
)
);
}
void _onWidgetDidBuild(Function callback) {
WidgetsBinding.instance.addPostFrameCallback((_) {
callback();
});
}
}
I get an Unhandled Exception: Unhandled error NoSuchMethodError: The method 'getVisiMisi' was called on null.
in view, the state shows in VisiMisiInitial, and doesn't want to update to VisiMisiLoading
try to initialize the repository like so:
class _VisiMisiPageState extends State<VisiMisiPage> {
VisiMisiRepository repository;
#override
void initState(){
super.initState();
repository = VisiMisiRepositoryImpl( parameters here ); // add this one
}
To initialize repository, you should use RepositoryProvider.
For example, something like that
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MultiRepositoryProvider(
providers: [
RepositoryProvider<UserRepository>(
create: (context) => UserRepository(),
),
],
child: MultiBlocProvider(
providers: [
BlocProvider<LoginBloc>(
create: (context) => LoginBloc(context.read<UserRepository>()),
),
],
child: Widget()));
}
}
Then, it will be automatically initialized
I have analysed your code ,and I found 2 mistakes:
1st. you just created instance of your VisiMisiRepository and not initialised. and you are calling their methods that's why you getting error Unhandled error NoSuchMethodError: The method 'getVisiMisi' was called on null.
2nd. You just initialised your bloc within passing instance of repository, and haven't performed any bloc event . that's why code keep showing initial state.
You might have got your answer.
if not, take help from here it'll surely help you:
replace this:
create: (_) => VisiMisiBloc(repository),
with this:
create: (_) => VisiMisiBloc(VisiMisiRepository())..add(GetVisiMisiList()),
In your widget tree:
body: BlocProvider<VisiMisiBloc>(
create: (_) => VisiMisiBloc(VisiMisiRepository())..add(GetVisiMisiList()), //initialising bloc within repository and hit event as well.
child: BlocBuilder<VisiMisiBloc, VisiMisiState>(
builder: (context, state) {
if (state is VisiMisiInitial) {
return Center(child: Text(state.toString()),);
} else if (state is VisiMisiError) {
return Center(child: Text(state.message),);
} else if (state is VisiMisiLoaded) {
return SingleChildScrollView(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_visiWidget(context, state),
SizedBox(height: 20,),
_misiWidget(context),
SizedBox(height: 30,),
_footerWidget(context)
],
),
),
);
}
return Center(child: CircularProgressIndicator(),);
}
)
),
this answer will also resolve Unhandled error NoSuchMethodError: The method 'getVisiMisi' was called on null error.
I want to create a license validation system for my application in order to activate it if a license is entered or already present.
If when starting the application the license does not exist then I display a page which allows me to scan it by QR code.
If the scanned license is valid then I push a success page with a button on it that allows me to unlock the application. When I click on this button I want to close my success page and rebuild my application with the homepage of the application unlocked.
This works up to the success page. When I click on my button to unblock the app, I can't rebuild the parent page with the unblock app.
MyApp: This change choose the screen if I have a license or not.
class AppScreen extends StatelessWidget {
const AppScreen({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Impact',
debugShowCheckedModeBanner: false,
theme: AppTheme().data,
home: ChangeNotifierProvider<LicenseNotifier>(
create: (BuildContext context) => LicenseNotifier(),
child: Consumer(
builder: (context, LicenseNotifier license, _) {
return license.showScreenWithLicenseState();
},
),
),
);
}
}
My license notifier:
class LicenseNotifier with ChangeNotifier {
LicenseState state = LicenseState.Uninitialized;
String getLicenseInApp;
String licenseScanned;
String personnalKey;
final String _scanBarColor = "#f57873";
LicenseNotifier(){
personnalKey = "1010";
_checkIfAppIsUnlocked();
}
Future<void> _checkIfAppIsUnlocked() async {
if (getLicenseInApp != null) {
state = LicenseState.Authenticated;
}
else{
state = LicenseState.Unauthenticated;
}
notifyListeners();
}
Future scanQRCode(BuildContext context) async{
await FlutterBarcodeScanner.scanBarcode(_scanBarColor, "Cancel", true, ScanMode.QR).then((value) {
licenseScanned = value.toString();
});
licenseValidator(context);
}
void licenseValidator(BuildContext context){
if(licenseScanned == personnalKey){
showSuccessLicenseScreen(context);
}
notifyListeners();
}
void showSuccessLicenseScreen(BuildContext context){
Navigator.push(context, MaterialPageRoute(
builder: (context) => ChangeNotifierProvider<LicenseNotifier>(
create: (BuildContext context) => LicenseNotifier(),
child: LicenseSuccessScreen(title: "Valid license")
),
));
}
activateApp(BuildContext context) {
Navigator.pop(context);
state = LicenseState.Authenticated;
notifyListeners();
}
showScreenWithLicenseState(){
switch (state) {
case LicenseState.Uninitialized:
return SplashScreen();
break;
case LicenseState.Unauthenticated:
case LicenseState.Authenticating:
return LicenseActivationScreen(title: "Activate license");
break;
case LicenseState.Authenticated:
return ChangeNotifierProvider<BottomNavigationBarNotifier>(
create: (BuildContext context) => BottomNavigationBarNotifier(),
child: NavigationBarScreen(),
);
break;
}
return null;
}
}
My success screen: When I scan a valid license
class LicenseSuccessScreen extends StatelessWidget{
final String title;
const LicenseSuccessScreen({Key key, this.title}) : super(key: key);
#override
Widget build(BuildContext context)
{
return GestureDetector(
onTap: (() => FocusScope.of(context).requestFocus(FocusNode())),
child: Scaffold(
appBar: AppBar(
backgroundColor: AppColors.colorContrastGreen,
elevation: 0,
centerTitle: true,
title: Text(title),
),
body : _buildBody(context),
),
);
}
Widget _buildBody(BuildContext context)
{
var _licenseProvider = Provider.of<LicenseNotifier>(context);
return Container(
color: AppColors.colorContrastGreen,
padding: EdgeInsets.symmetric(horizontal: AppUi.RATIO * 5),
height: double.infinity,
child: Column(
children: [
ContainerComponent(
background: AppColors.colorBgLight,
alignement: CrossAxisAlignment.center,
children: [
ButtonComponent.primary(
context: context,
text: "Débloquer",
onPressed: () async{
_licenseProvider.activateApp(context);
},
),
],
),
],
),
);
}
}
So when I click on my button who call "activateApp" in notifier, the success screen closes but I haven't my application content. It just show the LicenseActivationScreen. How to resolve this problem ?
I'm have successfully displayed list of users in ListView using StreamBuilder. But when I'm updating user document in firestore, screen in my mobile app is automatically navigating back.
This is my screens flow. Login -> Home -> ManageUsers -> UserDetails.
By using below code, I created a list in Manage Users screen. Now I'm trying to update user first name in firebase console. After updating the data ManageUsers screen is closing.
Screen Rec
Widget build(BuildContext context) {
return new StreamBuilder(
stream: Firestore.instance.collection('users').snapshots(),
builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData)
return Center(
child: CircularProgressIndicator(),
);
if (snapshot.hasError)
return Center(child: new Text('Error: ${snapshot.error}'));
final int itemsCount = snapshot.data.documents.length;
switch (snapshot.connectionState) {
case ConnectionState.none:
// TODO: Handle this case.
return new CircularProgressIndicator();
break;
case ConnectionState.waiting:
// TODO: Handle this case.
return new CircularProgressIndicator();
break;
default:
return new ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: itemsCount,
addAutomaticKeepAlives: true,
itemBuilder: (BuildContext context, int index) {
final DocumentSnapshot document =
snapshot.data.documents[index];
return new ListTile(
title: new Text(document['first_name']),
subtitle: new Text(document['last_name']),
onTap: () => {openUserDetailsScreen(document, context)},
);
},
);
}
},
);
}
Actually it should refresh the data in the same screen instead of navigating back. Am I doing anything wrong in building the list.
Home Screen Code
class HomeScreen extends StatefulWidget {
HomeScreen({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomeScreenState createState() => _MyHomeScreenState();
}
class _MyHomeScreenState extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
automaticallyImplyLeading: false,
leading: Builder(
builder: (context) =>
IconButton(
icon: new Icon(Icons.menu),
onPressed: () => Scaffold.of(context).openDrawer(),
),
),
),
drawer: MyDrawer(widget.title),
body: Center(
child: Text("Home Screen"),
),
);
}
#override
void initState() {
print('in home page ${globals.loggedInUser.firstName}');
}
}
From home page I'm navigating to ManageUsers screen via drawer. Here is the code for drawer.
class MyDrawer extends StatelessWidget {
MyDrawer(this.currentPage);
final String currentPage;
bool isAdmin = true;
#override
Widget build(BuildContext context) {
var currentDrawer = Provider.of<DrawerStateInfo>(context).getCurrentDrawer;
return Drawer(
child: ListView(
children: <Widget>[
_CustomListTile(
currentPage, globals.HOME_MENU_TITLE, currentDrawer),
_CustomListTile(
currentPage, globals.LOGIN_MENU_TITLE, currentDrawer),
ConditionalBuilder(
condition: isAdmin,
builder: (context) => _CustomListTile(currentPage,
globals.MANAGE_USERS_MENU_TITLE, currentDrawer),
)
],
),
);
}
}
class _CustomListTile extends StatelessWidget {
final String currentPage;
final String tileTitle;
final currentDrawer;
_CustomListTile(this.currentPage, this.tileTitle, this.currentDrawer);
#override
Widget build(BuildContext context) {
return ListTile(
title: Text(
tileTitle,
style: currentDrawer == 1
? TextStyle(fontWeight: FontWeight.bold)
: TextStyle(fontWeight: FontWeight.normal),
),
onTap: () {
Navigator.of(context).pop();
if (this.currentPage == tileTitle) return;
Provider.of<DrawerStateInfo>(context).setCurrentDrawer(1);
switch (tileTitle) {
case globals.HOME_MENU_TITLE:
{
Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (BuildContext context) => HomeScreen(
title: globals.HOME_MENU_TITLE,
)));
break;
}
case globals.LOGIN_MENU_TITLE:
{
Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (BuildContext context) => LoginScreen(
title: globals.LOGIN_MENU_TITLE,
)));
break;
}
case globals.MANAGE_USERS_MENU_TITLE:
{
Navigator.of(context).pushNamed("/ManageUsers");
break;
}
default:
{
break;
}
}
});
}
}
ListView StreamBuilder means it will listening to your collection.
Please remove the listener when you move to next screen.
This piece of code looks wrong to me:
Provider.of<DrawerStateInfo>(context).setCurrentDrawer(1);
You should have something like an enum or even the tileTitle to use as the saved state for the currently selected option on the drawer, otherwise, you only know there is a selected option, but not exactly which one.
This leads you to this crazy behavior of calling incorrect routes.
Try something like this
class MyDrawer extends StatelessWidget {
MyDrawer(this.currentPage);
final String currentPage;
bool isAdmin = true;
#override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
children: <Widget>[
_CustomListTile(currentPage, globals.HOME_MENU_TITLE),
_CustomListTile(currentPage, globals.LOGIN_MENU_TITLE),
isAdmin
? _CustomListTile(currentPage, globals.MANAGE_USERS_MENU_TITLE)
: Container(),
],
),
);
}
}
class _CustomListTile extends StatelessWidget {
final String currentPage;
final String tileTitle;
_CustomListTile(
this.currentPage,
this.tileTitle,
);
#override
Widget build(BuildContext context) {
return Consumer<DrawerStateInfo>(
builder: (context, draweStateInfo, _) {
final currentSelectedItem = draweStateInfo.getCurrentDrawer();
return ListTile(
title: Text(
tileTitle,
style: currentSelectedItem == tileTitle
? TextStyle(fontWeight: FontWeight.bold)
: TextStyle(fontWeight: FontWeight.normal),
),
onTap: () {
Navigator.of(context).pop();
if (currentSelectedItem == tileTitle) return;
draweStateInfo.setCurrentDrawer(tileTitle);
switch (currentSelectedItem) {
case globals.HOME_MENU_TITLE:
{
Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (BuildContext context) => HomeScreen(
title: globals.HOME_MENU_TITLE,
)));
break;
}
case globals.LOGIN_MENU_TITLE:
{
Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (BuildContext context) => LoginScreen(
title: globals.LOGIN_MENU_TITLE,
)));
break;
}
case globals.MANAGE_USERS_MENU_TITLE:
{
Navigator.of(context).pushNamed("/ManageUsers");
break;
}
default:
{
break;
}
}
});
},
);
}
}
I am trying to understand BLoC pattern but I cannot figure out where or when to call dispose() in my example.
I am trying to understand various state management techniques in Flutter.
I came up with an example I managed to build with the use of StatefulWidget, scoped_model and streams.
I believe I finally figured out how to make my example work with the use of "BloC" pattern but I have a problem with calling the dispose() method as I use the StatelessWidgets only.
I tried converting PageOne and PageTwo to StatefulWidget and calling dispose() but ended up with closing the streams prematurely when moving between pages.
Is it possible I should not worry at all about closing the streams manually in my example?
import 'package:flutter/material.dart';
import 'dart:async';
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return StreamBuilder<ThemeData>(
initialData: bloc.themeProvider.getThemeData,
stream: bloc.streamThemeDataValue,
builder: (BuildContext context, AsyncSnapshot<ThemeData> snapshot) {
return MaterialApp(
title: 'bloc pattern example',
theme: snapshot.data,
home: BlocPatternPageOne(),
);
},
);
}
}
// -- page_one.dart
class BlocPatternPageOne extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('(block pattern) page one'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
buildRaisedButton(context),
buildSwitchStreamBuilder(),
],
),
),
);
}
StreamBuilder<bool> buildSwitchStreamBuilder() {
return StreamBuilder<bool>(
initialData: bloc.switchProvider.getSwitchValue,
stream: bloc.streamSwitchValue,
builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
return Switch(
value: snapshot.data,
onChanged: (value) {
bloc.sinkSwitchValue(value);
},
);
},
);
}
Widget buildRaisedButton(BuildContext context) {
return RaisedButton(
child: Text('go to page two'),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) {
return BlocPatternPageTwo();
},
),
);
},
);
}
}
// -- page_two.dart
class BlocPatternPageTwo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('(bloc pattern) page two'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
buildRaisedButton(context),
buildSwitchStreamBuilder(),
],
),
),
);
}
StreamBuilder<bool> buildSwitchStreamBuilder() {
return StreamBuilder<bool>(
initialData: bloc.switchProvider.getSwitchValue,
stream: bloc.streamSwitchValue,
builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
return Switch(
value: snapshot.data,
onChanged: (value) {
bloc.sinkSwitchValue(value);
},
);
},
);
}
Widget buildRaisedButton(BuildContext context) {
return RaisedButton(
child: Text('go back to page one'),
onPressed: () {
Navigator.of(context).pop();
},
);
}
}
// -- bloc.dart
class SwitchProvider {
bool _switchValue = false;
bool get getSwitchValue => _switchValue;
void updateSwitchValue(bool value) {
_switchValue = value;
}
}
class ThemeProvider {
ThemeData _themeData = ThemeData.light();
ThemeData get getThemeData => _themeData;
void updateThemeData(bool value) {
if (value) {
_themeData = ThemeData.dark();
} else {
_themeData = ThemeData.light();
}
}
}
class Bloc {
final StreamController<bool> switchStreamController =
StreamController.broadcast();
final SwitchProvider switchProvider = SwitchProvider();
final StreamController<ThemeData> themeDataStreamController =
StreamController();
final ThemeProvider themeProvider = ThemeProvider();
Stream get streamSwitchValue => switchStreamController.stream;
Stream get streamThemeDataValue => themeDataStreamController.stream;
void sinkSwitchValue(bool value) {
switchProvider.updateSwitchValue(value);
themeProvider.updateThemeData(value);
switchStreamController.sink.add(switchProvider.getSwitchValue);
themeDataStreamController.sink.add(themeProvider.getThemeData);
}
void dispose() {
switchStreamController.close();
themeDataStreamController.close();
}
}
final bloc = Bloc();
At the moment everything works, however, I wonder if I should worry about closing the streams manually or let Flutter handle it automatically.
If I should close them manually, when would you call dispose() in my example?
You can use provider package for flutter. It has callback for dispose where you can dispose of your blocs. Providers are inherited widgets and provides a clean way to manage the blocs. BTW I use stateless widgets only with provider and streams.
In stateless widget, there is not dispose method so you need not to worry about where to call it.
It's as simple as that