I am working on a real-time patient monitoring app and I am using the signalR package for dealing with sockets. I have some screens, a dart file for socket management, and one for data. in the startup, I open the socket and receive new data from it. the problem is when I want to update the state of the patient's screen and it doesn't work.
this is the wrapping of the parent widget with ChangeNotifierProvider part:
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
MySocket theSocket = MySocket();
theSocket.openSocket();
return ChangeNotifierProvider(
create: (_) => DataClass(),
lazy: false,
//builder: (context, _) => MyApp(),
child: MaterialApp(
debugShowCheckedModeBanner: false,
this is the code in the socket.dart that gets invoked when new data arrives:
await connection.start();
connection.on('UpdateOnlineGadgets', (updates) {
DataClass().updateOnlineGadgets(updates![0].toString());
});
this is the code in the DataClass which is an extends of ChangeNotifier:
class DataClass with ChangeNotifier {
String _onlineGadgets = ' ';
String get onlineGadgets => _onlineGadgets;
void updateOnlineGadgets(String newGadgetsList) {
_onlineGadgets = newGadgetsList;
notifyListeners();
}
}
and finally, this is the usage of the onlineGadgets variable:
Text(Provider.of<DataClass>(context).onlineGadgets)
in the socket class, I can't access DataClass properties and methods with Provider. of(context) because this class is not a widget and doesn't have context. I tried to access it with an object of that class but it seems to not work. what are my options?
Related
I've got two StatelessWidgets, one is a child of another. There is also a progress update function which updates the state in the external TransferState.
Once updateProgress function is being called the TransferIndicator widget gets rebuilt immediately. On the other hand, its parent (TransfersListTile) build method isn't called.
It works as expected, however I can't really work out what's the mechanism that's being used here. How Flutter decides to rebuild the: _TransferIndicator given that the parameter is a string hash that's not being changed, but only used as a lookup ID to reach the map in TransferState and load the status and progress.
Documentation: https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html says:
"The build method of a stateless widget is typically only called in
three situations: the first time the widget is inserted in the tree,
when the widget's parent changes its configuration, and when an
InheritedWidget it depends on changes."
If: notifyListeners(); function is removed, the widget doesn't get rebuilt.
It seem to be closely related to: ChangeNotifier, but couldn't find the exact info how it works.
In doc here: https://docs.flutter.dev/development/data-and-backend/state-mgmt/simple#changenotifier there is an example involving ChangeNotifier, however doesn't the receiving widget need to be wrapped around: Consumer (https://docs.flutter.dev/development/data-and-backend/state-mgmt/simple#consumer)?
In my case there is no Consumer wrapping.
class TransfersListTile extends StatelessWidget {
TransfersListTile(this.transfer, {Key? key}) : super(key: key);
final Transfer transfer;
#override
Widget build(BuildContext context) {
return ListTile(
leading: _TransferIndicator(transfer.hash),
title: Text(transfer.name!),
);
}
}
class _TransferIndicator extends StatelessWidget {
const _TransferIndicator(this.hash, {Key? key}) : super(key: key);
final String? hash;
#override
Widget build(BuildContext context) {
final status = context.select((TransferState s) => s.map[hash]?.status) ?? TransferStatus.pending;
final progress = context.select((TransferState s) => s.map[hash].progress.percentage);
return CircularProgressIndicator(
value: status == TransferStatus.completed ? 100 : (progress / 100),
);
}
}
function:
class TransferState with ChangeNotifier {
updateProgress(String hash, TransferProgress progress) {
map[hash]?.progress = progress;
notifyListeners();
}
}
and provider part:
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider(create: (context) => TransferState(),
],
child: MyApp(),
)
);
More info about the select method and other convenience methods can be found on the provider (https://pub.dev/packages/provider) package site.
Excerpt:
The easiest way to read a value is by using the extension methods on
[BuildContext]:
context.watch(), which makes the widget listen to changes on T
context.read(), which returns T without listening to it
context.select<T, R>(R cb(T value)), which allows a widget to listen to only a small part of T.
In the example below, CandidateData is deserialized from a Firebase Realtime database using a Stream. Properties from it are used in building a HiringManagerButton.
class CandidateData {
bool isEmployed;
String name;
}
class HiringManagerButton extends StatelessWidget {
final CandidateData data;
const HiringManagerButton({Key? key, required this.data}) : super(key: key);
#override
Widget build(BuildContext context) {
return ElevatedButton(
child: Text('${data.isEmployed ? 'Fire' : 'Hire'} ${data.name}'),
onPressed: onPressedFn
);
}
}
class SomeClass extends StatelessWidget {
#override
Widget build(BuildContext context) {
return StreamBuilder<CandidateData>(
stream: fromDatabaseStream,
builder: (context, state) => HiringManagerButton(data: state.data!));
}
}
How should onPressedFn operate? Should it mutate the CandidateData model by changing the value of isEmployed, which causes the Widget to instantly rebuild, then make the service call to update the backend? Or should it just make the service call to update the backend, and rely on the Stream to provide an updated value to rebuild the HiringManagerButton with?
EDIT: Code for the two options above:
Option 1:
onPressedFn = () async {
data.isEmployed = !data.isEmployed;
await context.read<DatabaseService>().update(data);
}
Option 2:
onPressedFn = () async {
await context.read<DatabaseService>().update(CandidateData(isEmployed: !data.isEmployed, name: data.name));
}
Decided to go with option 2 as the database is the source of truth. Moreover, Flutter Firebase seems to have some form of offline consistency, which results in performance being a non-issue - DB writes are reflected instantly locally.
I'm trying to use a ProviderListener from Riverpod to listen to my authProvider and control the page displayed if a user is authorized or not. I'm getting the error:
error: The argument type 'StateNotifierProvider<Auth, bool>' can't be assigned to the parameter type 'ProviderBase<Object, StateController>'.
The error shows up on the: provider: authProvider, inside the ProviderListener
I'm wondering if it's due to the update on StateNotifierProvider?
I would like to know how to use the ProviderListener better even if there's a better way to handle the authorization flow (I'm VERY open to feedback and criticism and greatly appreciate any time a person can take to help). I cut out non-relevant code
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
class Auth extends StateNotifier<bool> {
Auth() : super(false);
void setAuth(bool auth) {
state = auth;
}
}
final authProvider = StateNotifierProvider<Auth, bool>((ref) => Auth());
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(
ProviderScope(
child: MyApp(),
),
);
}
class MyApp extends StatefulHookWidget {
// const MyApp({Key key}) : super(key: key);
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final Future<FirebaseApp> _fbMyApp = Firebase.initializeApp();
Widget route = SplashScreen();
#override
Widget build(BuildContext context) {
return ProviderListener<StateController<bool>>(
provider: authProvider,
onChange: (context, auth) {
if (auth.state = true) {
route = HomeScreen();
} else {
route = SplashScreen();
}
},
child: MaterialApp(
home: route,
);
}
}
I managed to get it to sort of work by changing to:
return ProviderListener<StateNotifier<bool>>(
provider: authProvider.notifier,
it's giving me a non-breaking error of:
info: The member 'state' can only be used within instance members of subclasses of 'package:state_notifier/state_notifier.dart'. (invalid_use_of_protected_member)
and not working properly - the state isn't being updated when I'm using a context.read
context.read(authProvider.notifier).state = true;
So it's buggy but not fully broken. At least it's some progress. I would still love help and any feedback anyone wants to give!
Remove StateController from ProviderListener, leave only the type (bool in this case)
return ProviderListener<bool>(
provider: authProvider, //this will read the state of your provider (a bool state)
onChange: (context, auth) {
if (auth) { //remove setter auth = true, it doesn't make sense to set a value inside an if
route = HomeScreen();
} else {
route = SplashScreen();
}
},
child: MaterialApp(
home: route,
);
This way you're reading the state of your StateNotifier
I am new to riverpod and while the articles have been helpful to get started I am struggling with stale state.
When a user logs in I am setting some state. When the details of the state change in DB I want the rebuild to happen automatically. While I am able to get a stream from the DB I am unable to connect the DB change to the riverpod state.
The pattern is for collaboration. Where two users are working on the same part of the application on independent phones, tablets etc.
I am using document stream and collection streams from firecloudstore.
Any helpful articles or how you have solved for this with riverpod? Do I have to invest time in learning something like BLoC for this?
You definitely don't need to learn BLoC to accomplish what you're after.
You say you're using firebase streams, so here's an example of live rebuilding when your data changes.
First, your repository layer.
class YourRepository {
YourRepository(this._read);
static final provider = Provider((ref) => YourRepository(ref.read));
final Reader _read;
Stream<YourModel?> streamById(String id) {
final stream = FirebaseFirestore.instance.collection('YourCollection').doc(id).snapshots();
return stream.map((event) => event.exists ? YourModel.fromJson(event.data()!) : null);
}
}
Next, define a StreamProvider that reads the stream defined in your repository.
final streamYourModelById = StreamProvider.autoDispose.family<YourModel?, String>((ref, id) {
return ref.watch(YourRepository.provider).streamById(id);
});
Last, use the StreamProvider in a widget to reload when your data changes.
// Hooks
class YourWidget extends HookWidget {
const YourWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: useProvider(streamYourModelById('YourDataId')).when(
loading: () => const Center(child: CircularProgressIndicator()),
error: (err, stack) => Center(child: Text(err.toString())),
data: (yourData) => Center(child: Text(yourData?.toString() ?? 'Got Null')),
),
);
}
}
// Without Hooks
class YourWidget extends ConsumerWidget {
const YourWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context, ScopedReader watch) {
return Scaffold(
body: watch(streamYourModelById('YourDataId')).when(
loading: () => const Center(child: CircularProgressIndicator()),
error: (err, stack) => Center(child: Text(err.toString())),
data: (yourData) => Center(child: Text(yourData?.toString() ?? 'Got Null')),
),
);
}
}
You should be able to apply this pattern to accomplish whatever you need.
I am still with my first bloc based app, adding features. While previously, I stored some of my page specific data with the bloc class, for the last feature, I now moved most variables into its repository. I already feared that the instance of calling the repository gets lost, afterwards, which now proved true.
Is there a proper, easy way to make the instance persistent?
I know of inherited widgets, however, I have not yet figured out how to implement this and my question around this unfortunately remained unanswered. It would be great, if someone could point me to some direction!
In general, my idea was to have the api dealing with local files and online data, the repository with frequently re-used data (session data, presented data etc) and helper variables within the bloc. So when the UI requests data, the bloc asks the repository which will either return a value stored in a variable or request a value from the api.
This is, how the strucuture basically looks like (hope I have not missed anything significant)
void main() async {
final UserRepository userRepository = UserRepository(); // <===== userRepository initialized
runApp(MyApp(userRepository: UserRepository()));
}
class MyApp extends StatelessWidget {
MyApp({Key key, this.userRepository}) : assert(userRepository != null), super(key: key);
final UserRepository userRepository;
#override
Widget build(BuildContext context) {
return BlocProvider<UserBloc>( <====== userBloc injection to top of widget tree
create: (_) => UserBloc(userRepository: userRepository)..add(AppStarted()),
child: App(),
);
}
}
// =================================================== APP WITH ROUTES
class App extends StatelessWidget {
App({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return CupertinoApp(
routes: {
'/': (_) => HomePage(),
'feature 1': (_) => HomePage(),
},
);
}
}
// =================================================== LANDING PAGE WITH MAIN MENU
class HomePage extends StatefulWidget {
HomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
]);
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('MathUup'),
),
child: SafeArea(
child: CupertinoButton(
child: Text('Feature 1',
onPressed: () => Navigator.pushNamed(context, 'feature 1'),
),)));
}}
// =================================================== BLOC
class UserBloc extends Bloc<UserEvent, UserState> {
UserBloc({this.userRepository}) : super(AppInitial());
final UserRepository userRepository;
...
final user = await userRepository.getActiveUserData(userId);
final lastSessionData = await userRepository.getLastSession(userId);
...
}
// =================================================== REPOSITORY
class UserRepository {
UserRepository();
final UserApiClient achievementsApiClient = UserApiClient();
final SessionsApiClient sessionsApiClient = SessionsApiClient();
UserSession activeUserSession;
User activeUserData;
Future<String> getLastUserId() async {
final lastUserId = await sessionsApiClient.getLastUserId();
return lastUserId;
}
Future<UserSession> getActiveUser() async {
if (activeUserSession == null) {
activeUserSession = await sessionsApiClient.getLastUser();
}
return activeUserSession;
}
}
This line is creating and initializing your user repository:
final UserRepository userRepository = UserRepository(); // <===== userRepository initialized
However, this line is not passing that repository, it's creating a new repository, ignoring the one you just initialized:
runApp(MyApp(userRepository: UserRepository()));
I think you meant to use the variable you already have:
runApp(MyApp(userRepository: userRepository));