Session Timeout Popup in Flutter

For security purposes, banks and other financial institutions are required to make sure their portal is secure, and thus a common feature of logging out the user due to inactivity is put in place by banks in their digital banking platforms and e-wallets.

I had the chance to implement the session timeout feature back in 2019 which came with some bugs and my colleague Anas Iqbal was able to resolve it, propose a better solution, and wrote about it here. His write-up became the baseline for what you are going to read in this article.

In order to implement the session timeout feature, there is no need for any dependency in pubspec.yaml. The ingredients include a Timer class from dart:async, a Base class, a Base state, and a mixin class using the Base class and Base state allowing it to be attached with either the whole MaterialApp or just a few screens. Know that there are some cons too when the project starts using HtmlElementView or an in-app web browser and the solutions will be discussed alongside.

Step 1:

First things first, create a new Flutter project from the command line using flutter create sessiontimeout or via Android Studio (whichever method you prefer).

After the project is created, open it in your preferred code editor.