flutter ←

---

Quiz

Application example tutorial

This is a simple quiz example.

//simple quiz
  import 'package:flutter/material.dart';

  const Color color1 = Color.fromARGB(255, 212, 55, 55);
  const Color color2 = Color.fromARGB(255, 93, 55, 219);
  const Color color3 = Color.fromARGB(255, 55, 218, 217);
  
  void main() => runApp(MaterialApp(
        home: MyApp(),
        debugShowCheckedModeBanner: false,
      ));
  
  class MyApp extends StatefulWidget {
    @override
    _MyAppState createState() => _MyAppState();
  }
  
  class _MyAppState extends State {
    bool buttonenabled = true;
    bool completed = false;
    var score = 0;
    var n = 0;
    List que_list = [
      Questions(
          "1. Does Canada have a larger land area, excluding water, than the US?",
          false),
      Questions("2. Does Greenland is a country on the North American continent?",
          false),
      Questions("3. Does Switzerland has the higher cost of living in the world?",
          true),
      Questions(
          "4. Does whole Africa has a larger population than China?", false),
    ];
  
    void checkAnswer(bool choice, BuildContext ctx) {
      if (choice == que_list[n].ans) {
        //debugPrint("Correct");
        score = score + 1;
        final snackbar = SnackBar(
          content: Text("Correct Answer"),
          duration: Duration(milliseconds: 200),
          backgroundColor: Colors.green,
        );
        Scaffold.of(ctx).showSnackBar(snackbar);
      } else {
        final snackbar = SnackBar(
          content: Text("Wrong Answer"),
          duration: Duration(milliseconds: 200),
          backgroundColor: Colors.red,
        );
        Scaffold.of(ctx).showSnackBar(snackbar);
      }
  
      setState(() {
        if (n < que_list.length - 1) {
          n = n + 1;
        } else {
          completed = true;
          final snackbar = SnackBar(
            content: Text("Quiz Completed Score $score/4"),
            duration: Duration(seconds: 1),
            backgroundColor: Colors.blueAccent,
          );
          Scaffold.of(ctx).showSnackBar(snackbar);
          //n=0;
          //reset();
          buttonenabled = false;
        }
      });
    }
  
    void reset() {
      setState(() {
        n = 0;
        score = 0;
      });
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          backgroundColor: color1,
          title: Text("Simple Quiz"),
          centerTitle: true,
        ),
        body: Builder(
          builder: (ctx) => Container(
            padding: EdgeInsets.symmetric(vertical: 20, horizontal: 15),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    OutlinedButton(
                      onPressed: () {
                        buttonenabled = true;
                        reset();
                      },
                      child: Text('Start', style: TextStyle(fontSize: 20)),
                      style: OutlinedButton.styleFrom(
                        padding: EdgeInsets.all(20),
                        shape: BeveledRectangleBorder(
                          borderRadius: BorderRadius.circular(12),
                        ),
                      ),
                    ),
                    OutlinedButton(
                      onPressed: () {
                        setState(() {
                          if (n > 0) {
                            n = n - 1;
                          } else {}
  
                          if (n < 4) {
                            buttonenabled = true;
                          } else {}
                        });
                      },
                      child: Text('Back',
                          style: TextStyle(fontSize: 20, color: color1)),
                      style: OutlinedButton.styleFrom(
                        padding: EdgeInsets.all(20),
                        shape: BeveledRectangleBorder(
                          borderRadius: BorderRadius.circular(12),
                        ),
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  height: 15,
                ),
                Container(
                  height: 100,
                  width: double.infinity,
                  padding: EdgeInsets.all(20),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(15.0),
                    border: Border.all(
                      color: color2,
                      width: 4,
                    ),
                    boxShadow: [
                      BoxShadow(
                        spreadRadius: 1,
                        blurRadius: 1,
                        color: color3,
                        offset: Offset(2.0, 2.0),
                      ),
                    ],
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        que_list[n].que,
                        style: TextStyle(
                          fontSize: 15.0,
                          color: Colors.black,
                        ),
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: 15,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    ElevatedButton(
                      child: Text("True",
                          style: TextStyle(
                            fontSize: 16,
                          )),
                      style: ButtonStyle(
                          padding: MaterialStateProperty.all(
                              EdgeInsets.fromLTRB(50, 15, 50, 15)),
                          foregroundColor:
                              MaterialStateProperty.all(Colors.white),
                          backgroundColor: MaterialStateProperty.all(color2),
                          shape: MaterialStateProperty.all(RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(8),
                              side: BorderSide(color: color2)))),
                      onPressed: buttonenabled
                          ? () {
                              checkAnswer(true, ctx);
                            }
                          : null,
                    ),
                    ElevatedButton(
                      child: Text("False",
                          style: TextStyle(
                            fontSize: 16,
                          )),
                      style: ButtonStyle(
                          padding: MaterialStateProperty.all(
                              EdgeInsets.fromLTRB(50, 15, 50, 15)),
                          foregroundColor:
                              MaterialStateProperty.all(Colors.white),
                          backgroundColor: MaterialStateProperty.all(color1),
                          shape: MaterialStateProperty.all(RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(8),
                              side: BorderSide(color: color1)))),
                      onPressed: buttonenabled
                          ? () {
                              checkAnswer(false, ctx);
                            }
                          : null,
                    ),
                  ],
                ),
                SizedBox(
                  height: 15,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Container(
                      color: Colors.white,
                      margin: EdgeInsets.all(25),
                      padding: EdgeInsets.all(35),
                      alignment: Alignment.center,
                      child: Text("Score $score/4",
                          style: TextStyle(
                            color: Colors.black,
                            fontWeight: FontWeight.bold,
                          )),
                    ),
                  ],
                ),
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [])
              ],
            ),
          ),
        ),
      );
    }
  }
  
  class Questions {
    String que;
    bool ans;
    Questions(this.que, this.ans);
}

---

Back to: Flutter index