Map list of JSON to Tabbar flutter

Question

I'm trying to map list of json to tab bar, and want tab bar title as "JSON1"

API response :"data": [{"JSON1": {"key1": "val1","key2": "val2"}}],

My code : List dataResponse = [{JSON1: {key1: val1, key2: val2}}]; TabBar( tabAlignment: TabAlignment.start, indicatorSize: TabBarIndicatorSize.tab, dividerColor: Theme.of(context).dividerColor, controller: _tabController, indicatorColor: Theme.of(context).colorScheme.primary, labelColor: Theme.of(context).colorScheme.primary, unselectedLabelColor: Theme.of(context).primaryColorDark.withOpacity(0.8), isScrollable: Responsive.isDesktop(context) ? true : true, tabs: dataResponse.map((e) => Text(e)).toList(), ); `

Getting error: Expected a value of type 'String', but got one of type JsonMap

Answer 1

You received the error: Expected a value of type 'String', but got one of type JsonMap because you are sending the whole json in the Text widget of dataResponse.map((e) => Text(e)).toList()

where e = ({"JSON1": {"key1": "val1","key2": "val2"}})

instead, send only

"Json1"

To resolve the above issue, replace your code from

dataResponse.map((e) => Text(e)).toList()

with the following in tabs:

dataResponse.map((e) => Text(e.keys.first)).toList()

This code iterates through the list and finds the first key from each json map of the list. here first key is Json1 so you'll receive output as expected.

Answer 2

List dataResponse = [{"JSON1": {"key1": "val1", "key2": "val2"}}];

TabBar(
  tabAlignment: TabAlignment.start,
  indicatorSize: TabBarIndicatorSize.tab,
  dividerColor: Theme.of(context).dividerColor,
  controller: _tabController,
  indicatorColor: Theme.of(context).colorScheme.primary,
  labelColor: Theme.of(context).colorScheme.primary,
  unselectedLabelColor: Theme.of(context).primaryColorDark.withOpacity(0.8),
  isScrollable: Responsive.isDesktop(context) ? true : true,
  tabs: dataResponse.map((e) {
    // Extract the title (assuming there's only one key in the JSON map)
    String title = e.keys.first;
    return Tab(text: title);
  }).toList(),
);