We can use map to run a function for each item within the iterable and return a result for each item, consider the following object: 

 

    var questions = [
      {
        'questionText': "What's your favourite food?",
        'questionAnswer': ['Pizza', 'Dolma', 'Pasta', 'burgers']
      },
      {
        'questionText': "What's your favorite color?",
        'questionAnswer': ['Red', 'Yellow', 'Orange']
      },
      {
        'questionText': "What's your favourite Hobby?",
        'questionAnswer': ['Camping', 'Walking', 'TV', 'Netflix']
      },
    ];

 

Some questions have 4 answers and some has 3 answers, and we have a widget for an Answer which takes in the answer text and a onPressed function to move into the next question when an answer has been pressed.

We are showing the question using the question index: 

Question(questions.elementAt(questionIndex)['questionText']),

and for the answers we will use map. 

 

...(questions.elementAt(questionIndex)['questionAnswer']
                    as List<String>)
                .map((answer) {
              return Answer(
                onPressed: answerQuestion,
                answerText: answer,
              );
            }).toList()

 

let's break it down: 

the leading ... is the spreading operator, this will just take all of the values of the list out of the list and into the parent list.

we are accessing the question index and using the map for the answers to the given questions.

The map takes in a function that has the value of each iterable as an argument, great now that we have access to each answer in the answer list we can return the Answer widget for each answer. 

finally, we are converting the result to the list using toList(), but using the spreading operate to remove the list at the start of the map.

This will make sure the correct number of answers are rendered on the screen, if a question has 4 answers there will be 4 Answer widgets if it has 3 there will be 3 Answer Widgets.

 

here is the full code: 

 

 

 

import 'package:flutter/material.dart';
import 'question.dart';
import 'answer.dart';

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var questionIndex = 0;

  void answerQuestion() {
    setState(() {
      questionIndex = questionIndex == 2 ? 0 : questionIndex + 1;
      print(questionIndex);
    });
  }

  @override
  Widget build(BuildContext context) {
    var questions = [
      {
        'questionText': "What's your favourite food?",
        'questionAnswer': ['Pizza', 'Dolma', 'Pasta', 'burgers']
      },
      {
        'questionText': "What's your favorite color?",
        'questionAnswer': ['Red', 'Yellow', 'Orange']
      },
      {
        'questionText': "What's your favourite Hobby?",
        'questionAnswer': ['Camping', 'Walking', 'TV', 'Netflix']
      },
    ];

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My Title'),
        ),
        body: Column(
          children: [
            Question(questions.elementAt(questionIndex)['questionText']),
            ...(questions.elementAt(questionIndex)['questionAnswer']
                    as List<String>)
                .map((answer) {
              return Answer(
                onPressed: answerQuestion,
                answerText: answer,
              );
            }).toList(),
          ],
        ),
      ),
    );
  }
}

// ,
//         body: Text('This is the body of the app'),

 

 

 

questions.dart

import 'package:flutter/material.dart';

class Question extends StatelessWidget {
  final String questionText;

  Question(this.questionText);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.all(10),
      child: Text(
        questionText,
        style: TextStyle(fontSize: 28),
        textAlign: TextAlign.center,
      ),
    );
  }
}

 

 

answer.dart

import 'package:flutter/material.dart';

class Answer extends StatelessWidget {
  final Function onPressed;
  final String answerText;

  Answer({this.onPressed, this.answerText});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: RaisedButton(
        color: Colors.blue,
        child: Text(answerText),
        onPressed: onPressed,
      ),
    );
  }
}