PREAMBLE
Hi Flutterflow Community and heyyya Inactive Member 🤗. My name is D, and I am excited to share with you today my contribution to the growth of Flutterflow - the ability to now make ANY Flutterflow app you want FULLY OFFLINE, FOR FREE!!
So, a cursory glance at the Flutterflow wishlist will show that one of the top unfulfilled requests is the ability to build offline apps inside Flutterflow (and NONE of the other rival Builders offer that YET too 🤭). But the feature is quite an ask for the FF team because right now priority should be ensuring that FF is STABLE for the ~ 1 million of us building here, like Steve said in one of his posts (and boy there is work to be done! So FF team should be laser-focused on that, PLEASE, THANKS).
YET, this feature was important too. To bring in a new set of people over to Flutterflow, I thus built it and I am introducing it to you today and it is available on the marketplace PENDING APPROVAL. 👇🏾
TANI FLUTTERFLOW MARKETPLACE LISTING
So let me tell you a bit about it and how it works, but first things first.
ACKNOWLEDGEMENTS
Before we dive into what TANI is and how it will give you wings (Read here what it is NOT 👉🏾 'Offline Databases, what they are not'). Next, I wanna acknowledge Bob Steele who first attempted this for his project and his passion to teach himself to build, made me think "you know what, I'll just help him out with this, and while at it do that for the community too". The second person is Deon Visser who was so impassioned about it many months ago and was gonna leave (thankfully he hasn't left FF), so I hope Deon you can build your app now, it's all super possible now. Finally Vincent Soemin you can now build that cool Textbook app for rural students too.
SO OKAY, D, COOL STORY, WHAT EXACTLY IS TANI??
Thanks for asking 😊! TANI is a No-Code Database Management Extension inside Flutterflow for the Flutter HiveDB. Essentially, Tani helps you to manage instances of Hive DB via a collection of Actions, Functions and Variables (14 Actions, 5 Functions, 9 App state variables, 3 Page state variables & 1 Custom Data Type, all pre-installed). So, when you create a 'table' in Flutterflow with Tani, you're actually creating a Hive Box under the hood. Think of it as how Supabase is basically PostgreSQL but without the hassle! Same. TANI is Hive but without a lot of its limitations or any CODE 😁. If you wanna know exactly how data is stored by Tani in Hive think of Firebase Real-time database. Both FB Realtime and Tani store your data in almost the same way (a big tree of key-json pairs). So you can see most to the advantages like blazingly fast speeds 🚀 and shallow queries all accrue (as do the limitations too though 🧐 nested AND/OR queries anyone???). Because Tani is basically Hive DB in a bespoke suit, it works on ALL PLATFORMS - iOS, Android, Linux, Windows, MacOS, Web. No additional setup required. Hive figures out how to store data on each platform (on the web it uses Indexed DB and you can LITERALLY see the Data schema in the browser console check screenshots at end of post, and press F11 on a windows PC when using the test app, although the actual data is raw byte data unintelligible for you to read).
OKAY?? BUT WHY HIVE MAN, HAVEN'T YOU HEARD OF SQFLITE/MONGO REALM?
Why not Hive? 'Sting like a Bee 🐝' remember? 😅 I'm kidding. The reasons were basically down to FOUR FACTORS and I chose in YOUR best interest:
SPEED. Hive is Faster than SQFLITE/SHARED PREFERENCES every single day of the week, and 3 times on Sunday; and for Offline DBs speed doesn't kill.
EXTENSIBLITY. Just like NoSQL itself as a concept, Hive is a blank slate you can mold (and Tani does just that!). You can make Hive behave in certain ways to get what you want. For example, Tani will support Search Indexing in the future versions. Even though Hive doesn't natively support that (extensibility remember?). SQFLITE on the other hand is just like everything SQL: "young man, there is a way we do things over here 🤨". So I realized I could take all of Hive's advantages and speed and take from SQL's rigidity and have a good wrapper! Tani works on iOS, Android, Windows, Linux and MacOS because of Hive. SQFLITE only supports iOS, Android and MacOS.
FLUTTERFLOW. I mean DUHHH. I'd have loved to use Isar (Hive's big brother) for Tani. But it won't work in Flutterflow the way FF is currently designed (damn you Build Runner!! 😪). I mean it can be made to work, but you WILL have to touch code, and that's against my philosophy for building anything for users. It must NOT involve coding or exporting apps or stuff like that, if it can't be done inside FF, I won't release it. Get users to copy and paste code? Sure. Absolutely. Users to write code? Naaah, you'll never find me there. So Hive is the ONLY offline DB 'write' now (🤭) that is so flexible that you can abstract away ALL of the coding and still get same performance.
FREEEE: Yeah I'm an open-source man to my core I want code to be FREE as much as is REASONABLE and so for this project, Mongo Realm, Objectbox and a lot of the other folks with not-so-free models were OUT from the start. So, TANI is FREEEEEE ✨✨❤
GREAT! SO HOW DOES TANI WORK?
The fun part! Tani works by abstracting Box lifecycle management in Hive away from you. So before you do anything at all. Once you just start your project. Tani establishes a Schema in Hive that tells hive that you will be storing data in the format of key-value pairs of the type {ANYTHING}-{ANYTHING} and that the 'ANYTHING' value in the pair will be a Map (that's Dart's language for JSON). In simple English, Tani tells Hive that :
"Dear Hive, this user will be bringing in data for you to store. The data coming in will be in the form of a 'Key' paired with a 'Value'. The Key can be anything but it will always be a single thing while the value will always be JSON containing one or more Key-Values itself, do you understand?"
Hive then replies
"Yes I do"
(which means you won't get any errors on app start).
SO, WHERE DO I COME IN, AGENT D HOW DO I BUILD WITH TANI?
You're the VIP, don't worry. YOU design the database Schema (using no-code you tell Tani what the 'Map/JSON with one or more Key-Values itself' we talked about will contain). So that way Tani understands your Database structure and helps you ensure data integrity (Uno, so we don't go putting Strings in a column for Integers). And how you design your Schema is to write an App State. No, no, not a new App State for each table, JUST ONE APP STATE TO RULE THEM ALL. Cool right?
Basically, you define what the 'column names' of your tables are and what type of data they will contain (TANI Supports Dart primitives - Strings, Boolean, Integers, Double & DateTime; and supports Lists of all the primitives. TANI DOES NOT support JSON/Map (because think about it, your data is already living in a JSON tree 😐 there can be only one King 👑 ).
The other reason is because Hive is a NoSQL database and like Firestore Docs will tell you
"IT IS ALWAYS BETTER TO KEEP THE DATA STRUCTURE FLAT AND SHALLOW FOR OPTIMAL PERFORMANCE"
So, if you plan to have nested tables inside another nested table or have a JSON object as a field of another JSON object. You'll have to take a different approach and flatten your structure when using Tani. And this is LOGICAL. An offline database should be BLAZING FAST. Instant reads and near-instant writes. Doing that in a nested JSON structure makes for bad business (don't believe me? Google, "I hate Firebase Realtime" and tell me what you see 🙈 ).
Due to the Foregoing neither Hive (nor it's Guardian angel Tani 😇) will support JSON fields for now. Flatten your data structure folks! (And ditch the join queries 👍🏽 too seriously! 🌚). But, if you would ABSOLUTELY have to do multiple nested sub-collections just based on how your app is designed then Tani may not work great for you. Perhaps you can get SQFLITE to work (your app would be slower though, that's a guarantee ❤).
OKAY D, I'M INTERESTED, BUT HOW ABOUT THE OTHER DATA STUFF?
Oh you mean the 'other' database stuff. Well, Tani's got you covered. Let's go over TANI's OTHER FEATURES:
SECURITY: Table Encryption is supported. Tani by DEFAULT encrypts your row IDs (the unique ID of each row of your data) using a crypto secure store. But if you want to encrypt the ENTIRE TABLE 📦 you can do so too. It's as simple as a true/false setting (the default is False by the way, as encryption-decryption slows down your read and writes, so only do it when needed).
QUERYING: A simple query syntax that allows you to write plain English queries to get back your data (all results are returned as a list of JSON objects, each object is a row that matches your query). So you can "display dynamic children" on a List View widget with the output of your query action.
CSV: import and Export for data migration. Yep! As LONG AS you have FORMATTED the header row correctly and it contains at least ONE ROW of data with the data of the type you want for each column
(in English I mean your CSV gotta be like this) :
=> Row1: Name, Age, Sex
=> Row2 : Doye, 10, Male
So that Tani will use the data in Row 2 to infer the TYPE of data you wanna store in each column of the table. E.g 10 tells Tani that 'Age' column in this data table will store Integers. What about export as CSV? Supported as WELL ! The action is there for you to use as you see fit. It packages the box 📦 and writes the CSV.
⚠ DISCLAIMER : don't come asking " Agent D it doesn't work on iPhone 16" that's for you to resolve, not me 🤗, the action works to create the CSV file and gives it to you, that's where my own job ends.CRUD: operations, in addition to querying. You can Get Row by ID (single row, or many rows up to 100 rows in one go). You can CREATE, UPDATE by ID, and DELETE by ID.
THIS IS SOO COOL, BUT, WHAT'S THIS QUERY LANGUAGE YOU MENTION? CODE?
Ahhh yes, so just like any database. Storing data is more than just saving it. You must be able to retrieve it consistently. Also because TANI stores your data in a JSON tree you must have a way of building the JSON object when you want to save new data (uno "create new row"). Flutterflow for a long time did NOT contain any features for creating JSON (and now that it does, it's only via the static custom Data Types, it means you'd have to create a data type for EACH table you make, YUCK! 🤮). Tani Query steps in, it's a VERY SIMPLE MARKDOWN/SYNTAX! So with 'Tani Q' you can construct your JSON object in plain English using the Flutterflow Text combination feature and then you pass it to the Tani string parser which converts the string into a JSON object ready for you to use in your 'queryRows' action or your 'create new row' action! Cool right?? Let me give you an example, if you write this in no-code:
You get this:
*[**email**contains**string**user@example.com**]*
And the Tani Parser function will generate this JSON object for you:
{
"criteria": [
{
"email": {
"value": "[email protected]",
"operation": "Contains"
}
}
],
"matchAll": true,
"limit": null,
"dKey": 0,
"sort": {
"field": null,
"order": null
}
}
// matchAll, limit, dKey & sort are key words for pagination, sorting and logic, these are their defaults (values they assume if no specified in the Query).And this is what the queryRows Action needs to get your data from the Database. So you see how you can make incredibly complex applications with just simple strings! And you see you do not need to remember all the ** and [] stuff, just use the variables already made for you! So you don't have to type A SINGLE THING, just click, select, click select. Because all the query syntax strings are available as app state variables! Remember my promise? NO-CODE! You can even use Tani QL and the Parser function to build JSON objects for your app for other purposes you just write plain English and you get valid JSON!
So with this post I have introduced you to Tani and I am now working on the Documentation (thanks to Gitbook 😁 and my good man Bob volunteering to help out) and so by the time Tani is approved by Inactive Member for the marketplace, the Docs should be ready.
BUT I WANT TO SEE TANI NOW, RIGHT NOW?!
Oh of course! Here is a demo notebook app 📑 so you can see Tani CRUD + Query in action. Let the speed impress you 😁 Go and play around create, read, update and delete. For the Query, you'll see a default example to show you how to model your queries.
TANI NOTEBOOK DEMO APPLICATION
AND all of this is now available inside Flutterflow NO-CODE required.
CONCLUSION
I would like to say massive THANK YOU to Abel and Alex Greaves for Flutterflow (for me it's my superpower) and my hope is that someday Flutterflow will be the "world's only fullstack low-code development platform". Massive thanks to Serge Middendorf for showing the way, Joseph Pollone and Steve for always putting the FF team on notice when need be, and thanks to the many many of you who do good work and will build Tani apps 🤗.
TANI is FREEEEEE and OPEN SOURCE I made it for you to use and build with it whatsoever you want, and, monetize your app built on it however you see fit, AND it will always will be so. The source code is right there in the custom code tab of each action with some comments and all, so you can copy it and modify if you want (but don't come asking me for support questions when you break things 😂, I won't reply you 😂). I am open to other Flutter Devs in FF community who wanna make this better too. For the builders. Please BUILD and be happy! Offline apps are now a reality! That makes me glad. Cheers
Sincerely yours,
Agent D.
SCREENSHOTS FOR YOUR EYES
Georepublic Lea Schumacher Kai Roth Christoph Emrich Igor Rodrigues Biyi Iredele Aakaash Dawson Hulme heinrich Justin Pemberton Hélio Rahul Patil Joshua C ioannis kolliageorgas Vimalraj Nagendran Kushal Adrian Marcelo Cárcamo jerome houix JiRou Altan Antonio Aragón Del Cid RAI Declan Jean-Pierre Joey Amit Vidyasagar God Concept's sunny Hamilton Tenório da Silva Janos Kiss Leonardo Dal Piva awlh Alziro Ubiratã Ribeiro de Moraes Diana Okeel Arvi Yadav Serhat ALPASLAN - NETGLOBAL Сергей Горелов FredS Klavdiia Litvinenko ZKK MD Rashed Bin Kuddus you all upvoted it. Finally John Atkins when you return, check if Tani could work for you. Everyone, goodluck and happy building! 🚀✨