The element type 'Question' can't be assigned to the list type 'Widget' - flutter

Question

I can't use my own Class/Widget Question() from question.dart to main.dart (ERR Location 3rd line after body):
import 'package:flutter/material.dart';
import './question.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
var questionIndex = 0;
// State of function that process data to UI
void _answerQuestion() {
setState(() {
questionIndex = questionIndex + 1;
});
print(questionIndex);
}
void _pangBawas() {
setState(() {
questionIndex = questionIndex - 1;
});
print(questionIndex);
}
// End of State
// This section is responsible for builing UI
#override
Widget build(BuildContext context) {
var questions = [
'What\'s your favorite color?',
'What\'s your favorite animal?',
'What\'s your favorite food?',
'What\'s your favorite color?',
'What\'s your favorite dress?',
'What\'s your favorite position?',
];
// Start of UI
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('My First App'),
),
body: Column(
children: [
Question( //ERROR: The element type 'Question' can't be assigned to the list type 'Widget'.
questions[questionIndex],
),
RaisedButton(
child: Text('Answer 1'),
onPressed: _answerQuestion,
),
RaisedButton(
child: Text('Answer 2'),
onPressed: () => _pangBawas,
),
RaisedButton(
child: Text('Answer 3'),
onPressed: () {
//....
print('Hi');
}),
],
),
),
);
// End of UI
}
}
There's no error here, I only get error using Question() on my main.dart file
import 'package:/flutter/material.dart';
class Question extends StatelessWidget {
final String questionText;
Question(this.questionText);
#override
Widget build(BuildContext context) {
return Container(
child: Text(
questionText,
),
);
}
}

Answer 1

Making use of interpolation solves some errors and displays the error to you in your UI. The code below works just fine:
import 'package:flutter/material.dart';
class Question extends StatelessWidget {
final String questiontext;
Question(this.questiontext);
#override
Widget build(BuildContext context) {
return Text("$questiontext");
}
}
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
var questionIndex = 0;
// State of function that process data to UI
void _answerQuestion() {
setState(() {
questionIndex = questionIndex + 1;
});
print(questionIndex);
}
void _pangBawas() {
setState(() {
questionIndex = questionIndex - 1;
});
print(questionIndex);
}
// End of State
// This section is responsible for builing UI
#override
Widget build(BuildContext context) {
var questions = [
'What\'s your favorite color?',
'What\'s your favorite animal?',
'What\'s your favorite food?',
'What\'s your favorite color?',
'What\'s your favorite dress?',
'What\'s your favorite position?',
];
// Start of UI
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('My First App'),
),
body: Column(
children: [
Question(
//ERROR: The element type 'Question' can't be assigned to the list type 'Widget'.
"${questions[questionIndex]}",
),
RaisedButton(
child: Text('Answer 1'),
onPressed: _answerQuestion,
),
RaisedButton(
child: Text('Answer 2'),
onPressed: () => _pangBawas,
),
RaisedButton(
child: Text('Answer 3'),
onPressed: () {
//....
print('Hi');
}),
],
),
),
);
// End of UI
}
}

Answer 2

You could add itinerary operator to check If the Widget that is returned from the Question class is null or not. This happens because the Column's children widgets can't be null.
body: Column(
children: [
Question(questions[questionIndex]) == null
? SizedBox()
: Question(questions[questionIndex]),
This way if the widget returned from the Question class is null, then the Column will create a SizedBox instead of the Container + Text.