Loop a Map Type after call an async method-CodePudding

i have this method inside a class


Map<String, String> value = {};
bool isReady = false;


void getData() async {
    try {
        Map<String, String> data = await CustomerData().getService(selectedService);
        isReady = true;
        setState(() {
            value = data;
        });
    } catch (e) {
        print(e);
    }
}

i'd like to loop the results inside a widget so:

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('Customer'),
        ),
        body: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
                value.forEach((key, value) { 
                    Text('$key: $value'),
                 })  
            ],
        ),
    );
}

the only solution that i found is this but i don't like it

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('Customer'),
        ),
        body: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
                Text(isReady ? 'Service: value["deliver"]' : '?'),
                Text(isReady ? 'Status: value["status"]' : '?'),
                Text(isReady ? 'Note: value["note"]' : '?'),
            ],
        ),
    );
}

is possible loop a Map type that comes from a method async inside a Widget?

CodePudding user response：

To loop through a Map in a Widget, you can use a ListView.builder widget. The ListView.builder widget allows you to build a list of items on-demand. This is useful when the number of items in your list is not known beforehand, or when your list is very large.

To use the ListView.builder widget, you need to provide a builder function that returns a Widget for each item in the Map. Inside the builder function, you can access the key and value of each item in the Map using the index parameter. Here's an example of how you can use the ListView.builder widget to loop through a Map:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Customer'),
    ),
    body: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        // Use a ListView.builder widget to loop through the Map
        ListView.builder(
          // The number of items in the list is the number of items in the Map
          itemCount: value.length,
          // The builder function returns a widget for each item in the Map
          itemBuilder: (context, index) {
            // Access the key and value of each item in the Map using the index
            var key = value.keys.elementAt(index);
            var val = value.values.elementAt(index);
            // Return a Text widget with the key and value of the Map item
            return Text('$key: $val');
          },
        ),
      ],
    ),
  );
}

Note that you need to make sure that the Map is initialized before you try to access its items in the build method. You can do this by using the isReady variable that you defined in your code. You can check if the Map is ready by checking if the isReady variable is true. If the Map is not ready, you

CodePudding user response：

Use FutureBuilder to get future and then Listview.builder in the same way @haris told you.

CodePudding user response：

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: value.entries.map((e) => Text('${e.key}: ${e.value}')).toList(),
),