I am a beginner in flutter and i tried to do a basic quiz type app which contains code given below.

import 'package:flutter/material.dart';

import './question.dart';
import './answer.dart';

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

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

class MyAppState extends State<MyApp> {
  var questionNo = 0;
  Widget build(BuildContext context) {
    void questionchange() {
      setState(() {
        questionNo = questionNo   1;
      });
      print('Answer 1 is selected');
    }

    const questions = [
      {
        'QuesionText': 'What is your favourite color',
>         'AnswerText': ['Red', 'Blue', 'Violet', 'Green'],
      },
      {
        'QuestionText': 'What is your favourite animal',
        'AnswerText': ['Tiger', 'Lion', 'Elephant', 'Rabbit'],
      },
      {
        'QuesionText': 'What is your favourite Country',
        'AnswerText': ['Rwanda', 'Netherland', 'USA', 'India'],
      }
    ];
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My first app'),
        ),
        body: Column(
          children: [
            Questions(questions[questionNo]['QuestionText'] as String),
            ...(questions[questionNo]['AnswerText'] as List<String>)
                .map((answer) {
              return Answers(questionchange, answer);
            }).toList(),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class Questions extends StatelessWidget {
  final String quest;
  Questions(this.quest);
  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.all(20),
        width: double.infinity,
        child: Text(
          quest,
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 26),
        ));
  }
}

import 'package:flutter/material.dart';

class Questions extends StatelessWidget {
  final String quest;
  Questions(this.quest);
  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.all(20),
        width: double.infinity,
        child: Text(
          quest,
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 26),
        ));
  }
}

When I try to run this, the app screen is showing

type 'Null' is not a subtype of type 'String' in type cast in red background.

Also the Debug console is showing as relevant error causing as MyApp widget and also the line Questions(questions[questionNo]['QuestionText'] as String).

Can anyone please tell me what is causing this error.

CodePudding user response：

there's a miss typing in your:

const questions = [
      {
        'QuesionText': 'What is your favourite color',
        'AnswerText': ['Red', 'Blue', 'Violet', 'Green'],
      },
      {
        'QuestionText': 'What is your favourite animal',
        'AnswerText': ['Tiger', 'Lion', 'Elephant', 'Rabbit'],
      },
      {
        'QuesionText': 'What is your favourite Country',
        'AnswerText': ['Rwanda', 'Netherland', 'USA', 'India'],
      }
    ];

because you wrote "QuesionText" instead of "QuestionText", it should be:

   const questions = [
      {
        'QuestionText': 'What is your favourite color',
        'AnswerText': ['Red', 'Blue', 'Violet', 'Green'],
      },
      {
        'QuestionText': 'What is your favourite animal',
        'AnswerText': ['Tiger', 'Lion', 'Elephant', 'Rabbit'],
      },
      {
        'QuestionText': 'What is your favourite Country',
        'AnswerText': ['Rwanda', 'Netherland', 'USA', 'India'],
      }
    ];

that happed because when you are reading it here:

   Questions(questions[questionNo]['QuestionText'] as String),

it would give you a null error.

CodePudding user response：

You have a typo in two of your keys ; replace 'QuesionText' with 'QuestionText'.