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();
              }

Answer 3

if..else is statement and ? ternary is expression on dart(flutter).

We can't pass something to the body that is not an expression.

I asked this question on Flutter community channel, you can check it from here.

You can use the ternary operator as you did,

body: condition ? whileTrue() : whenFalse();

method as @Osama Kashif answered Or inline function

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

Answer 4

Use Visibility

 Visibility(
   visible:_questionIndex < _questionList.length 
   replacement:Result(/* ... */) ,
   child:Quiz(/* ... */)
 )

Or offstage:

 Offstage(
   offstage: _questionIndex < _questionList.length 
   child:Result(/* ... */)     
 ),
Offstage(
   offstage: _questionIndex >=  _questionList.length 
   child:Quiz(/* ... */)     
 )

Answer 5

You can simply use the ternary operator here, like

body: _questionIndex < _questionList.length ?
    Quiz(
        questionList: _questionList,
        questionIndex: _questionIndex,
        answerSelected: _answerSelected) :
    Result(_finalScore, _reset)

In case you're not familiar with ternary operators

statement ? true : false

if the statement is true the first statement/block after ? will run, otherwise the latter one