2024年11月30日 / 最終更新日時 : 2024年11月30日 wzero7bond 電子工作

Flutter クイズ アプリの作り方

このガイドでは、シンプルでありながらエレガントな Flutter クイズ アプリについて説明します。 

さらに、いくつかのプラグインとウィジェットについて、その機能、前提条件、セットアップ手順とともに学習します。

目次

このFlutterクイズアプリのウィジェットとプラグイン

このアプリには、以下にリストされている機能またはモジュールが含まれます。

  • 10 個の複数選択式の質問があり、さらに追加する余地があります。
  • 各質問には、最後の質問を除いて、ボタンベースの選択可能なオプションが 4 つあります。
  • 各質問のスコアは、選択されたオプションによって（内部的に）決定されます。
  • さらに、このフラッタークイズアプリの最後には、スコアと再開ボタンに加えて、最終スコアに基づいたコメントが表示されます。
  • アプリには、ホーム画面（質問が表示される画面）と結果画面（スコアとコメントが表示される画面）の 2 つの画面があります。
  • 具体的には、main.dart、question.dart、answer.dart、quiz.dart、result.dart モジュールを使用してアプリ全体を整理します。

このアプリを作成することで、Flutter と Dart の基礎を復習できます。 

コンセプト

私たちは、次のような多くのアイデアについて議論する予定です:

  • 画面上にウィジェットを表示します。
  • ウィジェットのリサイクル
  • スナックバー
  • 共有設定
  • 内部ロジック
  • ファイル
  • 未来ビルダー
  • ビルダー
  • 行
  • 画面の変更。
  • テキストフォームフィールド
  • コラム
  • ボタン等

アプリの開発を始めるには、まず Flutter プロジェクトを作成して、Flutter クイズ アプリの Firebase を作成し、多数のファイルとフォルダーを提供する必要があります。既存の main.dart ファイルは、Lib フォルダーにあります。 

現在、同じフォルダー内に次の 4 つのファイルを作成する必要があります。 

  1. 質問.ダーツ
  2. 答え.ダーツ
  3. クイズ.ダーツ
  4. 結果.dart

要件

何が必要かを知るには、以下をお読みください。

  • フラッター
  • Android Studio または VS Code
  • どちらのエディターでも、Flutter および Dart プラグインのインストールが必要です。

Flutter クイズ アプリを作成するための最初のステップ

魅力的な Flutter クイズ アプリ Firebase を作成するための最良の方法。まず、可能な回答のリストとタイトルを表示するテキストを含む質問モデルを作成します。

質問ページの作成

  1. まず、すべての質問のうち現在の質問の数がテキスト ボックスに表示されます。そのため、質問番号変数を 1 に初期化する必要があります。 
  2. 次に、それぞれの質問が個別に表示されるページビューが表示されます。 
  3. ページ ビューのデフォルトのスコアリング動作を無効にする必要があります。質問配列の長さは、ページ ビュー上の項目の数になります。 
  4. 現在の質問に基づいて、アイテム ビルダー内に質問 UI を作成します。 
  5. その結果、質問ビルドメソッドで質問のタイトルを表示するテキストと、現在の質問に基づいてオプションを表示するオプションのウィジェットが作成されます。
import 'package:flutter/material.dart';

import './quiz.dart';
import './result.dart';

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

class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);

@override
State<StatefulWidget> createState() {
	return _MyAppState();
}
}

class _MyAppState extends State<MyApp> {
final _questions = const [
	{
	'questionText': 'Q1. Who created Flutter?',
	'answers': [
		{'text': 'Facebook', 'score': -2},
		{'text': 'Adobe', 'score': -2},
		{'text': 'Google', 'score': 10},
		{'text': 'Microsoft', 'score': -2},
	],
	},
	{
	'questionText': 'Q2. What is Flutter?',
	'answers': [
		{'text': 'Android Development Kit', 'score': -2},
		{'text': 'IOS Development Kit', 'score': -2},
		{'text': 'Web Development Kit', 'score': -2},
		{
		'text':
			'SDK to build beautiful IOS, Android, Web & Desktop Native Apps',
		'score': 10
		},
	],
	},
	{
	'questionText': ' Q3. Which programing language is used by Flutter',
	'answers': [
		{'text': 'Ruby', 'score': -2},
		{'text': 'Dart', 'score': 10},
		{'text': 'C++', 'score': -2},
		{'text': 'Kotlin', 'score': -2},
	],
	},
	{
	'questionText': 'Q4. Who created Dart programing language?',
	'answers': [
		{'text': 'Lars Bak and Kasper Lund', 'score': 10},
		{'text': 'Brendan Eich', 'score': -2},
		{'text': 'Bjarne Stroustrup', 'score': -2},
		{'text': 'Jeremy Ashkenas', 'score': -2},
	],
	},
	{
	'questionText':
		'Q5. Is Flutter for Web and Desktop available in stable version?',
	'answers': [
		{
		'text': 'Yes',
		'score': -2,
		},
		{'text': 'No', 'score': 10},
	],
	},
];

var _questionIndex = 0;
var _totalScore = 0;

void _resetQuiz() {
	setState(() {
	_questionIndex = 0;
	_totalScore = 0;
	});
}

void _answerQuestion(int score) {
	_totalScore += score;

	setState(() {
	_questionIndex = _questionIndex + 1;
	});
	// ignore: avoid_print
	print(_questionIndex);
	if (_questionIndex < _questions.length) {
	// ignore: avoid_print
	print('We have more questions!');
	} else {
	// ignore: avoid_print
	print('No more questions!');
	}
}

@override
Widget build(BuildContext context) {
	return MaterialApp(
	home: Scaffold(
		appBar: AppBar(
		title: const Text('Geeks for Geeks'),
		backgroundColor: const Color(0xFF00E676),
		),
		body: Padding(
		padding: const EdgeInsets.all(30.0),
		child: _questionIndex < _questions.length
			? Quiz(
				answerQuestion: _answerQuestion,
				questionIndex: _questionIndex,
				questions: _questions,
				) //Quiz
			: Result(_totalScore, _resetQuiz),
		), //Padding
	), //Scaffold
	debugShowCheckedModeBanner: false,
	); //MaterialApp
}
}

Question クラスを使用するこのquiz.dartファイルは、すでにインポートされています。この Flutter クイズ アプリと同様に、question クラスはステートレスなので、実行サイクル全体を通じて変更する必要はありません。Question ウィジェットの構造を提供するウィジェット ツリーの次には、コンストラクター Question が続きます。

この記事を読んだ人は次の記事も読んでいます: Flutter Liquid Swipe Animation

オプションページの作成

  1. オプション ウィジェット内には、質問のオプションにマップできる列があり、オプションのリストをコンパイルできます。その結果、ビルド オプション メソッド内にオプションを表示するためのテキストが作成されます。
  2. 装飾が完了したら、スペース、パディング、マージンを追加して、背景色を確認しながらクリックしやすくすることができます。 
  3. 質問がロックされているかどうかを確認したので、何もしません。
  4. そうでない場合は、質問をロックし、ユーザーが選択した回答を選択します。
  5. したがって、今必要なのは、新しいメソッドを呼び出して、オプションの呼び出し元情報を取得し、質問内にオプションを追加することだけです。 
  6. コンテナの境界線の色と、正解と不正解の記号を選択します。
import 'package:flutter/material.dart';

import './answer.dart';
import './question.dart';

class Quiz extends StatelessWidget {
final List<Map<String, Object>> questions;
final int questionIndex;
final Function answerQuestion;

const Quiz({
	Key? key,
	required this.questions,
	required this.answerQuestion,
	required this.questionIndex,
}) : super(key: key);

@override
Widget build(BuildContext context) {
	return Column(
	children: [
		Question(
		questions[questionIndex]['questionText'].toString(),
		), //Question
		...(questions[questionIndex]['answers'] as List<Map<String, Object>>)
			.map((answer) {
		return Answer(
			() => answerQuestion(answer['score']), answer['text'].toString());
		}).toList()
	],
	); //Column
}
}

import 'package:flutter/material.dart';

class Question extends StatelessWidget {
final String questionText;

const Question(this.questionText, {Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
	return Container(
	width: double.infinity,
	margin: const EdgeInsets.all(10),
	child: Text(
		questionText,
		style: const TextStyle(fontSize: 28),
		textAlign: TextAlign.center,
	), //Text
	); //Contaier
}
}

正解計算機の作成

  1. ユーザーが正しく回答した質問の数がカウントされます。 
  2. 質問数が質問の総数より少ないかどうかを確認するために、ボタン メソッドを作成します。 
  3. 以降の質問の数は、都市国家内で 1 つずつ増加します。
  4. 現在、ページ コントローラーを作成して初期化する必要があります。 
  5. 次に、オプション ウィジェットに新しいスコア変数を追加します。 
  6. 選択されたオプションが正確であるかどうかが判断されると、スコアは 1 増加します。 
  7. ボタンは、ユーザーがオプションを選択した後にのみ表示される必要があります。 
  8. その結果、islocked 変数を作成し、その初期値を false に設定します。 
  9. 次に、オプション ウィジェット内の質問ステータス変数の値を設定します。 
  10. 次に、次のクエリに備えて、昇格されたボタン内の islocked ステータスが false に変更されます。これで、質問がロックされている場合にのみここにボタンが表示され、そうでない場合は何も表示されなくなります。
import 'package:flutter/material.dart';

class Answer extends StatelessWidget {
final Function selectHandler;
final String answerText;

const Answer(this.selectHandler, this.answerText, {Key? key})
	: super(key: key);

@override
Widget build(BuildContext context) {
	// use SizedBox for white space instead of Container
	return SizedBox(
	width: double.infinity,
	child: ElevatedButton(
		onPressed: selectHandler(),
		style: ButtonStyle(
			textStyle:
				MaterialStateProperty.all(const TextStyle(color: Colors.white)),
			backgroundColor: MaterialStateProperty.all(Colors.green)),
		child: Text(answerText),
	),
	); //Container
}
}

このanswer.dartファイルは、 quiz.dartファイルにもインポートされました。answer.dart ファイルもquiz.dartファイルに追加されました。quiz.dartファイルで使用された Answer クラスはこのファイルに含まれています。クイズや質問クラスと同様に、回答もステートレスです。SelectHandelr と文字列 answerText は、ステートフル ウィジェット コンポーネントであり、結果として不変に指定する必要があるため、キーワード final を使用して Answer クラスの関数に渡されています。そうしないと、dart 分析の警告が表示されます。その後にコンストラクターと通常のウィジェット ツリーが続き、構造が与えられます。

Flutter クイズ アプリの結果ページを作成する

  1. 最後の質問に到達したら、結果ページにアクセスする必要があります。 
  2. したがって、結果ページにアクセスしてスコアを実行し、ユーザーが正解した質問の数を確認します。
  3. いずれかのオプションを選択すると、ここに「結果を表示」ボタンが表示されます。 
  4. クリックすると結果ページに移動します。 
  5. 結果ページを設計し、最終的にここで成績を取得できます。 
// ignore_for_file: avoid_print

import 'package:flutter/material.dart';

class Result extends StatelessWidget {
final int resultScore;
final Function resetHandler;

const Result(this.resultScore, this.resetHandler, {Key? key})
	: super(key: key);

//Remark Logic
String get resultPhrase {
	String resultText;
	if (resultScore >= 41) {
	resultText = 'You are awesome!';
	print(resultScore);
	} else if (resultScore >= 31) {
	resultText = 'Pretty likeable!';
	print(resultScore);
	} else if (resultScore >= 21) {
	resultText = 'You need to work more!';
	} else if (resultScore >= 1) {
	resultText = 'You need to work hard!';
	} else {
	resultText = 'This is a poor score!';
	print(resultScore);
	}
	return resultText;
}

@override
Widget build(BuildContext context) {
	return Center(
	child: Column(
		mainAxisAlignment: MainAxisAlignment.center,
		children: <Widget>[
		Text(
			resultPhrase,
			style: const TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
			textAlign: TextAlign.center,
		), //Text
		Text(
			'Score ' '$resultScore',
			style: const TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
			textAlign: TextAlign.center,
		), //Text
		TextButton(
			onPressed: resetHandler(),
			child: Container(
			color: Colors.green,
			padding: const EdgeInsets.all(14),
			child: const Text(
				'Restart Quiz',
				style: TextStyle(color: Colors.blue),
			),
			),
		),
		], //<Widget>[]
	), //Column
	); //Center
}
}

出力

結論

このチュートリアルでは、Flutter クイズ アプリの作成方法を学びました。さらに、実際の例を使用して、オプションの変更方法、新しいページの作成方法、マウスを移動またはクリックしたときにアイコンを表示する方法を確認しました。最終的には、1 つの場所から Flutter クイズ アプリを作成する方法を発見しました。

他の興味深い Flutter チュートリアルをチェックしてみませんか?

Follow me!

カテゴリー
電子工作

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

電子工作

前の記事

メルカリの出品方法から発送手順まで9ステップで解説
2024年11月19日
電子工作

次の記事

ChatGPTを使用し、1時間でiPhoneアプリを作ってみた（swiftUI）
2024年12月8日