Map method does not recognize the strings

Viewed 49

I am trying to make an app which I am learning from Udemy. The code doesn't read the text in map.i don't know what is wrong and its doesn't say the code is wrong.

main.dart

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

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  var _questionIndex = 0;

  void _answerQuestion() {
    setState(() {
      _questionIndex = _questionIndex + 1;
    });

    print(_questionIndex);
  }

  @override
  Widget build(BuildContext context) {
    var questions = [
      {
        "question": "What's your favorite color",
        "answers": ["green", "red", "blue"]
      },
      {
        "question": "What is your favorite animal",
        "answers": ["Tigress", "Viperous", "Mantis", "Panda"]
      },
      {
        "question": "Your favorite instructor.",
        "answers": ["Max", "Max", "Max", "Max", "Max"]
      },
    ];
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('QUIZZ'),
          centerTitle: true,
        ),
        body: Column(
          children: [
            Question(
              "questions[_questionIndex]['questionText']",
            ),
            ...(questions[_questionIndex]['answers'] as List<String>)
                .map((answer) {
              return Answer(_answerQuestion, answer);
            }),
          ],
        ),
      ),
    );
  }
}

question.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.0),
        textAlign: TextAlign.center,
      ),
    );
  }
}

answer.dart

import 'package:flutter/material.dart';

class Answer extends StatelessWidget {
  final VoidCallback
      selectHandler; // used "Function" instead of voidcallback and that was wrong;

  String answerText;
  Answer(this.selectHandler, this.answerText);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: RaisedButton(
        color: Colors.blue,
        textColor: Colors.white,
        child: Text('Answer 1'),
        onPressed: selectHandler,
      ),
    );
  }
}

Screenshot_1644055331

I am supposed to get the text that is mapped but instead I get what is as string in Question(). I tried to change the String in question.dart to dynamic still it doesn't seem to work

1 Answers

Write your Question widget like this Question("${questions[_questionIndex['questionText']}",)

children: [
        Question(
          "${questions[_questionIndex]['questionText']}",
        ),
        ...(questions[_questionIndex]['answers'] as List<String>)
            .map((answer) {
          return Answer(_answerQuestion, answer);
        }),
      ],
Related