Question 75614 in Flutter Question posted in
The official Flutter documentation can be found here.

How can I pass a list of maps to a Column or Row in Flutter?

I am new to flutter dart and having trouble, with the syntax, to pass a list with multiple blocks to a function.
This is my list:

Final list = [
{
'name' : 'abc',
'age : '25',
'gender' : 'M',
},

{

'name' : 'def',

'age : '26',

'gender' : 'F',

},
{
'name' : 'ghi',
'age : '25',
'gender' : 'M',
},
];

Lets say this is my function that will show the output:

Myfunc () 
{
Text('name'),
Text('age'),
Text('gender')
};

So how will i write this function in actual syntax, (ignore some basic widgets).
Thanks in advance for reading this and helping ^^

Tags:

2

Answers


  1. 0

    You can do the following to pass an item to your function:

    Myfunc () 
{
  return list.map(item => 
    Row(
      children: [
        Text(item['name']),
        Text(item['age']),
        Text(item['gender']),
      ],
    )).toList();
};

    Are you trying to loop through your list and create a widget like this example?

    Login or Signup to reply.
  2. 0

    Your list contains maps (also know as dictionary in other languages). If this is written in Dart it will look like this.

    final List<Map<String, String>> myList = [
    {
      'name': 'abc',
      'age': '25',
      'gender': 'M',
    },
    {
      'name': 'def',
      'age': '26',
      'gender': 'F',
    },
    {
      'name': 'ghi',
      'age': '25',
      'gender': 'M',
    },
  ];

    In a full Flutter application this is how it will look like.

    import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<Map<String, String>> myList = [
    {
      'name': 'abc',
      'age': '25',
      'gender': 'M',
    },
    {
      'name': 'def',
      'age': '26',
      'gender': 'F',
    },
    {
      'name': 'ghi',
      'age': '25',
      'gender': 'M',
    },
  ];

  MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('List of Maps'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            for (var item in myList) Text(item['name']!),
          ],
        ),
      ),
    );
  }
}

    You can swap a Column with a Row, the only difference is that items in a row will be arranged horizontally.
    I also suggest that you read more on Dart collection operators here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search