Make specific words from JSON String clickable Flutter - json

Question

I have a JSON response where i am getting some questions. Now after getting those questions i want to split them into words and match those words with another JSON response and on match i want to highlight those words and make them clickable so i can show a pop up which contains that word's translation which is present in my 2nd response. At the last i want to show both matched and unmatched words together just like it was a question before but with clickable words.
This is what i want
this is my first json
"status": "true",
"message": "message",
"demo": [
{
"qtnNumber": 1,
"qtnItalian": "Il segnale raffigurato preannuncia un tratto di strada in cui è consentita la manovra di retromarcia",
"qtnCategory": "SEGNALEI VERTICALI DI PERICOLO",
"qtnType": true
},
{
"qtnNumber": 2,
"qtnItalian": "Il segnale strada in cui è consentita la manovra di retromarcia",
"qtnCategory": "SEGNALEI VERTICALI DI PERICOLO",
"qtnType": true
},
this is my second json
{
"status": "true",
"message": "Vocabulary",
"vocabulary": [
{
"id": 3406,
"italian": "a condizione ",
"punajbi": "ਹਾਲਾਤ ਕੰਡੀਸ਼ਨ",
"english": "condition",
"number": null,
"punjabiEnglish": "halat",
},
{
"id": 3407,
"italian": "a raso",
"punajbi": "ਪਲੇਨ ਇਸ ਦਾ ਬੁੱਕ ਵਿੱਚ ਪੂਰਾ ਲਫ਼ਜ਼ ਹੇ incrocio a raso => ਇਸ ਦਾ ਮਤਲਬ ਪਲੇਨ ਚੌਕ ਇੱਕੋ ਲੈਵਲ ਤੇ ਬਣਿਆ ਹੋਇਆ ਚੌਕ",
"english": "plane",
"number": "ikO LEVEL DA CHONK",
"punjabiEnglish": null,
},
{
"id": 3408,
"italian": "accesso",
"punajbi": "ਦਾਖਿਲ",
"english": "Entry",
"number": null,
"punjabiEnglish": "Dakhil",
}
now from first json after splitting each question into words i want to match those words with my 2nd json 'italian' field and if matched i want to highlight those words

Answer 1

import 'dart:convert';
const raw_sentences = '''
{
"status": "true",
"message": "message",
"demo": [
{
"qtnNumber": 1,
"qtnItalian": "Il segnale raffigurato preannuncia un tratto di strada in cui è consentita la manovra di retromarcia",
"qtnCategory": "SEGNALEI VERTICALI DI PERICOLO",
"qtnType": true
},
{
"qtnNumber": 2,
"qtnItalian": "Il segnale strada in cui è consentita la manovra di retromarcia",
"qtnCategory": "SEGNALEI VERTICALI DI PERICOLO",
"qtnType": true
}
]
}
''';
const raw_vocabulary = '''
{
"status": "true",
"message": "Vocabulary",
"vocabulary": [
{
"id": 3406,
"italian": "a condizione ",
"punajbi": "ਹਾਲਾਤ ਕੰਡੀਸ਼ਨ",
"english": "condition",
"number": null,
"punjabiEnglish": "halat"
},
{
"id": 3407,
"italian": "a raso",
"punajbi": "ਪਲੇਨ ਇਸ ਦਾ ਬੁੱਕ ਵਿੱਚ ਪੂਰਾ ਲਫ਼ਜ਼ ਹੇ incrocio a raso => ਇਸ ਦਾ ਮਤਲਬ ਪਲੇਨ ਚੌਕ ਇੱਕੋ ਲੈਵਲ ਤੇ ਬਣਿਆ ਹੋਇਆ ਚੌਕ",
"english": "plane",
"number": "ikO LEVEL DA CHONK",
"punjabiEnglish": null
},
{
"id": 3408,
"italian": "accesso",
"punajbi": "ਦਾਖਿਲ",
"english": "Entry",
"number": null,
"punjabiEnglish": "Dakhil"
},
{
"id": 3500,
"italian": "preannuncia"
},
{
"id": 3501,
"italian": "consentita"
}
]
}
''';
void main(List<String> args) {
var sentence = jsonDecode(raw_sentences)['demo'][0]['qtnItalian'] as String;
var vocabulary = jsonDecode(raw_vocabulary)['vocabulary'] as List;
var words = sentence.split(' ');
var matches = vocabulary.map<String>((m) => (m as Map<String, dynamic>)['italian']).toSet().intersection(words.toSet()).toList();
var references = Map.fromEntries(List.generate(matches.length, (i) => MapEntry(matches[i], vocabulary.firstWhere((m) => m['italian'] == matches[i])['id'])));
var new_sentence = <Map<String, dynamic>>[];
var idx = 0;
words.forEach((word) {
if (matches.contains(word)) {
new_sentence.add({'string': word, 'reference': references[word]});
idx += 2;
} else {
if (new_sentence.isEmpty || idx == new_sentence.length) new_sentence.add({});
new_sentence[idx]['string'] = (new_sentence[idx]['string'] ?? '') + ' $word';
}
});
print(sentence);
print(new_sentence);
}
Result:
Il segnale raffigurato preannuncia un tratto di strada in cui è consentita la manovra di retromarcia
[{string: Il segnale raffigurato}, {string: preannuncia, reference: 3500}, {string: un tratto di strada in cui è}, {string: consentita, reference: 3501}, {string: la manovra di retromarcia}]
With the new_sentence list you can create widgets (texts and buttons) to get your goal, that is the easy part and it is your work. Remember, this site is for help, it is not to do your whole work. Good day.