Displaying widget conditionally in flutter

Question

I am just writing a simple application in flutter and I came across an situation where I need to display widget conditionally. When I use the ternary operator it is working perfectly fine.

Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("I quiz you, OK?"),
        ),
        body: (_questionIndex < _questionList.length)
            ? Quiz(
                questionList: _questionList,
                questionIndex: _questionIndex,
                answerSelected: _answerSelected)
            : Result(_finalScore, _reset),
      ),
    );
  }
//Woks fine

but when I replace it with if-else block I am getting an error as

Expected an identifier.dart(missing_identifier)

Expected to find ')'.dart(expected_token)

Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("I quiz you, OK?"),
        ),
        body: if(_questionIndex < _questionList.length)
            { 
              Quiz(
                questionList: _questionList,
                questionIndex: _questionIndex,
                answerSelected: _answerSelected)
            }
            
            else
            { 
              Result(_finalScore, _reset)
            },
      ),
    );
  }
//Getting error

What could be the issue as all brackets are balanced perfectly. I know I could just use ternary operator but there might arise a situation where if-else ladder would be required.

Note: Quiz() and Result() are custom widgets.

Answer 1

You cannot use a if/else statement as you did, here are several ways to do it:

body: () {
  if (_questionIndex < _questionList.length) {
    return Quiz(/* ... */);
  } else {
    return Result(/* ... */);
  }
}(),

or

body: Builder(
  builder: (context) {
    if (_questionIndex < _questionList.length) {
      return Quiz(/* ... */);
    } else {
      return Result(/* ... */);
    }
  },
),

Answer 2

you can create a method returning a widget and easily return what ever you want.

  Widget func(){ 
if(_questionIndex < _questionList.length){
 return Quiz( questionList: _questionList, questionIndex: _questionIndex, answerSelected: _answerSelected);}    

    else if(_questionIndex >= _questionList.length){ 
            return  Result(_finalScore, _reset); 
            }
    else{
    //widget is must
    return Container();
    }}
            Widget build(BuildContext context) {
                return MaterialApp(
                  home: Scaffold(
                    appBar: AppBar(
                      title: Text("I quiz you, OK?"),
                    ),
                    body: func();
              }