skip to Main Content

I am new to Flutter. I am building a quiz app and have the following three dart files:

main.dart

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

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

class MyApp extends StatefulWidget {
  State<StatefulWidget> createState(){
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp>{
  var _questionIndex = 0;
  _answerQuestion(){
    setState(() {
      _questionIndex = _questionIndex + 1;
    });
}
  @override
  Widget build(BuildContext context) {
    var questions = [
      {'questionText': 'What's your favourite color ?',
        'answers': ['Red','Blue','White','Black']
      },
      {'questionText': 'What's your favourite Animal ?',
        'answers': ['Dog','Rabbit','Tiger','Monkey']
      },
      {'questionText': 'What's your favourite Day ?',
        'answers': ['Tuesday','Monday','Sunday','Friday','Wednesday','Saturday']
      },
    ];
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My First App'),
        ),
        body: Column(
          children: [
            Question(questions[_questionIndex]['questionText'] as String,
            ),
            ...(questions[_questionIndex]['answers'] as List).map((answer) {
              return Answer(_answerQuestion(),answer);
            }).toList()
    ],
        )
      ),
    );
  }
}

question.dart

import 'package:flutter/material.dart';


class Question extends StatelessWidget {
  final String questions;
  Question(this.questions);

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

answer.dart

import 'package:flutter/material.dart';

class Answer  extends StatelessWidget {
  final Function buttonHandler;
  final String answer;

  Answer(this.buttonHandler,this.answer);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: ElevatedButton(
        child: Text(answer),
        style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.blue),
            foregroundColor: MaterialStateProperty.all(Colors.white)
        ),
        onPressed: () => buttonHandler,
    ),
    );
  }
}


when I run the application on my android in Android studio, I get this error:

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY╞═══════════════════════════════════════════
The following _TypeError was thrown building MyApp(dirty, state: _MyAppState#7f7de):
type ‘Null’ is not a subtype of type ‘Function’
The relevant error-causing widget was:
MyApp file:///C:/src/first_app/lib/main.dart:7:10

3

Answers


  1. Your code is working fine try flutter clean

    Login or Signup to reply.
  2. This:

    onPressed: () => buttonHandler,
    

    needs to be either:

    onPressed: buttonHandler,
    

    or

    onPressed: () => buttonHandler(),
    

    depending on whether your handler matches the required signature exactly.

    In addition, this:

    return Answer(_answerQuestion(),answer);
    

    needs to be

    return Answer(_answerQuestion,answer);
    

    Generally speaking, you have mixed up calling a method and passing a method as a parameter a few times, you may want to get more familiar with it.

    Login or Signup to reply.
  3. First, you must pass a function structure instead returning value from the function by calling it.

    You declared this function below:

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

    and passed the return value instead of function structure like below:

    return Answer(_answerQuestion(),answer);
    

    As you can see the return value of _answerQuestion() is Null.
    Change your code like this.

    return Answer(_answerQuestion,answer);
    

    And you need to call the funcion in the Answer component.

    onPressed: buttonHandler
    

    or

    onPressed: () => buttonHandler()
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search