Flutter: Create Grouped Listview from Map <String, Object>-CodePudding

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 "Team" objects with all its parameters as a name, year of birth etc.

I am trying to build an UI as illustrated in the image but I am having difficulty creating the Listview from the map.

I've tried to use also the 'grouped_list' package, but still not working :/

The code, right now is:


class RoasterPage extends StatefulWidget {
  RoasterPage({Key? key}) : super(key: key);

  @override
  State<RoasterPage> createState() => _RoasterPageState();
}

class _RoasterPageState extends State<RoasterPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<Map<String, List<Team>>>(
          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,
                ),
              );
            }
          }),
    );
  }
}

snapshot.data prints:

{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']}

Could anyone help me? thank you

The Layout that i'm trying to achieve:

Layout

CodePudding user response：

As I understood you're only struggling to create the UI. So assuming you have no problem with parsing the object. Your main component is a ListView.builder with different lists for defenders, wingers and strikers.

Here you create a column with three listviews.

Column(
        children: [
          CustomListView(teams: strikersList),
          CustomListView(teams: defendersList),
          CustomListView(teams: wingersList),
        ],
      )

And the CustomListView would look like something like this:

    class CustomListView extends StatelessWidget {
  final List<Team> teams;
  const CustomListView({Key? key,required this.teams}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: teams.length,
        itemBuilder: (context,index) => ListTile(
      leading: Image.asset('example'),
      title: Text(teams[index].name),
      subtitle: Text(teams[index].age),
    ));
  }
}

and for parsing, for example to take a list of strikers you will write:

List<Team> strikersList = snapshot.data![striker];

and same applies for other lists, only with different key

CodePudding user response：

try this Map<String,dynamic>