Using provider package StreamProvider with declarative UI - flutter

Question

I've been trying to wrap my head around data flow and state management in flutter particularly using the provider package. I tried querying from firestore using Future but turns out that doesn't fully utilise the capabilities of firestore since Futures only expect one value.
So I switched to using Streams instead, and using StreamProvider to get the data to my widgets. Problem is I can't figure out at what point/how to tell the UI to rebuild. Sometimes the stream has data, sometimes it doesn't and I can't really tell what's going on during those times. Say I wanted to show a circular progress bar when the view is busy, how do I achieve that when using StreamProvider. Does it even make sense to do that?
So with the filledstacks approach, one is able to switch model state between Busy and Idle, when making a network call using futures. For instance when we call a getPosts method, we first set the state to Busy so the UI can react and probably show a loading indicator. However we can set the state back to Idle once data has been received async. A Stream on the other hand, at least from my understanding, is just a pipe that's constantly passing data and I can't come up with a way to achieve the Busy/Idle state or even to tell if this Stream has new data/any data. Any ideas?
This is part of my database_service.dart that should return a stream of data from firestore.
Stream<List<Expense>> getExpenses(int month, int year) {
var ref = _db
.collection("userData")
.document(fireUser.uid)
.collection("expenses")
.where("month", isEqualTo: month)
.where("year", isEqualTo: year)
.orderBy("date", descending: true);
return ref.snapshots().map((list) =>
list.documents.map((snap) => Expense.fromFirestore(snap)).toList());
}
This is part of my expenses.dart view file that uses StreamProvider.
class ExpensesPage extends StatefulWidget {
#override
_ExpensesPageState createState() => _ExpensesPageState();
}
class _ExpensesPageState extends State<ExpensesPage> {
int _month;
int _year;
#override
void initState() {
super.initState();
_month = DateTime.now().month;
_year = DateTime.now().year;
}
#override
Widget build(BuildContext context) {
return StreamProvider<List<Expense>>.value(
stream: locator<ExpensesProvider>().getMonthExpenses(_month, _year),
initialData: [],
child: StreamProvider<List<Category>>.value(
stream: locator<ExpensesProvider>().getCategories(),
initialData: [],
child: Scaffold(
body: Container(
alignment: Alignment.center,
color: Theme.of(context).primaryColor,
padding: EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
InkWell(
child: DateHeader("$_month $_year"),
onTap: () => _selectDate(),
),
Expanded(
child: ExpenseList(
month: _month,
year: _year,
),
)
],
),
),
),
),
);
}
and expense_list.dart with the ExpenseList widget that consumes data from the StreamProvider.
class ExpenseList extends StatelessWidget {
final _dateFormat = DateFormat.yMMMEd();
final _dbService = locator<DatabaseService>();
final int month;
final int year;
ExpenseList({#required this.month, #required this.year});
String getMonthName(int month) {
return _dbService.monthNames[month - 1];
}
#override
Widget build(BuildContext context) {
var expenses = Provider.of<List<Expense>>(context);
var categories = Provider.of<List<Category>>(context);
return expenses.length < 1
? Center(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
"You do not have any expenses for ${getMonthName(month)}, $year",
style: Theme.of(context).textTheme.subhead,
textAlign: TextAlign.center,
),
),
)
: ListView.builder(
itemBuilder: (BuildContext context, int index) {
var cat = categories.firstWhere(
(category) => category.id == expenses[index].category,
orElse: () => Category.initial(),
);
var sub = cat.subs[expenses[index].subcategory];
var amount = expenses[index].amount;
var date = expenses[index].date;
return ExpenseCard(
expenseCategory: cat.name,
expenseSubCategory: sub,
expenseAmount: amount,
expenseDate: _dateFormat.format(date),
cardColor: Theme.of(context).cardColor);
},
itemCount: expenses.length,
);
}
}
My UI is constantly at this
,even though I expect it to update with the data from the StreamProvider.