Issue
Error:
The following NoSuchMethodError was thrown building MyApp(dirty, state: _MyAppState#ad714):
The method 'map' was called on null.
Receiver: null
Tried calling: map<Answer>(Closure: (String) => Answer)
my code:
import 'package:flutter/material.dart';
import './qestion.dart';
import 'answer.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);
//print('Answer choosen');
}
Widget build(BuildContext context) {
var questions = [
{
'questionText': 'what\'s your favorite color?',
'answers': ['red', 'black', 'brown'],
},
{
'questionText': 'what\s your favorite animal ?',
'answers': ['lion', 'horse'],
},
];
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('My First Application'),
),
body: Column(
children: [
Question(
questions[_questionIndex]['questionText'],
),
...(questions[_questionIndex]['answer'] as List<String>)
. map((answer) {
return Answer(_answerQuestion, answer);
}).toList()
[],
// RaisedButton(
// child: Text('Answer 2'),
// onPressed: () => {print('it is a =anonymus ans')},
// ),
],
),
),
);
}
}
Problematic part may be:
...(questions[_questionIndex]['answer'] as List<String>)
. map((answer) {
return Answer(_answerQuestion, answer);
}).toList()
Question.dart:
import 'package:flutter/material.dart';
class Question extends StatelessWidget {
// const Question({ Key? key }) : super(key: key);
final String questionText;
Question(this.questionText);
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(10),
width: double.infinity,
child: Text(
questionText,
style: TextStyle(fontSize: 25),
textAlign: TextAlign.center,
),
);
}
}
Answer.dart
import 'package:flutter/material.dart';
class Answer extends StatelessWidget {
//const Answer({ Key? key }) : super(key: key);
final Function selectHandler;
final String answerText;
Answer(this.selectHandler, this.answerText);
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
child: RaisedButton(
textColor: Colors.black,
color: Colors.cyan,
child: Text(answerText),
onPressed: selectHandler,
));
}
}
how can i solve this error in VScode editor?
Solution
Let's talk about the main part, to generate Answer
widgets.
questions[_questionIndex]['answers']
provides us the answers per question. and by mapping this we can generate the List<Answer>
widgets. It will be long expression to handle(for me and failed), therefore I am using inline function to generate Answer
widgets.
...() {
final List<String?>? answers =
questions[_questionIndex]['answers'] as List<String?>?;
return answers == null
? [
Text("could not find any answer"),
]
: answers
.map(
(e) => Answer(
selectHandler: _answerQuestion,
answerText: e ?? "failed to get answer",
),
)
.toList();
}()
Another common issue is
Fuction can't be assing....void Function...
.
We can simply use VoidCallback
instead of Function
, else we need to use anonymous function to handle this.
Small issue like adding @override
, moving data to widget level, key constructor fixed on full snippet, and I prefer and suggest using named Constructor. You can search and learn more about those keywords.
Remember to handle range error and page navigation, I stop the _questionIndex
increment on end of list.
Run on dartPad
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() {
return _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
var _questionIndex = 0;
var questions = [
{
'questionText': 'what\'s your favorite color?',
'answers': ['red', 'black', 'brown'],
},
{
'questionText': 'what\s your favorite animal ?',
'answers': ['lion', 'horse'],
},
{
'questionText': 'what\s your favorite animal ?',
},
];
void _answerQuestion() {
setState(() {
/// handle range error,
if (_questionIndex < questions.length - 1) {
_questionIndex += 1;
}
});
print(_questionIndex);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('My First Application'),
),
body: Column(
children: [
Question(
questionText: questions[_questionIndex]['questionText'] as String,
),
...() {
final List<String?>? answers =
questions[_questionIndex]['answers'] as List<String?>?;
return answers == null
? [
Text("could not find any answer"),
]
: answers
.map(
(e) => Answer(
selectHandler: _answerQuestion,
answerText: e ?? "failed to get answer",
),
)
.toList();
}()
],
),
),
);
}
}
class Question extends StatelessWidget {
// const Question({ Key? key }) : super(key: key);
final String questionText;
const Question({
Key? key,
required this.questionText,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.all(10),
width: double.infinity,
child: Text(
questionText,
style: const TextStyle(fontSize: 25),
textAlign: TextAlign.center,
),
);
}
}
class Answer extends StatelessWidget {
final VoidCallback selectHandler;
final String answerText;
const Answer({
Key? key,
required this.selectHandler,
required this.answerText,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox(
width: double.infinity,
child: ElevatedButton(
child: Text(answerText),
onPressed: selectHandler,
));
}
}
Answered By - Yeasin Sheikh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.