Using JSON Files from the Assets Folder

Hey FlutterFlow community! 🌟

If you've ever tried to use JSON files in FlutterFlow, you probably noticed that while it's possible through app state, this approach has its limitations. Another option is to host your JSON file on a server and pull it via an API—but that can be overkill for lightweight, static data that’s a bit too large for app states.

Here’s a handy solution, thanks to Levent IŞIK for bringing this solution to my attention: store your JSON in the assets folder and read it directly from there! This is perfect for medium-sized datasets where setting up hosting and API endpoints would add unnecessary complexity.

Here’s how to do it:

1. Custom Action to read and parse your JSON: Add this action to initialize the JSON and pass it as an action output parameter.
   
   Name: initializeJSON
   Return value: JSON not list, not nullable
   argument: jsonName string, not list, not nullable
   

   Copy

   import 'package:flutter/services.dart' show rootBundle; // For loading assets
   import 'dart:convert'; // For JSON decoding
   
   Future<dynamic> initializeJSON(String jsonName) async {
     // Load the JSON file from the assets folder using the provided jsonName
     String jsonString =
         await rootBundle.loadString('assets/jsons/$jsonName.json');
   
     // Decode the JSON data
     dynamic jsonData = json.decode(jsonString);
   
     // Return the parsed JSON data
     return jsonData;
   }

2. Custom Function to generate dynamic children based on your parsed JSON:
   
   Neme: getJSON
   return value: JSON
   argument: assetFile JSON, not list, not nullable

   Copy

   dynamic getJSON(dynamic assetFile) {
   
     // get the assetFile and return it
     // read the asset file and return it as a dynamic object
     dynamic json = assetFile;
     return json;
   }

Tips for Using JSON from Assets:

• Hide your list while your action output is empty to avoid null value errors.

• Enable “Download unused project assets” under settings so FlutterFlow includes your JSON in the build.

Use Cases:

• Populating dropdowns with predefined options

• Displaying static lists or catalogs

• Setting up localized content without an API

🎉 I’ve created a free template for you to explore this feature—try it out here:
https://completapp.gumroad.com/l/jsonFromAssets

Let me know how you’re using JSON in your projects, and happy building!