Offline IndexedDB – In Browser To-Do Web Page – Flutter Web – Source Code

Description

Simple Web To-DO app that includes IndexedDB and Flutter – using these features, design patterns and approaches, that you could reuse in other places.

• IndexedDB – It includes Create Read Update Delete (CRUD) operations on a basic To-do record with Data Store – the browser offline data storage (IndexedDB database) – implemented in pure JavaScript (with no external/additional dependendies)
• It uses the Flutter Framework for User Interface library and the Web as a Target Platform.
• The code is organized using the rx_bloc package to have good code structure
  • App Logic in BloC and Structure
  • Views only responsible for displaying
  • Using Coordinator – to communicate between list screen and change to-do screen
  • The indexeddb logic is encapsulated in a data source and swapping it away is handled only there

//This may be introduced back in the future.

• The UI Code is responsive. On Landscape screens (width > height) – the view split in two 50/50 – list + add/edit. On Portrait screens – the user interface is with one view at a time list or add/edit.

This is the empty state. It has a refresh and add buttons on the app bar and a message on the top.

This is the view for changing a to-do. When visited with new node – there is no remove button.

The list is paged so – when you have more that the screen could handle and you scroll – to-dos are loaded incrementally.