JSON file not loading on 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

This question can be closed as "typo / unrepro", as the solution was/is a spelling error. — halfer
– halfer, Commented Apr 29, 2020 at 16:57

halfer · Accepted Answer · 2020-04-29 16:55:58Z

1

It's just a spelling mistake. It's not initstate. Its initState (S is capital).

void initState() {
  loadMessageList();
  super.initState();
}

edited Apr 29, 2020 at 16:55

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Jan 6, 2020 at 14:29

Crazy Lazy Cat

15.3k5 gold badges36 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

J. S. Over a year ago

If the response fixed your issue. Please mark it as correct.

halfer · Accepted Answer · 2020-04-29 17:20:12Z

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.

Collectives™ on Stack Overflow

JSON file not loading on Flutter

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related