@humor250
@JPT
@humor250
@JPT
@humor250
@JPT
@humor250
@JPT
flutter create quiz_app
Step 2: Open the project in your desired IDE and add necessary dependencies.
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
google_fonts: ^0.3.0
Step 3: Create a data model for your questions which contains question, options, and correct answer.
class Question {
String question;
List<String> options;
int answerIndex;
Question({this.question, this.options, this.answerIndex});
}
Step 4: Create a list of questions for the quiz.
List<Question> questions = [
Question(
question: 'What is the capital of Australia?',
options: ['Sydney', 'Melbourne', 'Canberra', 'Brisbane'],
answerIndex: 2,
),
Question(
question: 'Who painted the Mona Lisa?',
options: ['Pablo Picasso', 'Vincent van Gogh', 'Leonardo da Vinci', 'Salvador Dalí'],
answerIndex: 2,
),
Question(
question: 'What is the largest lake in Africa?',
options: ['Victoria', 'Tanganyika', 'Malawi', 'Nasser'],
answerIndex: 0,
),
// Add more questions here.
];
Step 5: Create a stateful widget for the quiz screen. In the widget state, implement a form for the quiz with radio buttons for each option.
class QuizScreen extends StatefulWidget {
@override
_QuizScreenState createState() => _QuizScreenState();
}
class _QuizScreenState extends State<QuizScreen> {
int currentIndex = 0;
int score = 0;
void onItemTapped(int index) {
setState(() {
currentIndex = index;
});
}
void checkAnswer(int selectedIndex) {
if (selectedIndex == questions[currentIndex].answerIndex) {
setState(() {
score++;
});
}
if (currentIndex < questions.length - 1) {
setState(() {
currentIndex++;
});
} else {
// Navigate to the result screen.
Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => ResultScreen(score: score,)));
}
}
@override
Widget build(BuildContext context) {
var question = questions[currentIndex];
return Scaffold(
appBar: AppBar(
title: Text('Quiz App'),
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
'Question ${currentIndex + 1}/${questions.length}',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w500,
),
),
SizedBox(height: 16.0),
Text(
question.question,
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 32.0),
...question.options.asMap().entries.map(
(entry) => Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: ListTile(
title: Text(
entry.value,
style: TextStyle(fontSize: 18.0),
),
leading: Radio(
value: entry.key,
groupValue: null,
onChanged: (selectedIndex) => checkAnswer(selectedIndex),
),
),
),
),
],
),
),
);
}
}
Step 6: Create a result screen which displays the score and a button to start the quiz again.
class ResultScreen extends StatelessWidget {
final int score;
ResultScreen({this.score});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Quiz App')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Your Score',
style: TextStyle(
fontSize: 36.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 16.0),
Text(
'$score/${questions.length}',
style: TextStyle(
fontSize: 48.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 32.0),
RaisedButton(
onPressed: () {
// Navigate back to the quiz screen to start again.
Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => QuizScreen()));
},
child: Text(
'Try Again',
style: TextStyle(fontSize: 18.0),
),
),
],
),
),
);
}
}
Step 7: In the main.dart file, define the routes and a reference to the quiz screen as the initial route.
import 'package:flutter/material.dart';
import 'package:quiz_app/quiz_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Quiz App',
debugShowCheckedModeBanner: false,
initialRoute: QuizScreen.routeName,
routes: {
QuizScreen.routeName: (_) => QuizScreen(),
// Add more routes here.
},
);
}
}
That's it! You should now have a basic quiz app in Flutter.@humor250
@JPT
@humor250
@JPT
@humor250
@JPT
@humor250
@JPT
@bidisignapor