How to implement search bar for local json file in Flutter - flutter

Question

I have local json file in my flutter project and I'm able to display it on the initial load of the screen but when I try to implement search bar, the data is not displaying anymore for some reason.
I have been following YouTube tutorial but I couldn't find any video that filter local json file so I would be really appreciated if anyone can look at my code below and tell me where I did wrong.
I would be really appreciated if I can get any help or suggestion on why my data is not loading/displaying on the screen anymore.
import 'dart:convert';
import 'package:falamhymns/models/sawnawk_model.dart';
import 'package:falamhymns/sub_screens/detail_screen.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' as rootBundle;
class SawnawkScreen extends StatefulWidget {
SawnawkScreen({Key? key}) : super(key: key);
#override
State<SawnawkScreen> createState() => _SawnawkScreenState();
}
class _SawnawkScreenState extends State<SawnawkScreen> {
TextEditingController controller = new TextEditingController();
List<SawnAwkModel> _searchResult = [];
List<SawnAwkModel> _userDetails = [];
#override
void initState() {
super.initState();
ReadJsonData();
}
onSearchTextChanged(String text) async {
_searchResult.clear();
if (text.isEmpty) {
setState(() {});
return;
}
_userDetails.forEach((userDetails) {
if (userDetails.titleFalam.contains(text) ||
userDetails.titleEnglish.contains(text))
_searchResult.add(userDetails);
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: FutureBuilder(
future: ReadJsonData(),
builder: (context, data) {
return new Column(
children: <Widget>[
new Container(
color: Colors.blue,
child: new Padding(
padding: const EdgeInsets.all(8.0),
child: new Card(
child: new ListTile(
leading: new Icon(Icons.search),
title: new TextField(
controller: controller,
decoration: new InputDecoration(
hintText: 'Search', border: InputBorder.none),
onChanged: onSearchTextChanged,
),
trailing: new IconButton(
icon: new Icon(Icons.cancel),
onPressed: () {
controller.clear();
onSearchTextChanged('');
},
),
))),
),
new Expanded(
child: _searchResult.length != 0 ||
controller.text.isNotEmpty
? ListView.builder(itemBuilder: (context, index) {
return Card(
elevation: 5,
margin: EdgeInsets.symmetric(
horizontal: 10, vertical: 6),
child: new InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailScreen(
_userDetails[index].pageNumber),
));
},
child: Container(
padding: EdgeInsets.only(bottom: 8),
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(8),
child: Text(_userDetails[index]
.titleFalam
.toString()),
),
Padding(
padding: EdgeInsets.all(8),
child: Text(_userDetails[index]
.titleEnglish
.toString()),
),
],
),
),
),
);
})
: new ListView.builder(
itemCount: _userDetails.length,
itemBuilder: (context, index) {
return new Card(
child: new ListTile(
title: new Text(
_userDetails[index].titleFalam)),
);
}))
],
);
}));
}
}
Future<List<SawnAwkModel>> ReadJsonData() async {
final jsondata =
await rootBundle.rootBundle.loadString('data/sawnawk_data.json');
final list = json.decode(jsondata) as List<dynamic>;
return list.map((e) => SawnAwkModel.fromJson(e)).toList();
}

Answer 1

A couple problems with your code.
Don't call async functions in initstate method, use FutureBuilder only for that. In your code you're calling it in both places, doesn't make sense.
You fetched the data in the FutureBuilder call, but didn't used it anywhere in your code. _userDetails was initialized to empty array and never given the fetched data. The code is displaying this empty array.
You're displaying not the _searchResults, rather _userDetails. So search won't change anything. And to re-render the widget with the filtered data, you need to call the setState method.
Even if you solve the above mentioned problems and the data appears on your screen, what will happen is that for each key you'd press in the search box, it will rebuild the widget, refetch the data, again reading the json file. This is because the stateful widget responsible for handling search changes its state on each keystroke to re-render, rebuilding the FutureBuilder along with it.
You need to completely reorganize the widgets. Have a stateless widget return FutureBuilder that fetches the data, and returns a stateful widget that takes in the data to display it and has that search bar.
Something like this:
class SawnawkScreen extends StatelessWidget {
const SawnawkScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: ReadJsonData(),
builder: ((BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState != ConnectionState.waiting) {
return SawnawkBuild(_userDetails : snapshot.data ?? []);
} else if (snapshot.hasError) {
return Text("Error: ${snapshot.error}");
} else {
return const Center(child: CircularProgressIndicator());
}
}),
);
}
}
Here SawnAwkBuild widget displays the list of data and contains the search box. Initialize _userDetails with the received data in its initState function, like this
#override
initState() {
_userDetails.addAll(widget._userDetails);
_searchResults = _userDetails;
super.initState();
}
And then display values from _searchResults in this widget, and in the search filter function use setState to change it.