'How to view specific blocks based on specific key values of json object

I have a use case where i need to show specific app contents for differrent users. Each user should see their own content. I have to make a login system for that, but the login logic is not part of this post. I purely want to know how to show different app menu items and view items based on a json content.

The json content has fixed keys. These fixed keys are user, menu_widget and view_widget. The values and the keys inside these are different for each user that will login to the app.

Once i get the json i want to show the widgets based on the json object.

Below i have for example a json object which has the fixed keys and inside those keys i have other keys which states the view, and label inside menu_widget and iside view_widget i have block_data and block_type (like title and text) These keys and key values can be different for different user so the app should also be smart enough to recognize that:

{
  "app_widgets": {
    "user" : "user2",
    "menu_widget": [
      {
        "label": "Recipes",
        "view": "recipes"
      },
      {
        "label": "Cooks",
        "view": "cooks"
      },
      {
        "label": "Cook books",
        "view": "cook-books"
      }

    ],
    "view_widget": {
      "recipes": [
        {
          "block_type": "title",
          "block_data": "Recipes"
        },
        {
          "block_type": "text",
          "block_data": "This is the view for Recipes"
        }
      ],
      "cooks": [
        {
          "block_type": "title",
          "block_data": "Cooks"
        },
        {
          "block_type": "text",
          "block_data": "This is the view for Cooks"
        }
      ],
      "cook-books": [
        {
          "block_type": "title",
          "block_data": "Cook books"
        },
        {
          "block_type": "text",
          "block_data": "This is the view for Cook books"
        }
      ]
    }
  }
}

I want to show the items of the key menu_widet inside a Drawer() widget from below widget called AppMenu:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class AppMenu extends StatefulWidget {
  const AppMenu({Key? key}) : super(key: key);

  @override
  _AppMenuState createState() => _AppMenuState();
}

class _AppMenuState extends State<AppMenu> {
  @override
  Widget build(BuildContext context) {
    return Drawer();
  }
}

Each items from the menu_widget should also be clickable and view a page with different blocks like title and text.

Below i have another widget called AppView which has a Scaffold. In this widget i want to view the contents from the menu item that is clicked from the menu:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'app_menu.dart';

class AppView extends StatefulWidget {
  const AppView({Key? key}) : super(key: key);

  @override
  _AppViewState createState() => _AppViewState();
}

class _AppViewState extends State<AppView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: AppMenu(),
      body: Center(child: Text("AppView")),
    );
  }
}

If for example you click on recipes from menu_widget i want to view the contents of view_widget["recipes"]. Notice later that every user has different 'key' names inside the fixed keys menu_widget and view_widget.

Inside the fixed key view_widget there happens to be two keys called block_type and block_data which specifies the type of block and the content of the block the app should show.

This is not fixed and can change later to no block_type or the order of block_type title and text could be reversed. So the app should be able to anticipate on that.

I also have two blue print widgets called TitleBlock and TextBlock which should be shown with the block_data.

TitleBlock:

import 'package:flutter/cupertino.dart';

class TitleBlock extends StatefulWidget {
  const TitleBlock({Key? key}) : super(key: key);

  @override
  _TitleBlockState createState() => _TitleBlockState();
}

class _TitleBlockState extends State<TitleBlock> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

TextBlock:

import 'package:flutter/cupertino.dart';

class TextBlock extends StatefulWidget {
  const TextBlock({Key? key}) : super(key: key);

  @override
  _TextBlockState createState() => _TextBlockState();
}

class _TextBlockState extends State<TextBlock> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

So AppView should be populated with these blocks based on the contents of the keys and key values of "view_widget" from the json object.

I also have a seperate file called get_content.dart with a method called getAppContent which loads the json object widget_user2.dart from the example i showed in the beginning:



class AppContent {
  Future<Map<String, dynamic>> getAppContent() async {
    String jsonData = await rootBundle.loadString('assets/widgets_user1.json');
    Map<String, dynamic> data = jsonDecode(jsonData);
    return data;
  }
}

So i wonder how i can make the app responsive to show the items from the key menu_widget inside AppMenu and click on a item to show the contents of key view_widget based on the menu item that is clicked. I then want to show different blocks like title and text based on the json object.

The app should not be able to only show the json object i have shown above but should also be smart enough to recognize another json object from the example below. This object is for another user which has inside menu_widget only two objects so the app should recognize how many indexes there are inside the fixed keys:

{
  "app_widgets": {
    "user" : "user1",
    "menu_widget": [
      {
        "label": "Books",
        "view": "books"
      },
      {
        "label": "Author",
        "view": "authors"
      },
      

    ],
    "view_widget": {
      "books": [
        {
          "block_type": "title",
          "block_data": "Books"
        },
        {
          "block_type": "text",
          "block_data": "This is the view for Books"
        }
      ],
      "authors": [
        {
          "block_type": "title",
          "block_data": "Author"
        },
        {
          "block_type": "text",
          "block_data": "This is the view for Author"
        }
      ],
      
    }
  }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source