When clicking on menu item it returns null in the view. Error: `The method '[]' was called on null. Receiver: null Tried calling: []("books") `

Viewed 54

I have this json objects where i specify the menu objects and view objects.

# test.json

{
  "data": {
    "user" : "user1",
    "menu": [
      {
        "label": "Books",
        "view": "books"
      },
      {
        "label": "Author",
        "view": "authors"
      },
      {
        "label": "Publishers",
        "view": "publishers"
      }

    ],
    "view": {
      "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"
        }
      ],
      "publishers": [
        {
          "block_type": "title",
          "block_data": "Publishers"
        },
        {
          "block_type": "text",
          "block_data": "This is the for Publishers"
        }
      ]
    }
  }
}

I use class called AppContent() with the method getAppContent() to grab the json. I use the menu objects to display the labels inside a drawer menu. I then pass the content from the view key to AppView:

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

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

class _AppMenuState extends State<AppMenu> {
  late Map<String, dynamic> testObject = {};

  setTestData() async {
    await AppContent()
        .getAppContent()
        .then((result) => setState(() => testObject = result));
  }

  @override
  initState() {
    setTestData();
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
        child: ListView(padding: EdgeInsets.zero, children: [
      DrawerHeader(child: Container()),
      Column(
        children: [
          ListView.builder(
              physics: const NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              itemCount: testObject.containsKey("data")
                  ? (testObject["data"]["menu"] as List<dynamic>).length
                  : 0,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  onTap: () {
                    Navigator.pushAndRemoveUntil(
                      context,
                      MaterialPageRoute(
                        builder: (BuildContext context) => AppView(
                            selectedMenuItems: testObject["data"]["view"]
                                [testObject["data"]["menu"][index]["view"]]),
                      ),
                      (route) => false,
                    );
                  },
                  title: Center(
                    child: Column(
                      children: [
                        Text(
                          (testObject["data"]["menu"] as List<dynamic>)[index]
                              ["label"],
                        ),
                      ],
                    ),
                  ),
                );
              }),
        ],
      ),
    ]));
  }
}

Image below views the list of items i show from the json object:

enter image description here

I also have a stateful widget in a seperate file called AppView where the view content is passed and i use selecteItems as the passed data to show in the AppView


class AppView extends StatefulWidget {
  final List selectedMenuItems;

  const AppView({Key? key, required this.selectedMenuItems}) : super(key: key);

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

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

When i click on for example Books in the menu i get the following error: The method '[]' was called on null. Receiver: null Tried calling: []("books")

This shows that the view of books is passed when clicking on Books, but for some reason the content of books is null. How can i resolve this issue?

1 Answers

I made a typo. I had to change grabbedData["data"]["view"] to grabbedData["data"]["views"]. Now its working

Related