I have a json object where data array contains different maps including a map with the type list and data which contains another array of maps.

{
  "data": [
        {
          "type": "title",
          "data": "data1"
        },
        {
          "type": "text",
          "data": "data2"
        },
        {
          "type": "list",
          "data": [
            {
              "item1": "value1"

            },
            {
              "item2": "value2"

            },
            {
              "item3": "value3"

            }

          ]
        }
      ],
}

I also have view where i want to show the different items such as the title, text and list. I am able to show the text and title with the Text() widget.

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:salescore_mobile_app/app_controllers/block_handler/list_block_handler.dart';
import '../app_controllers/getters/settings_getters/get_client_settings.dart';
import 'app_menu.dart';

class AppView extends StatefulWidget {
  final List items;
  const AppView({Key? key, required this.items}) : super(key: key);

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

class _AppBaseState extends State<AppView> {
  @override
  initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            const SliverToBoxAdapter(),
            SliverList(
              delegate:
                  SliverChildBuilderDelegate((BuildContext context, int index) {
                return Column(
                  children: [
                    if (widget.items[index]['type'] == "list")
                      Container(
                          alignment: Alignment.topLeft,
                          child: Padding(
                            padding: const EdgeInsets.all(25),
                            child: SingleChildScrollView(
                              child: Table(
                                columnWidths: const {
                                  0: FixedColumnWidth(50),
                                  1: FlexColumnWidth(),
                                },
                                children:
                                    (widget.items[index]['data']).map((object) {
                                  return TableRow(children: [
                                    Container(
                                        color: (widget.items[index]['data'])
                                                        .indexOf(object) %
                                                    2 ==
                                                0
                                            ? const Color(0xFF161616)
                                            : Colors.grey[800],
                                        padding: const EdgeInsets.all(15),
                                        child: Text(
                                          object["title"].toString(),
                                          style: TextStyle(color: Colors.white),
                                        )),
                                  ]);
                                }).toList(),
                                border: TableBorder.all(
                                    width: 1, color: Color(0xFF161616)),
                              ),
                            ),
                          ))
                    else
                      Container(),
                    if (widget.items[index]['type'] == "title")
                      Container(
                        alignment: Alignment.topLeft,
                        child: Text(
                          widget.items[index]['data'],
                        ),
                      )
                    else
                      Container(),
                    if (widget.items[index]['type'] == "text")
                      Container(
                        alignment: Alignment.topLeft,
                        child: Text(
                          widget.items[index]['data'],
                        ),
                      )
                    else
                      Container(),
                  ],
                );
              }, childCount: widget.items.length),
            ),
          ],
        ),
        drawer: const AppMenu(),
      ),
    );
  }
}

As you can see i want to show the item1 inside TableRow, but the map with key item1 inside list array which i want to show inside TableRow gives an error: type 'List<dynamic>' is not a subtype of type 'List<TableRow>'.

This is because widget.items[index]['data'] which is the array maps of key list shows the array keys and values without quotes as the following when i debugPrint it:

[
            {
              item1: value1

            },
            {
              item2: value2

            },
            {
              item3: value3

            }

          ]

My question is how can I resolve the type decleration in my code so I can show item1 value as TableRow

CodePudding user response：

You will need to cast it. You can do this by calling .cast<TableRow>() on the List<dynamic>

So where you have

}).toList(),

You can change that to

}).toList().cast<TableRow>(),

Or even better, is to indicate the type on the map function. To do this you can change

(widget.items[index]['data']).map((object) {

to

(widget.items[index]['data']).map<TableRow>((object) {