{"No":"020474","name":"Ayuk Baye"}{"No":"08273","name":"Cedrick"}{"No":"08274","name":"Ayuk Baye"}{"No":"08275","name":"Ayu Rebecca"}{"No":"08276","name":"Raymond"}{"No":"08277","name":"Jolie"}{"No":"08278","name":"Prince"}{"No":"08474","name":"Ayuk Baye"}

this is my associative array in php i need help in parsing this data into a listView Builder with flutter.

CodePudding user response：

To start off, the backend language doesn't matter. At all, so your question is basically asking 2 things.

1. How to parse Json in Flutter
2. How to draw a list in flutter

For #1 you can use json serialiser. The json content above is not valid, but if you put it in an array then it will be valid.

[
   {"No":"020474","name":"Ayuk Baye"}{"No":"08273","name":"Cedrick"},
   {"No":"08274","name":"Ayuk Baye"}{"No":"08275","name":"Ayu Rebecca"},
   {"No":"08276","name":"Raymond"}{"No":"08277","name":"Jolie"},
   {"No":"08278","name":"Prince"}{"No":"08474","name":"Ayuk Baye"}
]

Now that you have valid JSON you can use the Json serialise docs. Once you have a list of items you can move on to 2.

Where you simply use a list view to show your list.

ListView.builder(itemBuilder: (context, index) => 
    Container(child: 
       Text(myJsonList[index].name))

CodePudding user response：

1) Create a model class for your json resopnce

search for json to dart converter online and make a model class for the responce

2) Get your responce from API

Like this: -

Future<http.Response> getdata() {
  return http.get(Uri.parse('your http end point'));
}

3) Convert the response into a custom Dart object

return YourModelClassName.fromJson(jsonDecode(response.body));

4) Fetch the data on desired page with initState

Your class should be stateful class

somting like this: -

class _MyAppState extends State<MyApp> {
  late Future<YourModelClass> getdata;

  @override
  void initState() {
    super.initState();
    getdata = getdata();
  }
  // ···
}

5) Show your data with futurebuilder

Refer the code below

FutureBuilder<Album>(
  future: futureAlbum,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return 
        //Show your listview.builder here
    } else if (snapshot.hasError) {
      return Text('${snapshot.error}');
    }

    // By default, show a loading spinner.
    return const CircularProgressIndicator();
  },
)

5) Show your data in listview builder

Refer this code below

ListView.builder(
  padding: const EdgeInsets.all(8),
  itemCount: entries.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      //Here you can show your data with the help of the model class
      //You can you the 'index' to iterate throug every data
    );
  }
);

For more information refer these documents

Fetching data from internet

Listview Builder

Thank you

CodePudding user response：

You can use FutureBuilder to get the data, then pass it in your ListView

 FutureBuilder<List<User>>(
    future: getUser, //your service to get the data from API
    builder: (BuildContext context, AsyncSnapshot snapshot) {
      if(snapshot.hasError) {
        return Container(
          color: Colors.white,
          height: MediaQuery.of(context).size.height,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [],
          ),
        );
      } else if (snapshot.hasData) {
        List<User> userList = snapshot.data;
        return ListView.separated(
            separatorBuilder: (BuildContext context, int i) =>   Divider(color: Colors.grey[400]),
             itemCount: userList.length,
             itemBuilder: (context, index) {
                 User user = userList[index];
                 return Container(
                    child: Text(user.name)
                 )
             }
         );
         }
     }
)