When we use notifyListeners in ChangeNotifier? - flutter

Why we use sometimes notifyListeners and also why we do not use notifyListeners? How can we use a function in changenotifier ?
For instance, in this code, sometimes we used to notifyListeners, but sometimes we did not use notifyListeners (in login() function). Why ? When we use notifyListeners?
String get userEmail => _userEmail;
set userEmail(String value) {
_userEmail = value;
notifyListeners();
}
String get userPassword => _userPassword;
set userPassword(String value) {
_userPassword = value;
notifyListeners();
}
String get userName => _userName;
set userName(String value) {
_userName = value;
notifyListeners();
}
DateTime get dateOfBirth => _dateOfBirth;
set dateOfBirth(DateTime value) {
_dateOfBirth = value;
notifyListeners();
}
Future<bool> login() async {
try {
isLoading = true;
print(userEmail);
print(userPassword);
if (isLogin) {
await FirebaseAuth.instance.signInWithEmailAndPassword(
email: userEmail,
password: userPassword,
);
} else {
await FirebaseAuth.instance.createUserWithEmailAndPassword(
email: userEmail,
password: userPassword,
);
}
isLoading = false;
return true;
} catch (err) {
print(err);
isLoading = false;
return false;
}
}
}
Besides can someone answer me about why we use set method in this code
bool get isLogin => _isLogin;
set isLogin(bool value) {
_isLogin = value;
notifyListeners();
}

The method notifyListeners() is used whenever you want to trigger a rebuild or whenever there is an active listener which is monitoring for the change to perform certain actions
Assume a scenario, You have a data model, and as soon as you fetch the data from APIs you want to parse it and fill in the model class, Also you want that UI will automatically rebuild after getting the data !
For this purpose you can use notifyListeners() in data class and in your UI code, You can wrap the parts which needs to be rebuild with a ChangeNotifierProvider or a Consumer Widget that will monitor for changes and as soon as they encounter any change , They will rebuild the underlying Widget(s).
In the code you shared above, You've used private fields that cannot be accessed outside of this file and you are using getters and setters to basically retrieve them and modify them
Answering your last question now,
We use set method or setter to basically update or modify a value (generally a private value)
Just to provide you some additional info,
You should NOT wrap fields in getters and setters just to be "safe".
This method is Old and not needed in Dart language
You can read more about this here
You can also read about getters and setters in dart here.
Since you are new to StackOverflow, I welcome you.
Happy Fluttering !

Related

Why is this listener never called?

I'm trying to use Riverpod for my project, however I'm hitting some issues.
I am not sure that I'm using it very well so don't hesitate to tell me if you see anything wrong with it :)
First I have my authProvider:
final authRepoProvider = ChangeNotifierProvider.autoDispose((ref) {
return AuthRepository();
});
class AuthRepository extends ChangeNotifier {
String? token;
Future signIn(String username, String password) async {
// Do the API calls...
token = tokenReturnedByAPI;
notifyListeners();
}
}
Then I have a service, let's say it allows to fetch blog Articles, with a stream to get live update about those.
class ArticleService {
StreamController<Article> _streamCtrl;
String? _token;
API _api;
ArticleService(this._api) : _streamCtrl = StreamController<Article>() {
_api.onLiveUpdate((liveUpdate) {
_streamCtrl.add(liveUpdate);
});
}
Stream<Article> get liveUpdates => _streamCtrl.stream;
Future markArticleAsRead(String id) async {
await _api.markAsRead(_token, id);
}
}
For that article service I would like to keep the current token up to date, but I don't want to rebuild the entire service every time the token changes as there are listeners and streams being used.
For that I would prefer to listen to the changes and update it myself, like such:
final articleServiceProvider = Provider.autoDispose((ref) {
final service = ArticleService(
ref.read(apiProvider),
);
ref.listen<AuthRepository>(authRepositoryProvider, (previous, next) {
service._token = next.token;
}, fireImmediately: true);
return service;
});
That piece of code seems correct to me, however when I authenticate (authRepository.token is definitely set) and then try to invoke the markArticlesAsRead method I end up with an empty token.
The ref.listen is never called, even tho AuthRepository called notifyListeners().
I have a feeling that I'm using all that in a wrong way, but I can't really pinpoint what or where.
Try ref.watch
final articleServiceProvider = Provider.autoDispose((ref) {
final service = ArticleService(
ref.read(apiProvider),
);
final repo = ref.watch<AuthRepository>(authRepositoryProvider);
service._token = repo.token;
return service;
});

Null check operator used on a null value when checking with if

Whenever I go on my login page, I get the error that I used null check operator on a null value, it only happens when there is no login/password entered before. In init state I am checking with isNotEmpty, so why am I getting this error? How can I fix it?
[ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: Null check operator used on a null value
#override
void initState() {
super.initState();
UserPreferences.init().then((_) {
if (UserPreferences.getEmail!.isNotEmpty) {
setState(() {
_isChecked = true;
_email.text = UserPreferences.getEmail!;
_password.text = UserPreferences.getPassword!;
});
}
});
}
class UserPreferences {
static SharedPreferences? _preferences;
static Future<void> init() async {
_preferences = await SharedPreferences.getInstance();
}
static setEmail(String username) async {
await _preferences?.setString('email', username);
}
static setPassword(String password) async {
await _preferences?.setString('password', password);
}
static String? get getEmail => _preferences?.getString('email');
static String? get getPassword => _preferences?.getString('password');
}
Generally speaking, using a ! in null checks means your code has bugs. If it didn't have bugs, you would not need this operator.
The ! operator only forces your compiler to go through with what you programmed, even though it knows it could be wrong. It warned you, but you decided that instead of listening to your compiler, you just told it to shut up (by using operator !). If you want to write good code, just forget the operator ! for null checks ever existed.
final previousEmail = UserPreferences.getEmail;
final previousPassword = UserPreferences.getPassword;
if (previousEmail != null) {
setState(() {
_isChecked = true;
_email.text = previousEmail;
if(previousPassword != null) {
_password.text = previousPassword;
}
});
}
Call this init inside FutureBuilder then check the Condition for non being empty. Because initState is not for Initializing the Async Function.

Riverpod StateNotifierProvider depend on a FutureProvider

I have a StateNotifierProvider that depends on a FutureProvider. Currently they look like below.
final catalogProvider = StateNotifierProvider<CatalogNotifier, CatalogState>((ref) {
final network = ref.watch(networkProvider.future); // future provider
return CatalogNotifier(network: network);
});
this makes my CatalogNotifier accept a Future<NetworkProvider> instead of NetworkProvider and requires me to do things like below.
await (await network).doGet(...)
What's the best way to avoid having to await multiple and allow CatalogNotifier to accept a bare NetworkProvider so I can write like await network.doGet(...) ?
for completeness as requested, below is the other related providers
final networkProvider = FutureProvider<Network>((ref) async {
final cache = await ref.watch(cacheProvider.future);
return Network(cacheManager: cache);
});
final cacheProvider = FutureProvider<CacheManager>((ref) async {
final info = await ref.watch(packageInfoProvider.future);
final key = 'cache-${info.buildNumber}';
return CacheManager(Config(
key,
stalePeriod: const Duration(days: 30),
maxNrOfCacheObjects: 100,
));
I'm sure I can take my cache provider as a future into the network provider, so it doesn't have to be a FutureProvider, but I'm interested in how to solve the issue above, since in another scenario, if I depend on say 3 or 4 FutureProviders, this may not be an option.
this makes my CatalogNotifier accept a Future instead of >NetworkProvider and requires me to do things like below.
I can't think of a way to get your desired result.
Could you not just accept an AsyncValue and handle it in the statenotifier?
final catalogProvider = StateNotifierProvider<CatalogNotifier, CatalogState>((ref) {
final network = ref.watch(networkProvider); // future provider
return CatalogNotifier(network: network);
});
Then you can:
void someFunction() async {
network.maybeWhen(
data: (network) => AsyncData(await network.doGet(...)),
orElse: () => state = AsyncLoading(),
);
}
with riverpod v2 and its codegen features this has become much easier since you no longer have to decide the type of the provider. (unless you want to)
StateNotifier in riverpod 2
#riverpod
Future<CatalogController> catalog(CatalogRef ref) async {
final network = await ref.watch(networkProvider.future);
return CatalogController(network: network);
}
Alternative approch in Riverpod 2
Quite often you want to have a value calculated and have a way to explicitely redo that calculation from UI. Like a list from network, but with a refresh button in UI. This can be modelled as below in riverpod 2.
#riverpod
Future<CatalogState> myFeed(MyFeedRef ref) async {
final json = await loadData('url');
return CatalogState(json);
}
// and when you want to refresh this from your UI, or from another provider
ref.invalidate(myFeedProvider);
// if you want to also get the new value in that location right after refreshing
final newValue = await ref.refresh(myFeedProvider);
Riverpod 2 also has loading and error properties for the providers. You can use these to show the UI accordingly. Though if you want to show the last result from the provider while your feed is loading or in an error state, you have to model this yourself with a provider that returns a stream/BehaviorSubject, caches the last value .etc.
you can make AsyncValue a subtype of StateNotifier, I use the Todo list as an example.
as follows:
class TodoNotifier extends StateNotifier<AsyncValue<List<Todo>>> {
TodoNotifier(this._ref) : super(const AsyncValue.loading()) {
_fetchData();
}
final Ref _ref;
Future<void> _fetchData() async {
state = const AsyncValue.loading();
// todoListProvider is of type FutureProvider
_ref.read(todoListProvider).when(data: (data) {
state = AsyncValue.data(data);
}, error: (err, stackTrace) {
state = AsyncValue.error(err, stackTrace: stackTrace);
}, loading: () {
state = const AsyncValue.loading();
});
}
void addTodo(Todo todo) {
if (state.hasValue) {
final todoList = state.value ?? [];
state = AsyncValue.data(List.from(todoList)..add(todo));
}
}
....
}

Added data is only showing after reloading in flutter

here is a popup screen to add the transaction to the app, as you can see here
and when the add button pressed the data will add to database and also to the dislpay , here is the code
ElevatedButton(
//on pressed
onPressed: () async {
final _categoryName = _nameEditingController.text;
if (_categoryName.isEmpty) {
return;
}
final _type = selectedCategoryNotifier.value;
//sending the data to model class
final _category = CategoryModel(
id: DateTime.fromMillisecondsSinceEpoch.toString(),
name: _categoryName,
type: _type,
);
//inserting the data to database
await CategoryDb.instance.insertCategory(_category);
//refreshing the ui
await CategoryDb.instance.refreshUI();
//and quitting the popup screen
Navigator.of(ctx).pop();
},
child: const Text('Add'),
),
and in this code you can see that I called 2 functions that for insert data and also refresh the UI, in the refresh UI function I added the function that to get all data from database to screen, here the code of all functions for CRUD operatins
const databaseName = 'category-database';
abstract class CategoryDbFunctions {
Future<List<CategoryModel>> getCategories();
Future<void> insertCategory(CategoryModel value);
}
//CRUD operations code
class CategoryDb implements CategoryDbFunctions {
CategoryDb._internal();
static CategoryDb instance = CategoryDb._internal();
factory CategoryDb() {
return instance;
}
ValueNotifier<List<CategoryModel>> incomeCategoryListListener =
ValueNotifier([]);
ValueNotifier<List<CategoryModel>> expenseCategoryListListener =
ValueNotifier([]);
#override
Future<void> insertCategory(CategoryModel value) async {
final _categoryDB = await Hive.openBox<CategoryModel>(databaseName);
await _categoryDB.add(value);
await refreshUI();
}
#override
Future<List<CategoryModel>> getCategories() async {
final _categoryDB = await Hive.openBox<CategoryModel>(databaseName);
return _categoryDB.values.toList();
}
Future<void> refreshUI() async {
final _allCategories = await getCategories();
incomeCategoryListListener.value.clear();
expenseCategoryListListener.value.clear();
await Future.forEach(
_allCategories,
(CategoryModel category) {
if (category.type == CategoryType.income) {
incomeCategoryListListener.value.add(category);
} else {
expenseCategoryListListener.value.add(category);
}
},
);
}
}
so I checked the all things , but I couldn't find where I'm missing parts,
and here is the main part, it is adding to the database also displaying after I refresh the UI or change the tab here you can see what I mean by 'changing the tab'
this is the problem I'm trying to fix this for 2 day, i couldn't find any solution or mistake in my code
There many ways you can handle this problem.
but I dont see where you notify youre ui that the data has been changed, flutter does only update the ui when you use setState etc.. these functions help flutter updating the ui where the data changed.
i would recommend you to use setState in the place you invoke youre dialog.
onTap:(){
setState(){
await dialogStuff();
}
}

How to conditionally update data in Cloud Firestore?

I've a setting page in my app that a user can edit to update details. The data screen consists of two Two Textfields and a profile avatar. The app has google(and email&password)as the auth providers. So when the user signs up for the first time I have a method that presents the data to the user.
void readLocal() async {
controllerName = new TextEditingController(text: AuthProvider.of(context).userData.name);
print(controllerName);
controllerEmail = new TextEditingController(text: AuthProvider.of(context).userData.email);
avatarUrl= AuthProvider.of(context).userData.avatarUrl;
// controllerPhoneNumber= new TextEditingController(text: AuthProvider.of(context).userData.phoneNumber);
// Force refresh input
setState(() {});
}
The data is presented as expected. The method is called in
#override
void didChangeDependencies() {
readLocal();
}
To make sure initState has completed. I have an update button that isn't behaving as I would like. When I edit both fields: both of the fields update and the correct writes are sent to Firestore. However if I update one TextField, and press update I lose the data in the other TextField (an empty string is written to Firestore) and vice versa. And if I press the update without editing either fields, both the fields in Firestore end up with empty strings. Here is my update function
void handleUpdateData() {
focusName.unfocus();
focusEmail.unfocus();
setState(() {
isLoading = true;
});
AuthProvider.of(context).userData.docRef.updateData({'name': name, 'email': email,'avatarUrl':avatarUrl}).then((data) async{
print('########################### #############################');
setState(() {
isLoading = false;
});
Fluttertoast.showToast(msg: "Update success");
}).catchError((err) {
setState(() {
isLoading = false;
});
Fluttertoast.showToast(msg: err.toString());
});
}
here is a gist
of the dart file. I presume by not editing the fields and then pressing the update button, the update function takes an empty string to update with and write this to Firestore. How do I prevent this?
If you tell Firestore to set a field to an empty string, it will set that field to an empty string. If you don't want Firestore to modify a field, you should not specify that field in the call to updateDate(...).
In practice this means you need to conditionally populate the Map of values, with something like this:
Map<String, dynamic> values = new Map<String,dynamic>();
if (name?.isEmpty ?? true) values["name"] = name;
if (email?.isEmpty ?? true) values["email"] = email;
if (avatarUrl?.isEmpty ?? true) values["avatarUrl"] = avatarUrl;
AuthProvider.of(context).userData.docRef.updateData(values).then((data) async{
...
For the logic of the check for empty strings, see Dart null / false / empty checking: How to write this shorter?