Aplicación de prueba básica en la API de Flutter

Flutter API es un kit de desarrollo de software de código abierto para crear una hermosa interfaz de usuario compilada de forma nativa. Actualmente, está disponible una versión estable para IOS y Android OS.

En esta aplicación vamos a tener las características o módulos que se mencionan a continuación:

• Cinco preguntas de opción múltiple (se pueden agregar más preguntas).
• Cuatro opciones seleccionables para cada pregunta en forma de botones excepto la última.
• La puntuación se calculará en función de la opción seleccionada para cada pregunta (Internamente).
• Y en función de la puntuación final, se mostrará un comentario al final de la prueba, además de la puntuación y el botón de reinicio.
• Hay dos pantallas en el inicio de la aplicación (donde se mostrarán las preguntas) y la pantalla de resultados (donde se mostrarán la puntuación y el comentario).
• Toda la aplicación se dividirá en cinco módulos diferentes, a saber, main.dart, question.dart, answer.dart, quiz.dart y result.dart.

Hacer esta aplicación te dará una buena revisión de los conceptos básicos de aleteo y dardos. Ya que estamos cubriendo una gran cantidad de conceptos tales como:

• Mostrando Widgets en la pantalla.
• Widgets de reciclaje.
• Cambio de pantallas.
• Lógica Interna
• Y además.

Para comenzar a crear la aplicación, primero debemos crear un proyecto flutter que nos dará muchos archivos y carpetas. En la carpeta Lib, ya hay un archivo main.dart presente. Y ahora, en la misma carpeta resto, se deben crear cuatro archivos:- 

• pregunta.dardo
• respuesta.dardo
• prueba dardo y
• resultado.dardo

Paso 1: En el paso uno vamos a

• Cree la clase MyApp y hágala con estado.
• Agregue preguntas para la pantalla de inicio.
• Cree un árbol de widgets para la pantalla de inicio.

Comenzando con el archivo main.dart

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
  }
}

En Flutter , el archivo main.dart es el punto de entrada desde el cual el código comienza a ejecutarse. En el archivo main.dart , en primer lugar, se ha importado el paquete de diseño de materiales además de quiz.dart y result.dart. Luego se ha creado una función runApp con el parámetro MyApp. Después de la declaración de la clase MyApp, que es un widget con estado, se ha establecido el estado de la clase MyApp. Ahora eso es seguido por las cuatro preguntas junto con sus respectivas opciones de respuesta y puntuación. Y al final, tenemos el árbol de widgets para la pantalla de inicio, que muestra la barra de aplicacionescon título, cuerpo con las preguntas y opciones. Por último, el banner de depuración ha sido deshabilitado. Tenemos clases como Quiz o Result, que se definirán en las siguientes páginas.

Paso 2: En el paso dos crearemos

• Class Quiz (utilizado en la pantalla de inicio)
• Árbol de widgets para la clase Quiz

prueba.dardo

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
  }
}

Este es el quiz.dart que ya se importó en el archivo main.dart . En este archivo se define la clase Quiz que se utiliza en el archivo main.dart. Class Quiz se ha ampliado como un widget sin estado, ya que no necesita cambiar en ningún momento del ciclo de ejecución de la aplicación, al que sigue el constructor Quiz. Luego tenemos el árbol de widgets que define la estructura de la clase Quiz que son básicamente las preguntas y sus opciones. Nuevamente tenemos la clase Pregunta que se definirá en el archivo question.dart .

Paso 3: En el paso tres crearemos

• Pregunta de clase (nuevamente usada en la pantalla de inicio)
• Árbol de widgets para la clase Pregunta

pregunta.dardo

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
  }
}

Este archivo question.dart ya se ha importado al archivo quiz.dart , que utiliza la clase Pregunta. La pregunta de clase sería una sin estado similar a la prueba, no necesita cambiar en el ciclo de ejecución. Luego tenemos el constructor Pregunta que es seguido por el árbol de widgets que da estructura al widget Pregunta.

Paso 4: En el paso cuatro crearemos

• Respuesta de clase (usada en la pantalla de inicio)
• Árbol de widgets para la clase Respuesta

respuesta.dardo

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),
      ),
 
      // RaisedButton is deprecated and should not be used
      // Use ElevatedButton instead
 
      // child: RaisedButton(
      //   color: const Color(0xFF00E676),
      //   textColor: Colors.white,
      //   onPressed: selectHandler(),
      //   child: Text(answerText),
      // ), //RaisedButton
    ); //Container
  }
}

Este archivo answer.dart también se importó en el archivo quiz.dart . Este archivo contiene la clase Respuesta que se usó en el archivo quiz.dart . Nuevamente, similar a la clase Quiz y Question, la respuesta también sería sin estado. En la función de respuesta de la clase, selectHandelr y la string answerText se han pasado usando la palabra clave final, ya que pertenecen al widget con estado y, por lo tanto, deben especificarse como inmutables, y de no hacerlo, se generará una advertencia de análisis de dardos. A esto le sigue el constructor y el árbol de widgets habitual para darle una estructura.

Paso 5: En el último paso crearemos

• Resultado de clase para (pantalla de resultados)
• Lógica de comentarios
• Árbol de widgets de resultados de clase

Archivo: resultado.dart

// 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),
              ),
            ),
          ),
          // FlatButton is deprecated and should not be used
          // Use TextButton instead
 
          // FlatButton(
          //   child: Text(
          //     'Restart Quiz!',
          //   ), //Text
          //   textColor: Colors.blue,
          //   onPressed: resetHandler(),
          // ), //FlatButton
        ], //<Widget>[]
      ), //Column
    ); //Center
  }
}

Este archivo result.dart ya se había importado en el archivo main.dart ya que la clase Result está definida en este archivo. Los resultados de la clase no cambiarán en el ciclo de ejecución de la aplicación, por lo tanto, es un widget sin estado. Como las subclases o variables que se utilizan en el widget con estado deben volverse inmutables, se ha utilizado la palabra clave final, seguida de la palabra clave Result. Después de eso, tenemos la lógica resultante que decidió qué comentario se mostraría después de que el cuestionario se basara en la puntuación final. Y por último, tenemos el árbol de widgets que define la estructura de la clase Result.

Y ahora, después de completar el archivo result.dart , nuestra aplicación de prueba básica ya está completa. Podemos previsualizar la app en cualquier dispositivo físico o emulador o incluso en el navegador. Debería verse algo como esto.

Una vez finalizada la aplicación, se puede generar apk para la aplicación dando el comando ‘flutter build apk’ en la terminal.