Flutter : Prepare list data from http request - flutter

Question

I am trying to use Flutter Tagging Plugin (https://github.com/sarbagyastha/flutter_tagging). During the testing it is working fine with hard coded list. Now, I am changing it to make call to database and show the list based on that.
Database is returning the data and JSON Parse is also showing the data.
However, I am not able to use that data in Flutter Tagging. As I do not have good knowledge on Flutter.
Here is the code which is working fine when using hard-coded list.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_syntax_view/flutter_syntax_view.dart';
import 'package:flutter_tagging/flutter_tagging.dart';
void main() => runApp(MyApp());
///
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Tagging Demo',
theme: ThemeData(
primarySwatch: Colors.green,
scaffoldBackgroundColor: Colors.white,
),
home: MyHomePage(),
);
}
}
///
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String _selectedValuesJson = 'Nothing to show';
List<Language> _selectedLanguages;
#override
void initState() {
_selectedLanguages = [];
super.initState();
}
#override
void dispose() {
_selectedLanguages.clear();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Tagging Demo'),
),
body: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: FlutterTagging<Language>(
initialItems: _selectedLanguages,
textFieldConfiguration: TextFieldConfiguration(
decoration: InputDecoration(
border: InputBorder.none,
filled: true,
fillColor: Colors.green.withAlpha(30),
hintText: 'Search Tags',
labelText: 'Select Tags',
),
),
findSuggestions: LanguageService.getLanguages,
additionCallback: (value) {
return Language(
name: value,
position: 0,
);
},
onAdded: (language) {
// api calls here, triggered when add to tag button is pressed
return Language();
},
configureSuggestion: (lang) {
return SuggestionConfiguration(
title: Text(lang.name),
subtitle: Text(lang.position.toString()),
additionWidget: Chip(
avatar: Icon(
Icons.add_circle,
color: Colors.white,
),
label: Text('Add New Tag'),
labelStyle: TextStyle(
color: Colors.white,
fontSize: 14.0,
fontWeight: FontWeight.w300,
),
backgroundColor: Colors.green,
),
);
},
configureChip: (lang) {
return ChipConfiguration(
label: Text(lang.name),
backgroundColor: Colors.green,
labelStyle: TextStyle(color: Colors.white),
deleteIconColor: Colors.white,
);
},
onChanged: () {
setState(() {
_selectedValuesJson = _selectedLanguages
.map<String>((lang) => '\n${lang.toJson()}')
.toList()
.toString();
_selectedValuesJson =
_selectedValuesJson.replaceFirst('}]', '}\n]');
});
},
),
),
SizedBox(
height: 20.0,
),
Expanded(
child: SyntaxView(
code: _selectedValuesJson,
syntax: Syntax.JAVASCRIPT,
withLinesCount: false,
syntaxTheme: SyntaxTheme.standard(),
),
),
],
),
);
}
}
/// LanguageService
class LanguageService {
/// Mocks fetching language from network API with delay of 500ms.
static Future<List<Language>> getLanguages(String query) async {
await Future.delayed(Duration(milliseconds: 500), null);
return <Language>[
Language(name: 'JavaScript', position: 1),
Language(name: 'Python', position: 2),
Language(name: 'Java', position: 3),
Language(name: 'PHP', position: 4),
Language(name: 'C#', position: 5),
Language(name: 'C++', position: 6),
]
.where((lang) => lang.name.toLowerCase().contains(query.toLowerCase()))
.toList();
}
}
/// Language Class
class Language extends Taggable {
///
final String name;
///
final int position;
/// Creates Language
Language({
this.name,
this.position,
});
#override
List<Object> get props => [name];
/// Converts the class to json string.
String toJson() => ''' {
"name": $name,\n
"position": $position\n
}''';
}
I have create a http request function as below.
class LanguageService {
/// Mocks fetching language from network API with delay of 500ms.
static Future<List<Taggable>> getLanguages(String query) async {
List searchlists = [];
String searchvalue = query;
var dtguid = 10;
var dtgname = 'Test';
int count = 0;
String nodata;
await Future.delayed(Duration(seconds: 1), null);
if(searchvalue.length > 2 && searchvalue.length < 15 ){
searchlists.clear();
try{
var deviceid = '1234';
var dtgUid = '10';
dtguid = dtgUid;
print(searchvalue);
var body = { "uid" : dtgUid, "deviceid": deviceid, "searchtext": searchvalue};
var url = 'http://192.168.100.4:8080/search_tags.php';
// Starting Web API Call.
var response = await http.post(url, body: json.encode(body)).timeout(Duration(seconds: 5),
onTimeout: (){
return null;
});
if(response.statusCode == 200){
final data = getTagsFromJson(response.body);
var totalrec = data.content.length;
print('hi $totalrec');
if(data.content.length > 0 && data.content[0].tagname != 'Empty'){
for (var i in data.content) {
searchlists.add(i);
print(i.tagname);
}
}else{
nodata = 'No Record Found';
}
print(searchlists.length);
}
}catch(e){
print("Exception Caught: $e");
}
return searchlists;
}else{
return null;
}
Here is the JSON Parse File.
GetTags getTagsFromJson(String str) => GetTags.fromJson(json.decode(str));
class GetTags {
List<Content> content;
bool success;
String error;
GetTags({
this.error,
this.content,
this.success,
});
factory GetTags.fromJson(Map<String, dynamic> json) => GetTags(
error: json["error"],
content: (json["content"] as List).map((x) => Content.fromJson(x)).toList(),
success: json["success"],
);
}
class Content {
String tagname;
Content({
this.tagname,
});
factory Content.fromJson(Map<String, dynamic> json) => Content(
tagname: json == null ? 'Empty' : json["tagname"]
);
}