Flutter read from locally stored JSON file - flutter

Question

I have a local JSON file containing FAQ and I want to load its data in as a list, but I am not able to do that. The code I am using doesn't render anything. Kindly help
This is the stateful widget where I call my json file and want to render it. What I want is that as soon as the stateful widget is triggered, the readJson function is also triggered to store the data in a variable called _items.
class FAQScreen extends StatefulWidget {
FAQScreen({Key? key}) : super(key: key);
#override
State<FAQScreen> createState() => _FAQScreenState();
}
class _FAQScreenState extends State<FAQScreen> {
var _items = [];
void initState() {
readJson().then((value) => print("async done"));
super.initState();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
leading: IconButton(
onPressed: () {},
icon: const Icon(Icons.arrow_back_outlined),
),
title: const Text('FAQ'),
centerTitle: true,
backgroundColor: const Color.fromARGB(255, 17, 82, 156),
),
body: ListView(
scrollDirection: Axis.vertical,
children: _items.map((itr) => faqTile(itr['title'])).toList(),
),
),
);
}
Future<void> readJson() async {
final String response =
await rootBundle.loadString('assets/FAQScreens/FAQlist.json');
final data = await json.decode(response);
setState(() {
_items = data;
});
}
}
Below is the definition of faqTile:
Widget faqTile(String str) {
return InkWell(
onTap: () {},
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Container(
child: ListTile(
onTap: () {},
contentPadding:
const EdgeInsets.only(left: 0.0, right: 0.0, top: 5, bottom:5),
title: Text(
str,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
trailing: const Icon(
Icons.arrow_forward_ios,
size: 18,
color: Color(0xff303030),
),
),
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(
width: 2.0,
color: Color(0xffcfd8dc),
),
),
),
),
),
);
}

Answer 1

Though I would think your code should work, using the async function inside your initState could cause trouble, if it completes before the call to super is complete.
First of all, have you added the JSON file as an asset to your pubspec.yaml?
https://docs.flutter.dev/development/ui/assets-and-images
Secondly, I would, to prevent the async issue from occuring, use a FutureBuilder in your Widget (you could then even make it stateless).
Widget build(BuildContext context) {
return FutureBuilder<Map<String, dynamic>>(
future: readJson(),
builder: (BuildContext context, AsyncSnapshot<Map<String, dynamic>> snapshot) {
Map<String, dynamic> data = snapshot.data ?? {};
return MyAwesomeViewWithJsonData(data: data);
}
);
}