JSON file not loading on Flutter - flutter

Question

I am new to Flutter, am currently stuck with my JSON file content not populating on my emulator. It shows no error, yet not displaying. If I include the content directly in my codeblock, it works fine. I can't spot the issue.
Below are my codes:
main.dart code
import 'package:emailapp/messagelist.dart';
import 'package:flutter/material.dart';
void main() => runApp(EmailApp());
class EmailApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green
),
home: MessageList(title: 'Muss Mailer APP'),
);
}
}
messagelist.dart
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class MessageList extends StatefulWidget{
final String title;
const MessageList({Key key, this.title}) : super(key: key);
#override
State<StatefulWidget> createState()=>_MessageListState();
}
class _MessageListState extends State<MessageList>{
var messages=const [];
Future loadMessageList() async{
var content=await rootBundle.loadString('data/message.json');
print(content);
var collection=json.decode(content);
setState(() {
messages=collection;
});
}
void initstate() {
loadMessageList();
super.initState();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView.separated(
separatorBuilder: (context,index)=>Divider(),
itemCount: messages.length,
itemBuilder: (BuildContext context, int index){
var message=messages[index];
return ListTile(
isThreeLine: true,
leading: CircleAvatar( child: Text('AJ'),),
title: Text(message['subject']),
subtitle: Text(message['body'],maxLines: 2, overflow: TextOverflow.ellipsis,),
) ;
},
),
);
}
}
message.json
[ {
"subject":"My First Message",
"body":"Hello Form the other side of life fellas.. and happy to meet you guys"
},
{
"subject":"My Second Message",
"body":"Hello Form the other side of life fellas.. and happy to meet you guys"
},
{
"subject":"My Third Message",
"body":"Hello Form the other side of life fellas.. and happy to meet you guys"
},
{
"subject":"My Fourth Message",
"body":"Hello Form the other side of life fellas.. and happy to meet you guys"
},
{
"subject":"My Fifth Message",
"body":"Hello Form the other side of life fellas.. and happy to meet you guys"
},
{
"subject":"My Sixth Message",
"body":"Hello Form the other side of life fellas.. and happy to meet you guys"
}]
pubspec.yaml
assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
- data/message.json

Answer 1

It's just a spelling mistake. It's not initstate. Its initState (S is capital).
void initState() {
loadMessageList();
super.initState();
}

Answer 2

I would suggest making the following changes, to resolve some basic issues:
add Override notation to initState and use S in initState name:
as suggested by #Crazy Lazy Cat
#override
void initState() {
loadMessageList();
super.initState();
}
remove the use of setState inside the initState, it is not recommended to set state of a widget which has not been built yet:
Future loadMessageList() async{
// everything else, as it is
messages = collection;
}
remove const [] from the messages, since it is replaced in the initState anyways.
since the loadMessageList is async method you should use FutureBuilder for this purpose:
FutureBuilder(
future: loadMessageList,
builder: (context, snapshot) => snapshot.hasData ? your_widget() : Container(),
),
your_widget() widget refers to the ListView.separated widget in the build method.
create var messages = snapshot.data; before defining the ListView.separated code.
for this to work you need to change the code in loadMessageList:
Future loadMessageList() async {
// everything else, as it is
//messages = collection;
return collection;
}
No need of global messages variable now.