![]() ![]() BIASED OPINION: The best documentation ever.Why would you leave it at just the matchers though when you can use the bloc_test package which, in my opinion, makes tests fun to write?.Dart is built with Streams in mind and testing if a particular sequence of states has been emitted is simple with stream matchers.Testing Streams is easy, testing Blocs is even easier. ![]() With the help of the BlocDelegate, you can know about any action the user takes in any BLoC without cluttering up your codebase with analytics code.Good tooling for VS Code and IntelliJ/Android Studio.First of all, remove all comments and also the current state management in this class: // lib/main.dart import 'package:flutter/material. We are now going to apply changes to main.dart so that we can use the model class we just created. Refactor the view so it consumes the model Through its setter (marked with the keyword set) the widgets can update their value, and when this happens first we will check that the new value is different from the previous one, if it is, we update the private variable that stores the real value and invoke the notifyListeners() method so that all widgets that have subscribed to this class are notified so their view can be re-rendered with the new value. Through its getter (marked with the keyword get) the widgets can obtain this value at any time. Here you can see that we still have a private variable _counter initialized with the value 0. ![]() Open the created app in your trusted IDE and modify pubspec.yaml to include the provider dependency: name: state_management_provider description: A new Flutter project. and then several widgets that consume these changes and that are automatically modified when a state change occurs due to user authentication. A practical example of this would be for example a class that manages user authentication against a server, you could have a single class that contains methods like login(), register(), getUser(). In this diagram you can see how not just one, but multiple widgets can subscribe to the model class for all of them to receive state changes. In addition, with this methodology we could also achieve the following: ![]() By doing so we are creating a circular reactive architecture.Ī great advantage of this model is that we have a clear separation between the state logic and the display of views, thus achieving a much cleaner code that is easier to organize and easier to maintain. On the left side we have a model class that will contain the variables that will constitute the state of our widget, this widget will subscribe to this model to receive state changes, and when those changes are made the model will emit the updated values to the widget. The change that we are going to apply consists of refactoring this state management so that it looks like this: This management is done through variables in the body of the class, when we want to change the state we use the setState() method. In this diagram we see a widget that is responsible for the visual part and state management. The default state management that Flutter gives you when you create a project is as follows: Provider architectureīefore we start I'm going to show you the change we're going to make. The resulting application is going to be a counter app in which we can increase the counter if we press the button located at the bottom of the screen:ĭoes this example sound familiar to you? Yes, what we are going to do is refactor the app template that Flutter creates when you create a project, leaving the functionality and the visual part intact, but refactoring its state management with provider. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |