Membuat Aplikasi Quiz dengan Flutter
Published in
10 min readMay 18, 2019
Bismillah
Pada artikel kali ini kita akan membahas tentang sebuah aplikasi quiz yang sangat simple pada flutter. Tetapi sebelumnya selamat berbuka puasa dulu ya guys :)
ini bubur kampiun enak banget lo ;)
Untuk aplikasi quiz ini kita akan menggunakan widget radio button pada flutter.
Berikut ini adalah tampilan aplikasi quiz nya ;
Selain radio button, kita juga menggunakan library Toast, sebuah nitification widget pada flutter. Untuk penggunaan Toast bisa melalui link dibawah ini :
https://pub.dev/packages/fluttertoast#-readme-tab-
Untuk menggunakan library toast, pada pusbec.yaml tambahkan code :
fluttertoast: ^3.1.0Dan kemudian klik package get
Dan karena kita akan menggunakan gambar, maka buatlah sebuah directory dengan nama images, dan kemudian tambahkan 3 buah gambar pada directory tersebut
Kemudian pada pusbec.yaml, tambahkan seperti dibawah ini :
assets:
- images/Baiquelah, kita akan langsung ke codingannya.
Terlebih dahulu kita buat sebuah project flutter, deklarasikan beberapa variable seperti dibawah ini :
int _radioValue1 = -1;
int correctScore = 0;
int _radioValue2 = -1;
int _radioValue3 = -1;
int _radioValue4 = -1;
int _radioValue5 = -1;Pada code diatas, kita deklarasi beberapa nilai default dari widget radio button. Untuk kasus ini kita akan mencontohkan 5 buah soal dengan 3 jawaban radio button.
Setelah itu, agar ke 5 pertanyaan bisa di handle, kita tambahkan syntax seperti dibawah ini :
//pertanyaan no 1
void _handleRadioValueChanged1(int value){
setState(() {
_radioValue1 = value;
switch(_radioValue1){
case 0 :
Fluttertoast.showToast(msg: 'Correct !', toastLength: Toast.LENGTH_SHORT);
correctScore++;
break;
case 1:
Fluttertoast.showToast(msg: 'Try Again !', toastLength: Toast.LENGTH_LONG);
break;
case 2 :
Fluttertoast.showToast(msg: 'Try Again !', toastLength: Toast.LENGTH_LONG);
break;
}
});
}//pertanyaan no 2
void _handleRadioValueChanged2(int value){
setState(() {
_radioValue2 = value;
switch(_radioValue2){
case 0 :
Fluttertoast.showToast(msg: 'Try Again !', toastLength: Toast.LENGTH_SHORT);
break;
case 1:
Fluttertoast.showToast(msg: 'Correct', toastLength: Toast.LENGTH_LONG);
correctScore++;
break;
case 2 :
Fluttertoast.showToast(msg: 'Try Again !', toastLength: Toast.LENGTH_LONG);
break;
}
});
}//pertanyaan no 3
void _handleRadioValueChanged3(int value){
setState(() {
_radioValue3 = value;
switch(_radioValue3){
case 0 :
Fluttertoast.showToast(msg: 'Try Again !', toastLength: Toast.LENGTH_SHORT);
break;
case 1:
Fluttertoast.showToast(msg: 'Try Again !', toastLength: Toast.LENGTH_LONG);
break;
case 2 :
Fluttertoast.showToast(msg: 'Correct !', toastLength: Toast.LENGTH_LONG);
correctScore++;
break;
}
});
}//pertanyaan no 4
void _handleRadioValueChanged4(int value){
setState(() {
_radioValue4 = value;
switch(_radioValue4){
case 0 :
Fluttertoast.showToast(msg: 'Correct !', toastLength: Toast.LENGTH_SHORT);
correctScore++;
break;
case 1:
Fluttertoast.showToast(msg: 'Try Again !', toastLength: Toast.LENGTH_LONG);
break;
case 2 :
Fluttertoast.showToast(msg: 'Try Again !', toastLength: Toast.LENGTH_LONG);
break;
}
});
}//pertanyaan no 5
void _handleRadioValueChanged5(int value){
setState(() {
_radioValue5 = value;
switch(_radioValue5){
case 0 :
Fluttertoast.showToast(msg: 'Correct !', toastLength: Toast.LENGTH_SHORT);
correctScore++;
break;
case 1:
Fluttertoast.showToast(msg: 'Correct !', toastLength: Toast.LENGTH_LONG);
break;
case 2 :
Fluttertoast.showToast(msg: 'Try Again !', toastLength: Toast.LENGTH_LONG);
break;
}
});
}
Dari code diatas, pada case 0, 1, 2 itu merupakan radio button yang dipilih. Dan pada saat jawaban kita benar makan akan mendapatkan score 1, syntak yang digunakan adalah :
correctScore++;Untuk tampilan dari pertanyaannya, kita bisa tambahkan pada bagian widget dan body seperti dibawah ini :
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Simple Quiz Apps'),
centerTitle: true,
backgroundColor: Colors.purpleAccent,
),
body: new ListView(
padding: EdgeInsets.all(8.0),
children: <Widget>[
new Text(
'Silahkan Pilih Jawaban Yang benar dari soal dibawah ini :', style: TextStyle(
fontSize: 20.0, fontWeight: FontWeight.bold, color: Colors.black
),
),
new Padding(padding: new EdgeInsets.all(8.0)),
new Divider(
height: 5.0, color: Colors.purpleAccent,
),
new Padding(padding: new EdgeInsets.all(8.0)),
new Text(
'Lion is ....', style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 18.0
),
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Radio(
value: 0,
groupValue: _radioValue1,
onChanged: _handleRadioValueChanged1,
), new Text(
'Carnivore', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 1,
groupValue: _radioValue1,
onChanged: _handleRadioValueChanged1,
), new Text(
'Herbivore', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 2,
groupValue: _radioValue1,
onChanged: _handleRadioValueChanged1,
), new Text(
'Omnivore', style: TextStyle(fontSize: 12.0,
)),
],
),
new Divider(
height: 5.0,
color: Colors.purpleAccent,
),
new Padding(padding: new EdgeInsets.all(8.0)),
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'Giraffe is :', style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 18.0
),
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Radio(
value: 0,
groupValue: _radioValue2,
onChanged: _handleRadioValueChanged2,
), new Text(
'Carnivore', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 1,
groupValue: _radioValue2,
onChanged: _handleRadioValueChanged2,
), new Text(
'Herbivore', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 2,
groupValue: _radioValue2,
onChanged: _handleRadioValueChanged2,
), new Text(
'Omnivore', style: TextStyle(fontSize: 12.0,
)),
],
),
],
),
new Divider(
height: 5.0,
color: Colors.purpleAccent,
),
new Padding(padding: new EdgeInsets.all(8.0)),
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'Who is best rangers ? :', style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 18.0
),
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Image.asset('images/hijau.jpeg', fit: BoxFit.cover,height: 100, width: 100,),
Image.asset('images/hitam.jpg', fit: BoxFit.cover,height: 100, width: 100,),
Image.asset('images/kuning.jpg', fit: BoxFit.cover,height: 100, width: 100,)
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Radio(
value: 0,
groupValue: _radioValue3,
onChanged: _handleRadioValueChanged3,
), new Text(
'Green', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 1,
groupValue: _radioValue3,
onChanged: _handleRadioValueChanged3,
), new Text(
'Black', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 2,
groupValue: _radioValue3,
onChanged: _handleRadioValueChanged3,
), new Text(
'Yellow', style: TextStyle(fontSize: 12.0,
)),
],
)
],
),
new Divider(
height: 5.0,
color: Colors.purpleAccent,
),
new Padding(padding: new EdgeInsets.all(8.0)),
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'Bear is :', style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 18.0
),
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Radio(
value: 0,
groupValue: _radioValue4,
onChanged: _handleRadioValueChanged4,
), new Text(
'Carnivore', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 1,
groupValue: _radioValue4,
onChanged: _handleRadioValueChanged4,
), new Text(
'Herbivore', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 2,
groupValue: _radioValue4,
onChanged: _handleRadioValueChanged4,
), new Text(
'Omnivore', style: TextStyle(fontSize: 12.0,
)),
],
),
],
),
new Divider(
height: 5.0,
color: Colors.purpleAccent,
),
new Padding(padding: new EdgeInsets.all(8.0)),
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'Elephant is :', style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 18.0
),
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Radio(
value: 0,
groupValue: _radioValue5,
onChanged: _handleRadioValueChanged5,
), new Text(
'Carnivore', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 1,
groupValue: _radioValue5,
onChanged: _handleRadioValueChanged5,
), new Text(
'Herbivore', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 2,
groupValue: _radioValue5,
onChanged: _handleRadioValueChanged5,
), new Text(
'Omnivore', style: TextStyle(fontSize: 12.0,
)),
],
),
],
),
new Divider(
height: 5.0,
color: Colors.purpleAccent,
),
new Padding(
padding: EdgeInsets.all(8.0),
),
new RaisedButton(onPressed: (){
validateAnswer();
}, child: Text('Check Final Score', style: new TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.normal,
color: Colors.white),),color: Theme.of(context).accentColor,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(20.0),
),
), new Padding(
padding: EdgeInsets.all(4.0),
),
new RaisedButton(onPressed: (){
resetSelection();
}, child: Text('Reset Selection', style: new TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.normal,
color: Colors.white),),color: Theme.of(context).accentColor,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(20.0),
),)
],
),
);Pada button check final result kita akan memanggil sebuah method, dimana method tersebut akan menampilkan berapa jumlah yang benar dan salah
void validateAnswer(){
if(_radioValue1 == -1 && _radioValue2 == -1 && _radioValue3 == -1
&& _radioValue4 == -1 && _radioValue5 == -1){
Fluttertoast.showToast(msg: 'Please Select atleast one answer', toastLength: Toast.LENGTH_LONG);
}else{
Fluttertoast.showToast(msg: 'Your total score is : $correctScore out of 5',
toastLength: Toast.LENGTH_LONG);
}
}Dan pada button reset selection, akan me reset kembali jawaban yang telah di pilih
void resetSelection(){
_handleRadioValueChanged1(-1);
_handleRadioValueChanged2(-1);
_handleRadioValueChanged3(-1);
_handleRadioValueChanged4(-1);
_handleRadioValueChanged5(-1);
correctScore = 0;
}Untuk Full Source Code nya :
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class SimpleQuizApps extends StatefulWidget {
@override
_SimpleQuizAppsState createState() => _SimpleQuizAppsState();
}
class _SimpleQuizAppsState extends State<SimpleQuizApps> {
int _radioValue1 = -1;
int correctScore = 0;
int _radioValue2 = -1;
int _radioValue3 = -1;
int _radioValue4 = -1;
int _radioValue5 = -1;
void _handleRadioValueChanged1(int value){
setState(() {
_radioValue1 = value;
switch(_radioValue1){
case 0 :
Fluttertoast.showToast(msg: 'Correct !', toastLength: Toast.LENGTH_SHORT);
correctScore++;
break;
case 1:
Fluttertoast.showToast(msg: 'Try Again !', toastLength: Toast.LENGTH_LONG);
break;
case 2 :
Fluttertoast.showToast(msg: 'Try Again !', toastLength: Toast.LENGTH_LONG);
break;
}
});
}
void _handleRadioValueChanged2(int value){
setState(() {
_radioValue2 = value;
switch(_radioValue2){
case 0 :
Fluttertoast.showToast(msg: 'Try Again !', toastLength: Toast.LENGTH_SHORT);
break;
case 1:
Fluttertoast.showToast(msg: 'Correct', toastLength: Toast.LENGTH_LONG);
correctScore++;
break;
case 2 :
Fluttertoast.showToast(msg: 'Try Again !', toastLength: Toast.LENGTH_LONG);
break;
}
});
}
void _handleRadioValueChanged3(int value){
setState(() {
_radioValue3 = value;
switch(_radioValue3){
case 0 :
Fluttertoast.showToast(msg: 'Try Again !', toastLength: Toast.LENGTH_SHORT);
break;
case 1:
Fluttertoast.showToast(msg: 'Try Again !', toastLength: Toast.LENGTH_LONG);
break;
case 2 :
Fluttertoast.showToast(msg: 'Correct !', toastLength: Toast.LENGTH_LONG);
correctScore++;
break;
}
});
}
void _handleRadioValueChanged4(int value){
setState(() {
_radioValue4 = value;
switch(_radioValue4){
case 0 :
Fluttertoast.showToast(msg: 'Correct !', toastLength: Toast.LENGTH_SHORT);
correctScore++;
break;
case 1:
Fluttertoast.showToast(msg: 'Try Again !', toastLength: Toast.LENGTH_LONG);
break;
case 2 :
Fluttertoast.showToast(msg: 'Try Again !', toastLength: Toast.LENGTH_LONG);
break;
}
});
}
void _handleRadioValueChanged5(int value){
setState(() {
_radioValue5 = value;
switch(_radioValue5){
case 0 :
Fluttertoast.showToast(msg: 'Correct !', toastLength: Toast.LENGTH_SHORT);
correctScore++;
break;
case 1:
Fluttertoast.showToast(msg: 'Correct !', toastLength: Toast.LENGTH_LONG);
break;
case 2 :
Fluttertoast.showToast(msg: 'Try Again !', toastLength: Toast.LENGTH_LONG);
break;
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Simple Quiz Apps'),
centerTitle: true,
backgroundColor: Colors.purpleAccent,
),
body: new ListView(
padding: EdgeInsets.all(8.0),
children: <Widget>[
new Text(
'Silahkan Pilih Jawaban Yang benar dari soal dibawah ini :', style: TextStyle(
fontSize: 20.0, fontWeight: FontWeight.bold, color: Colors.black
),
),
new Padding(padding: new EdgeInsets.all(8.0)),
new Divider(
height: 5.0, color: Colors.purpleAccent,
),
new Padding(padding: new EdgeInsets.all(8.0)),
new Text(
'Lion is ....', style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 18.0
),
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Radio(
value: 0,
groupValue: _radioValue1,
onChanged: _handleRadioValueChanged1,
), new Text(
'Carnivore', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 1,
groupValue: _radioValue1,
onChanged: _handleRadioValueChanged1,
), new Text(
'Herbivore', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 2,
groupValue: _radioValue1,
onChanged: _handleRadioValueChanged1,
), new Text(
'Omnivore', style: TextStyle(fontSize: 12.0,
)),
],
),
new Divider(
height: 5.0,
color: Colors.purpleAccent,
),
new Padding(padding: new EdgeInsets.all(8.0)),
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'Giraffe is :', style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 18.0
),
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Radio(
value: 0,
groupValue: _radioValue2,
onChanged: _handleRadioValueChanged2,
), new Text(
'Carnivore', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 1,
groupValue: _radioValue2,
onChanged: _handleRadioValueChanged2,
), new Text(
'Herbivore', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 2,
groupValue: _radioValue2,
onChanged: _handleRadioValueChanged2,
), new Text(
'Omnivore', style: TextStyle(fontSize: 12.0,
)),
],
),
],
),
new Divider(
height: 5.0,
color: Colors.purpleAccent,
),
new Padding(padding: new EdgeInsets.all(8.0)),
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'Who is best rangers ? :', style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 18.0
),
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Image.asset('images/hijau.jpeg', fit: BoxFit.cover,height: 100, width: 100,),
Image.asset('images/hitam.jpg', fit: BoxFit.cover,height: 100, width: 100,),
Image.asset('images/kuning.jpg', fit: BoxFit.cover,height: 100, width: 100,)
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Radio(
value: 0,
groupValue: _radioValue3,
onChanged: _handleRadioValueChanged3,
), new Text(
'Green', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 1,
groupValue: _radioValue3,
onChanged: _handleRadioValueChanged3,
), new Text(
'Black', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 2,
groupValue: _radioValue3,
onChanged: _handleRadioValueChanged3,
), new Text(
'Yellow', style: TextStyle(fontSize: 12.0,
)),
],
)
],
),
new Divider(
height: 5.0,
color: Colors.purpleAccent,
),
new Padding(padding: new EdgeInsets.all(8.0)),
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'Bear is :', style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 18.0
),
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Radio(
value: 0,
groupValue: _radioValue4,
onChanged: _handleRadioValueChanged4,
), new Text(
'Carnivore', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 1,
groupValue: _radioValue4,
onChanged: _handleRadioValueChanged4,
), new Text(
'Herbivore', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 2,
groupValue: _radioValue4,
onChanged: _handleRadioValueChanged4,
), new Text(
'Omnivore', style: TextStyle(fontSize: 12.0,
)),
],
),
],
),
new Divider(
height: 5.0,
color: Colors.purpleAccent,
),
new Padding(padding: new EdgeInsets.all(8.0)),
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'Elephant is :', style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 18.0
),
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Radio(
value: 0,
groupValue: _radioValue5,
onChanged: _handleRadioValueChanged5,
), new Text(
'Carnivore', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 1,
groupValue: _radioValue5,
onChanged: _handleRadioValueChanged5,
), new Text(
'Herbivore', style: TextStyle(fontSize: 12.0,
)),
new Radio(
value: 2,
groupValue: _radioValue5,
onChanged: _handleRadioValueChanged5,
), new Text(
'Omnivore', style: TextStyle(fontSize: 12.0,
)),
],
),
],
),
new Divider(
height: 5.0,
color: Colors.purpleAccent,
),
new Padding(
padding: EdgeInsets.all(8.0),
),
new RaisedButton(onPressed: (){
validateAnswer();
}, child: Text('Check Final Score', style: new TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.normal,
color: Colors.white),),color: Theme.of(context).accentColor,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(20.0),
),
), new Padding(
padding: EdgeInsets.all(4.0),
),
new RaisedButton(onPressed: (){
resetSelection();
}, child: Text('Reset Selection', style: new TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.normal,
color: Colors.white),),color: Theme.of(context).accentColor,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(20.0),
),)
],
),
);
}
void resetSelection(){
_handleRadioValueChanged1(-1);
_handleRadioValueChanged2(-1);
_handleRadioValueChanged3(-1);
_handleRadioValueChanged4(-1);
_handleRadioValueChanged5(-1);
correctScore = 0;
}
void validateAnswer(){
if(_radioValue1 == -1 && _radioValue2 == -1 && _radioValue3 == -1
&& _radioValue4 == -1 && _radioValue5 == -1){
Fluttertoast.showToast(msg: 'Please Select atleast one answer', toastLength: Toast.LENGTH_LONG);
}else{
Fluttertoast.showToast(msg: 'Your total score is : $correctScore out of 5',
toastLength: Toast.LENGTH_LONG);
}
}
}Setelah itu running project, maka akan tampil seperti dibawah ini, apabila jawaban benar maka akan muncul toast, Correct ! dan apabila salah akan muncul Try Again !
Sumber Referensi :
Terima kasih :)
Semoga Bermanfaat dan Jangan Lupa Follow Ig dan Fb Flutter Developer Indonesia ya ;)
