'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 |
|---|
