title: Using conditional to select different set of widgets in Flutter
body: <p>I am following Angela Yu's introductory course on Flutter and extending the Quizzler project for personal challenge. At the end of a quiz, I give the user a chance to start again (show the first question screen) or to end the game (show a &quot;goodbye&quot; screen). I have this basic structure:</p>
  <pre><code>class _QuizPageState extends State&lt;QuizPage&gt; {
    Widget selectContents() {
      // getGameState() reads a boolean flag; false means user is quitting
      // but a change from true to false is only detected
      // when main.dart is saved in the IDE.
      print('Game State: --------&gt; ${quizBrain.getGameState()}');
      return (quizBrain.getGameState()) ? QuizContents() : GoodbyeScreen();
    }
  
    @override
    Widget build(BuildContext context) {
      return Container(
        child: selectContents(),
      );
    }
  }
  </code></pre>
  <p>This does not work. When the user opts to end the quiz, the choice does not register and the last screen of <code>QuizContents</code> remains visible. When I go into the IDE and simply save <code>main.dart</code>, the flag somehow updates (and the <code>print</code> statement now reports the right value for the game state) and <code>GoodbyeScreen()</code> appears in the simulator.</p>
  <p>This problem has many versions and suggestions on StackOverflow. I have tried all the solutions <a href="https://stackoverflow.com/questions/49713189/how-to-use-conditional-statement-within-child-attribute-of-a-flutter-widget-cen">here</a> and <a href="https://stackoverflow.com/questions/57075342/flutter-how-to-conditionally-add-a-widget">here</a>, including:</p>
  <ul>
  <li>putting the ternary operator directly as a child to the <code>Container</code></li>
  <li>using a <code>Builder</code> widget instead of the <code>Container</code></li>
  <li>putting the <code>selectContents()</code> function inside and outside the <code>build()</code> method of <code>_QuizPageState</code></li>
  <li>using <code>if/else</code> cascade inside an anonymous function as a child to the <code>Container</code></li>
  <li>...etc</li>
  </ul>
  <p>None of these have worked and the behaviour remains the same.</p>