Flutter API 中的基本测验应用程序

Flutter API 是一个开源软件开发工具包，用于构建原生编译的漂亮 UI。目前，它是适用于 IOS 和 Android 操作系统的稳定版本。

在这个应用程序中，我们将拥有下面提到的功能或模块：

• 五道选择题(更多题可以补充)。
• 除了最后一个之外，每个问题的四个可选选项以按钮的形式出现。
• 分数将根据为每个问题(内部)选择的选项计算。
• 并且根据最终分数，除了分数和重新开始按钮之外，还会在测验结束时显示评论。
• 应用程序主页中有两个屏幕(将显示问题)和结果屏幕(将显示分数和评论)。
• 整个应用程序将分为五个不同的模块，即主模块。dart，问题。dart，回答。dart，测验。dart和reslut。dart。

制作此应用程序将使您对flutter和dart基础知识有一个很好的修订。因为我们涵盖了很多概念，例如：

• 在屏幕上显示小部件。
• 回收小部件。
• 更换屏幕。
• 内部逻辑
• 和其他。

要开始制作应用程序，我们首先必须创建一个flutter项目，它将为我们提供许多文件和文件夹。在 Lib 文件夹中，有一个main. dart文件已经存在。现在在同一个文件夹 rest 中，应该创建四个文件：-

• 问题。dart
• 回答。dart
• 测验。dart和
• 结果。dart

第 1 步：在第一步中，我们将

• 创建 MyApp 类并使其有状态。
• 为主屏幕添加问题。
• 为主屏幕创建一个小部件树。

从主要开始。dart文件

Dart

import 'package:flutter/material.dart';
  
import './quiz.dart';
import './result.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatefulWidget {
  @override
  State createState() {
    return _MyAppState();
  }
}
  
class _MyAppState extends State {
  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;
    });
    print(_questionIndex);
    if (_questionIndex < _questions.length) {
      print('We have more questions!');
    } else {
      print('No more questions!');
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Geeks for Geeks'),
          backgroundColor: 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
  }
}

在Flutter主要。 dart文件是代码开始执行的入口点。在主要。除了测验之外，还导入了dart文件首先材料设计包。dart和结果。dart。然后创建了一个函数runApp ，参数为 MyApp。在声明类 MyApp 是一个有状态的小部件之后，类 MyApp 的状态已经布局。接下来是四个问题以及它们各自的答案选项和分数。最后，我们有主屏幕的小部件树，它显示带有标题的appBar 、带有问题和选项的正文。最后，调试横幅已被禁用。我们有像 Quiz 或 Result 这样的类，它们将在以下页面中定义。

第 2 步：在第 2步中，我们将创建

• 课堂测验(用于主屏幕)
• 课堂测验的小部件树

测验。dart

Dart

import 'package:flutter/material.dart';
  
import './answer.dart';
import './question.dart';
  
class Quiz extends StatelessWidget {
  final List> questions;
  final int questionIndex;
  final Function answerQuestion;
  
  Quiz({
    @required this.questions,
    @required this.answerQuestion,
    @required this.questionIndex,
  });
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Question(
          questions[questionIndex]['questionText'],
        ), //Question
        ...(questions[questionIndex]['answers'] as List>)
            .map((answer) {
          return Answer(() => answerQuestion(answer['score']), answer['text']);
        }).toList()
      ],
    ); //Column
  }
}

这是测验。 dart已经在dart中导入。dart文件。在这个文件中，定义了在 main.c 中使用的类 Quiz。dart文件。类 Quiz 已扩展为无状态小部件，因为它不需要在应用程序的运行周期中随时更改，然后是构造函数 Quiz。然后我们有定义测验类结构的小部件树，它基本上是问题及其选项。同样，我们有将在问题中定义的类问题。dart文件。

第 3 步：在第 3步中，我们将创建

• 课堂问题(再次用于主屏幕)
• 问题类的小部件树

问题。dart

Dart

import 'package:flutter/material.dart';
  
class Question extends StatelessWidget {
  final String questionText;
  
  Question(this.questionText);
  
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.all(10),
      child: Text(
        questionText,
        style: TextStyle(fontSize: 28),
        textAlign: TextAlign.center,
      ), //Text
    ); //Contaier
  }
}

这个问题。 dart文件已导入测验。 dart文件，它使用类 Question。类 Question 将是无状态的，与 Quiz 类似，它在运行周期中不需要更改。然后我们有构造函数 Question ，其后是为 Question 小部件提供结构的小部件树。

第 4 步：在第 4步中，我们将创建

• 课堂答案(在主屏幕中使用)
• 类答案的小部件树

回答。dart

Dart

import 'package:flutter/material.dart';
  
class Answer extends StatelessWidget {
  final Function selectHandler;
  final String answerText;
  
  Answer(this.selectHandler, this.answerText);
  
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: RaisedButton(
        color: Color(0xFF00E676),
        textColor: Colors.white,
        child: Text(answerText),
        onPressed: selectHandler,
      ), //RaisedButton
    ); //Container
  }
}

这个回答。测验中还导入了dart文件。dart文件。此文件包含测验中使用的 Answer 类。dart文件。再次类似于测验和问题类答案也将是无状态的。在类 Answer函数， selectHandelr和字符串answerText已使用关键字 final 传递，因为它们属于有状态小部件，因此需要指定不可变，否则将导致dart分析警告。接下来是构造函数和通常的小部件树来为其提供结构。

第 5 步：在最后一步中，我们将创建

• (结果屏幕)的类结果
• 备注逻辑
• 类结果小部件树

结果。dart

Dart

import 'package:flutter/material.dart';
  
class Result extends StatelessWidget {
  final int resultScore;
  final Function resetHandler;
  
  Result(this.resultScore, this.resetHandler);
  
  //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: [
          Text(
            resultPhrase,
            style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
            textAlign: TextAlign.center,
          ), //Text
          Text(
            'Score ' '$resultScore',
            style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
            textAlign: TextAlign.center,
          ), //Text
          FlatButton(
            child: Text(
              'Restart Quiz!',
            ), //Text
            textColor: Colors.blue,
            onPressed: resetHandler,
          ), //FlatButton
        ], //[]
      ), //Column
    ); //Center
  }
}

这个结果。 dart文件已被导入到dart文件中。 dart文件已经作为类 Result 在此文件中定义。类结果不会在应用程序运行周期中改变，因此它是一个无状态小部件。由于在有状态小部件中使用的子类或变量需要成为不可变的关键字 final 已被使用，因此其后是 Result 关键字。之后，我们得到了结果逻辑，它根据最终分数决定在测验后显示哪个评论。最后，我们有了定义 Result 类结构的小部件树。

现在在完成结果之后。 dart文件我们的基本测验应用程序现已完成。我们可以在任何物理设备或模拟器甚至浏览器中预览应用程序。它应该看起来像这样。

应用程序完成后，可以通过在终端中给出命令“flutter build apk”来生成应用程序的 apk。