A reminder of dart if statements: 

in dart we can create an if statement with the following syntax: 

if (condition) {

    'your code here'} 

else {

   ' if the condition fails do this'

}

 

ternary operators 

var x  = condition ? z : y

in the expression above x will be z if the condition is true, otherwise, it will be y.

 

we can use if statements and ternary operators in Flutter to render a widget based on a condition.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var questionIndex = 0;

  void answerQuestion() {
    setState(() {
      questionIndex = questionIndex + 1;
      print(questionIndex);
    });
 }

 

in the code above you can see I have a class MyApp, which has a method answerQuestion in the state class. this will increase the index of the question by 1, it is used to increase the index every time the user selects an answer for a question.

 

here is my questions object which is a list of Maps where each Map has keys question Text and question Answer: 

 

    var questions = [
      {
        'questionText': "What's your favourite food?",
        'questionAnswer': ['Pizza', 'Dolma', 'Pasta', 'burgers']
      },
      {
        'questionText': "What's your favorite color?",
        'questionAnswer': ['Red', 'Yellow', 'Orange']
      },
      {
        'questionText': "What's your favourite Hobby?",
        'questionAnswer': ['Camping', 'Walking', 'TV', 'Netflix']
      },
    ];

 

I want my app to render questions and when the questions are finished, render a text to state the questions are done.

 

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My Title'),
        ),
        body: questionIndex < questions.length
            ? Column(
                children: [
                  Question(questions.elementAt(questionIndex)['questionText']),
                  ...(questions.elementAt(questionIndex)['questionAnswer']
                          as List<String>)
                      .map((answer) {
                    return Answer(
                      onPressed: answerQuestion,
                      answerText: answer,
                    );
                  }).toList(),
                ],
              )
            : Center(
                child: Text('You did it'),
              ),

 

 

in the code above im using ternary operation and my condition is questionIndex < questions.length

if the questionIndex is within the length of questions object that means I still have question for that index, otherwise I'm out of questions and I can show my completion text.

you can see questions.dart and answer.dart in the previous tutorials.

 

import 'package:flutter/material.dart';
import 'question.dart';
import 'answer.dart';

// void main(){
//   runApp(MyApp());
// }

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var questionIndex = 0;

  void answerQuestion() {
    setState(() {
      questionIndex = questionIndex + 1;
      print(questionIndex);
    });
  }

  @override
  Widget build(BuildContext context) {
    var questions = [
      {
        'questionText': "What's your favourite food?",
        'questionAnswer': ['Pizza', 'Dolma', 'Pasta', 'burgers']
      },
      {
        'questionText': "What's your favorite color?",
        'questionAnswer': ['Red', 'Yellow', 'Orange']
      },
      {
        'questionText': "What's your favourite Hobby?",
        'questionAnswer': ['Camping', 'Walking', 'TV', 'Netflix']
      },
    ];

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My Title'),
        ),
        body: questionIndex < questions.length
            ? Column(
                children: [
                  Question(questions.elementAt(questionIndex)['questionText']),
                  ...(questions.elementAt(questionIndex)['questionAnswer']
                          as List<String>)
                      .map((answer) {
                    return Answer(
                      onPressed: answerQuestion,
                      answerText: answer,
                    );
                  }).toList(),
                ],
              )
            : Center(
                child: Text('You did it'),
              ),
      ),
    );
  }
}