クイズソフトList & if/else

goal:List,if/elseを用いて問題解決ソフトを実現する.

スクリーン実装

画面には、クイズとクイズの「True」「False」ボタンが表示されます.
「Column」クラスには、2つの問題、2つのボタン、3行を含める必要があります.

Scaffold
bacckgroundColor : grey.shade[900]
-Padding
padding:対称(水平10)

Quizepage(Column)
主軸揃え:spaceBetween
交差軸の整列:stretch

Expanded1
flex : 5
-Padding
padding:前方10
-Text('You can lead a cow down stairs but not up stairs')
位置揃えいちあわせ:center center
サイズ:25
color : white

Expanded2
-Padding
padding:前方15
-TextButton
backgroundColor : green
-Text('True')
color : white
サイズ:20

Expanded3
-Padding
padding:前方15
-TextButton
backgroundColor : red
-Text('False')
color : white
サイズ:20

以上のように構造と属性を想定し,コードを記述した.

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

class Quizzler extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey.shade900,
        body: SafeArea(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            child: QuizPage(),
          ),  // Padding
        ),  // SafeArea
      ),  // Scaffold
    );  // Material
  }
}

class QuizPage extends StatefulWidget {
  @override
  _QuizPageState createState() => _QuizPageState();
}

class _QuizPageState extends State<QuizPage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          flex: 5,
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                'You can lead a cow down stairs but not up stairs.',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 25.0,
                  color: Colors.white,
                ),  // TextStyle
              ),  // Text
            ),  Center
          ),  // Padding
        ),  Expanded
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: TextButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.green),
              ),  ButtonStyle
              child: Text(
                'True',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.0,
                ),  // TextStyle
              ),  // Text
            ),  // TextButton
          ),  // Padding
        ),  // Expanded
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: TextButton(
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.red)),
              child: Text(
                'False',
                style: TextStyle(
                  fontSize: 20.0,
                  color: Colors.white,
                ),  // TextStyle
              ),  // Text
            ),  // TextButton
          ),  // Padding
        ),  // Expanded
      ],  // <Widget>[]
    );  // Column
  }
}

次の画面の実行を確認します.現在はプレイヤーとのインタラクションのために3つのことを考慮する必要がある.
1.ユーザーは「True」または「False」ボタンを押して次の問題に進みます.
2.ユーザーに選択した答えが正しいかどうかをリアルタイムで伝える.
3.「True」ボタンをクリックするとcheckアイコンがリアルタイムで追加され、「False」ボタンをクリックするとcloseアイコンがリアルタイムで追加されます.
以上の3つの条件を満たすためには、Listデータ型を使用する必要がある.

テキスト/整数タイプのLISTの作成

まず条件1を満たす.
問題を含むListタイプの変数と整数型変数0を生成します.

List<String> questions = [
    'You can lead a cow down stairs but not up stairs.',
    'Approximately one quarter of human bones are in the feet.',
    'A slug\'s blood is green.'
  ];
  int questionNumber = 0;

※slug'sの'を認識するために、\と前に書きます.
「List」のデータ型は文字型であり、<>に「String」と表記する.※
「Text」のハードコード文字列を「問題番号」変数に変更し、「TextButton」の「onPressed」を設定します.

変更前

child: Text('You can lead a cow down stairs but not up stairs.',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 25.0,
              color: Colors.white,
            ),  // TextStyle
          ),  // Text

変更後

child: Text(questions[questionNumber],
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 25.0,
              color: Colors.white,
            ),  // TextStyle
          ),  // Text

「True」および「False」ボタンの「onPressed」設定

onPressed(){
  setState((){
    questionNumber+=1;  // = questionNumber++;
  });
}

※ボタンをクリックすると、「問題番号」が0から1に変換され、「Text」で「問題[1]」が伝達されます.※

if/else設定

条件2を満たします.
用意した3つの質問の答えは嘘の順で、本当、本当です.リスト変数を生成します.※」List「アンデータのタイプは「bool(true,false)」です.※

List<bool> answers = [false, true, true];

n番目の質問であると仮定し,ユーザがクリックしたボタン(true or flase)が答え[n−1]と同じであれば正解を出力し,異なる場合は正解を出力する.
※Listは1からではなく、0からです.これも問題番号が0から始まる理由です.※
「onPressed」にif/elseコードを追加します.

onPressed(){
  if (answers[questionNumber] == true) { // 'False버튼은 answers[questionNumber] == False'
    print('correct');
  } else {
    print('not correct');
  }
  setState((){
    questionNumber+=1;  // = questionNumber++;
  });
}

WIGET(Icon)タイプリストの生成

最後に条件3を満たす.Columnの最後にアイコンを表すRowクラスを追加し、アイコンを収容する空のリスト変数を作成します.

List<Widget> scorekeeper = [];  // List생성
'
'
'
'
        Row(children: scorekeeper)
      ], // <Widget>[]
    );  // Column
  }
}  

ボタンをクリックすると、「scorekeeper」にアイコンが追加されていることを確認します.
次に、最終的に完了した「True」/「False」ボタンの「onPressed」コードを示します.

Trueボタン

onPressed: () {
  if (answers[questionNumber] == true) {
    print('right');
  } else {
    print('not correct');
  }
  setState(() {
    scorekeeper.add(Icon(
      Icons.check,
      color: Colors.green,
    ));
    questionNumber += 1; //= questionNumber++;
  });
},

Falseボタン

onPressed: () {
  if (answers[questionNumber] == false) {
    print('right');
  } else {
    print('not correct');
  }
  setState(() {
    scorekeeper.add(Icon(
      Icons.close,
      color: Colors.red,
    ));
    questionNumber += 1; //= questionNumber++;
  });
},