State Management

State Management plays a crucial part on developing such application. By using a library like Provider, we make the application is able to receive data from the same source. Therefore, this practice makes sure each page has a consistent data.

Here are some cases on how State Management is useful.

Handling Infinite Scroll

Since the app only shows the recent 10 news, we need to implement an infinite scroll to make sure user is able to retrieve old articles and access its recommended list of stocks. Here is what I do:

• First, inside ListView.builder, add controller attribute that will listen if the user reach the end of list, like this:

ListView.builder(
  controller: _scrollController,
  // Rest of the code
  // ...
)

• This _scrollController is initialized at the initState function inside of the Widget class, like this:

_scrollController.addListener(() {
  if(_scrollController.position.pixels >= _scrollController.position.maxScrollExtent * .9) {
    context.read<NewsProvider>().fetchMoreNews();
  }
});

• Such controller will call the function from the NewsProvider to fetch more news. This function runs differently from fetching the first ten news, so we have such function to retrieve the older news as the user scrolling down the screen. Like this:
• Code

Once the function has added the existing news with older news, the function will stop running and update the Widget that there is new news to read on.

Handling Premium Paywall

The users that are not premium users will only get up to 3 articles they can read. For implementing this, there is a edge case, where the user

• Can just sign out from the app and sign in once again to get another 3 free articles.

To mitigate this, a new variable in provider should be implemented and is recorded inside the database.

Since I’ve made a table for capturing information about the user, I will alter the table by doing this:

alter table public.profiles 
add column read_count int default 0;

Since the premium subscription is being handled by Supabase, a Provider for handling user authentication and premium firewall must be implemented. Here is the code:

• Full Code

Since the app needs to track the amount of free articles the users read and also need to block the paywall, such provider becomes the crucial part to know how much the articles have been read by the user along with have they become a premium user.

final userProv = context.watch<UserProvider>();

By calling this inside of the widget, we have a listener that will watch if there are any changes regarding the user’s premium status along with counting how much they have read the article.

Since we have such variables from the provider, we can make filter inside of the widget like this:

if(!userProv.isPremium && userProv.readCount <= 3)
  articleCounter(userProv),
  
// ................
// Rest of the code
// ................
  
if (userProv.isPremium)
  emitenWidget()
else if (userProv.readCount <= 3 && !userProv.isPremium)
  emitenWidget()
else
  premiumPaywall()

By using provider, we are able to implement monetize feature easier than before.