title: Flutter: Create Grouped Listview from Map <String, Object>
body: <p>Through a function, I managed to transform Json into a map where the key is the name of the role and the values are an array of &quot;Team&quot; objects with all its parameters as a name, year of birth etc.</p>
  <p>I am trying to build an UI as illustrated in the image but I am having difficulty creating the Listview from the map.</p>
  <p>I've tried to use also the 'grouped_list' package, but still not working :/</p>
  <p>The code, right now is:</p>
  <pre><code>
  class RoasterPage extends StatefulWidget {
    RoasterPage({Key? key}) : super(key: key);
  
    @override
    State&lt;RoasterPage&gt; createState() =&gt; _RoasterPageState();
  }
  
  class _RoasterPageState extends State&lt;RoasterPage&gt; {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: FutureBuilder&lt;Map&lt;String, List&lt;Team&gt;&gt;&gt;(
            future: NetworkManager().fetchRoster(),
            builder: (context, snapshot) {
              if (snapshot.hasError) {
                return const Center(
                  child: Text('Error Data loading '),
                );
              } else if (snapshot.hasData) {
                print(snapshot.data!);
                // TODO: Crete layout ***************************
                return ListView();
              } else {
                return const Center(
                  child: CircularProgressIndicator(
                    color: Colors.red,
                  ),
                );
              }
            }),
      );
    }
  }
  
  </code></pre>
  <p><strong>snapshot.data prints:</strong></p>
  <p>{Striker: [Instance of 'Team', Instance of 'Team', Instance of 'Team'], Winger: [Instance of 'Team', Instance of 'Team'], Defender: [Instance of 'Team', Instance of 'Team', Instance of 'Team']}</p>
  <p>The Layout that I'm trying to achieve:</p>
  <p><img src="https://i.stack.imgur.com/V1F77m.png" alt="Layout" /></p>