Flutter Provider/Consumer UI not Updating with Data Change - flutter

Question

I am new to Flutter and working on developing my first application. I an having trouble updating my UI based on data changes. I followed this tutorial: https://www.filledstacks.com/post/flutter-architecture-my-provider-implementation-guide/ (and added extra features with https://www.filledstacks.com/post/flutter-provider-architecture-sharing-data-across-your-models/), which walks through a MVVM setup using the GetIt library.
I have successfully passed the data through the viewmodels and services, but I can't get my UI to update. Essentially, I want a user to be able to tap the movie on their watchlist and remove it. This works in a data sense, but my Watchlist UI isn't updating when I pop back to it. My entire project is available at https://github.com/n0ahth0mas/movie_night, but the core files to this problem are listed here:
locator.dart
...
...
GetIt locator = GetIt.instance;
void setupLocator() {
locator.registerLazySingleton(() => AuthenticationService());
locator.registerLazySingleton(() => WatchlistService());
locator.registerLazySingleton(() => Api());
locator.registerLazySingleton(() => LoginModel());
locator.registerFactory(() => HomeModel());
locator.registerFactory(() => RemoveButtonModel());
locator.registerFactory(() => WatchlistModel());
}
watchlist_service.dart
...
...
class WatchlistService {
Api _api = locator<Api>();
List<Movie> _watchlist = [];
List<Movie> get watchlist => _watchlist;
Future getUserWatchlist(User user) async {
for (String id in user.watchlistId) {
_watchlist.add(await _api.getMovie(id));
}
}
bool inList(Movie movie) {
return _watchlist.contains(movie);
}
void editList(Movie movie, bool remove) {
if (remove) {
_watchlist.remove(movie);
print("removed " + movie.title + " from list in watchlist service");
} else {
_watchlist.add(movie);
print("added " + movie.title + " to list in watchlist service");
}
}
}
watchlist_model.dart
...
...
class WatchlistModel extends BaseModel {
WatchlistService _watchlistService = locator<WatchlistService>();
List<Movie> get watchlist => _watchlistService.watchlist;
Future getWatchlist(User user) async {
setState(ViewState.Busy);
await _watchlistService.getUserWatchlist(user);
setState(ViewState.Idle);
}
}
watchlist_view.dart
...
...
class WatchlistView extends StatelessWidget {
Widget _createMovieCard(Movie movie, BuildContext context) {
return CupertinoButton(
onPressed: () => _getInfo(movie, context),
child: Image.network(movie.getPoster(185)),
);
}
_getInfo(Movie movie, BuildContext context) {
Navigator.pushNamed(
context,
"details",
arguments: movie,
);
}
#override
Widget build(BuildContext context) {
return BaseView<WatchlistModel>(
onModelReady: (model) => model.getWatchlist(Provider.of<User>(context)),
builder: (context, model, child) => Scaffold(
body: model.state == ViewState.Idle
? CustomScrollView(
primary: false,
slivers: <Widget>[
CupertinoSliverNavigationBar(
largeTitle: Text("My Watchlist"),
trailing: Material(
color: Colors.transparent,
child: IconButton(
icon: Icon(CupertinoIcons.add_circled_solid),
onPressed: () =>
Navigator.pushNamed(context, 'search'))),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio:
MediaQuery.of(context).size.width /
(MediaQuery.of(context).size.height / 1.7)),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return _createMovieCard(
model.watchlist[index], context);
}, childCount: model.watchlist.length),
),
],
)
: Center(child: CircularProgressIndicator())));
}
}
removebtn_model.dart
...
...
class RemoveButtonModel extends BaseModel {
WatchlistService _watchlistService = locator<WatchlistService>();
//bool watchlistStatus()
void removeMovie(Movie movie) {
print("removed " + movie.title + " from list in remove button model");
_watchlistService.editList(movie, true);
notifyListeners();
}
void addMovie(Movie movie) {
print("added " + movie.title + " to list in remove button model");
_watchlistService.editList(movie, false);
notifyListeners();
}
}
details_view.dart
...
...
class DetailsView extends StatelessWidget {
_makeStars(double voteAverage) {
double trueRating = voteAverage / 2;
print(trueRating);
return GFRating(
color: Colors.yellowAccent[700],
value: trueRating,
size: GFSize.SMALL,
allowHalfRating: true,
);
}
_backdrop(String link) {
if (link != null) {
return Image.network("http://image.tmdb.org/t/p/w780/$link");
} else
return Image.asset("assets/images/transparent.png");
}
#override
Widget build(BuildContext context) {
Movie movie = ModalRoute.of(context).settings.arguments;
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
CupertinoSliverNavigationBar(
largeTitle: Text(movie.title),
trailing:
Material(color: Colors.transparent, child: RemoveButton(movie)),
),
SliverToBoxAdapter(
child: Column(
children: <Widget>[
Padding(padding: EdgeInsets.only(top: 20)),
Center(child: Image.network(movie.getPoster(342))),
Center(
child: Container(
padding: EdgeInsets.all(10),
child: Center(
child: Text(movie.title,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40, fontWeight: FontWeight.w800))),
)),
Container(
padding: EdgeInsets.only(bottom: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
_makeStars(movie.voteAverage),
Text("platform",
style: Theme.of(context).textTheme.headline5),
],
),
),
Container(
padding: EdgeInsets.fromLTRB(20, 0, 10, 50),
child: Text(movie.overview),
),
_backdrop(movie.backdropPath)
],
))
],
),
);
}
}
remove_btn.dart
...
...
class RemoveButton extends StatelessWidget {
final Movie movie;
RemoveButton(this.movie);
_showDialog(String id, bool inWatchlist, BuildContext context,
RemoveButtonModel model) {
if (inWatchlist) {
showDialog(
context: context,
child: CupertinoAlertDialog(
title: Text("Remove from your watchlist?"),
actions: <Widget>[
CupertinoDialogAction(
isDefaultAction: true,
onPressed: () =>
Navigator.of(context, rootNavigator: true).pop(),
child: Text("Cancel"),
),
CupertinoDialogAction(
textStyle: TextStyle(color: Colors.red),
onPressed: () => _deletelist(id, context, model),
child: Text("Remove"),
)
]));
} else {
showDialog(
context: context,
child: CupertinoAlertDialog(
title: Text("Add to your watchlist?"),
actions: <Widget>[
CupertinoDialogAction(
onPressed: () =>
Navigator.of(context, rootNavigator: true).pop(),
child: Text("Cancel"),
),
CupertinoDialogAction(
isDefaultAction: true,
onPressed: () => _addList(id, context, model),
child: Text("Add"),
)
]));
}
}
_deletelist(String id, BuildContext context, RemoveButtonModel model) {
model.removeMovie(movie);
Provider.of<User>(context).deleteFromWatchlist(id);
//Navigator.pushNamed(context, 'watchlist');
Navigator.popUntil(context, ModalRoute.withName('watchlist'));
}
_addList(String id, BuildContext context, RemoveButtonModel model) {
model.addMovie(movie);
Provider.of<User>(context).addToWatchList(id);
Navigator.popUntil(context, ModalRoute.withName('watchlist'));
}
Widget _rightBtn(Movie movie, BuildContext context, RemoveButtonModel model) {
if (Provider.of<User>(context).inWatchlist(movie)) {
return IconButton(
icon: Icon(Icons.remove_circle),
color: Colors.blue,
onPressed: () =>
_showDialog(movie.id.toString(), true, context, model));
} else {
return IconButton(
icon: Icon(Icons.add_circle),
color: Colors.blue,
onPressed: () =>
_showDialog(movie.id.toString(), false, context, model));
}
}
#override
Widget build(BuildContext context) {
return BaseView<RemoveButtonModel>(
builder: (context, model, child) => _rightBtn(movie, context, model),
);
}
}
Thanks for your help! I've been stuck on this for the past 3 days and cannot figure out what I'm doing wrong.