Queue, stream or something else? - flutter

Question

I have stateful widgets A, B and C. B and C are both children of A. I have created a queue Q in widget A. Both B and C show the first element of Q, but when 'dismissing' this element in either B or C, both widgets should show the next element of Q.
Currently the problem is that widgets B and C cannot detect changes and I don't think there is a way to listen for queue changes on this Queue implementation: https://api.dartlang.org/stable/2.4.1/dart-collection/Queue-class.html
Should I use a Queue? I have also read about streams, but I am not sure that will work either, because the first element should not necessarily be consumed by B or C. Any ideas?

Answer 1

You could implement the Provider Pattern for State Managment.
Provider Flutter Package
As the documentation says, to expose a variable using provider, wrap any widget into one of the provider widgets from this package and pass it your variable. Then, all descendants of the newly added provider widget can access this variable.
The main idea is to create a class where you will save the state you want to share (in your case it would be the queue). Then, provide access from the widgets to this provider
Example: The following class is the Provider Class. The shared variable would be "_count"
class CounterProvider with ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
}
Then, you instiantate this Provider in the widget of your preference (In your case, A).. so all its descendants (B and C) have access to the provider and its data.
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final counter = CounterProvider();
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider( // WIDGET FROM PROVIDER PACKAGE
builder: (context) => CounterProvider(), // REQUIRED LINE
child: MaterialApp(
title: 'My App',
debugShowCheckedModeBanner: false,
initialRoute: '/',
routes: {
'/': (BuildContext context) => HomePage(),
'somepage': (BuildContext context) => SomePage(),
}
),
);
}
}
Now, inside of HomePage():
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
final counterProvider = Provider.of<CounterProvider>(context);
// Inject the provider in your widget. From here, you have access to the Counter properties.
return Scaffold(
appBar: AppBar(
title: Text( counterProvider.counter.toString() ), // accessing to the provider!
),
body: Center(
child: Text(counterProvider.counter.toString()), // again
),
);
}
}
Of course you can create your methods you need in the provider so you can change the state in anyway you want.
I hope it helps!
Youtube link in spanish but understable workflow