FlashCards Learning App in Flutter

The FlashCard learning app is the one-stop destination to create an interactive learning/quiz app. This app was developed using Flutter. Flutter is the tool used to build cross-platform applications for different platforms and OS. In this article, we will learn to develop a flashcard learning app. You may use this app for learning purposes, it presents the question and its answer using flips or tap options. It also has the feature to add a new flashcard with a question and answer of your choice. I am using VS code to develop this project.

Concepts Covered in the App

Flash Card Widget.
Logic to add new question and answer.
Update the state of different questions and answers.
Flippable animation.

Project Structure

Step-by-Step Implementation of Flashcard Learning App

Step 1 : Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the below command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2 : Adding the Dependency

To add the dependency to the pubspec.yaml file, add flip_card as a dependency in the dependencies part of the pubspec.yaml file, as shown below:

Dart

dependencies:
     flutter:
       sdk: flutter
     flip_card: ^0.7.0

Now run the below command in the terminal.

flutter pub get

Run the below command in the terminal.

flutter pub add flip_card

Step 3 : Code for flash_card.dart

We create a stateless widget using the Card class to display questions and answers in our learning app.

flash_card.dart:

flash_card.dart

import 'package:flutter/material.dart';

// Model class representing a flashcard
// with a question and an answer
class Flashcard {
  final String question;
  final String answer;

  Flashcard({required this.question, required this.answer});
}

// Stateless widget to display a
// flashcard with a given text
class FlashCardWidget extends StatelessWidget {
  FlashCardWidget({required this.text});
  final String text;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(20.0),
      child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(35)),
        elevation: 17,
        shadowColor: Color.fromARGB(255, 2, 75, 6),
        color: Colors.green[700],
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Center(
            child: Text(text,
                style: TextStyle(
                    fontSize: 15,
                    letterSpacing: 1.0,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
                textAlign: TextAlign.center),
          ),
        ),
      ),
    );
  }
}

Step 4 : Code for ques_ans.dart file

We use the Flashcard widget to represent the question and answer. The two parameters of Flashcard will be question for front widget and answer for the back widget.

Note : The class Flashcard can be renamed as per your choice but the Flashcard given as parameter of List is widget which can't be renamed.

ques_ans.dart:

ques_ans.dart

// List of flashcards containing
// questions and answers
import 'package:geeks_for_geeks/flashCard.dart';

List<Flashcard> qaList = [
  Flashcard(
      question: "What is the building block of a Flutter app?",
      answer: "Widget"),
  Flashcard(
      question: "What is State in Flutter?",
      answer:
          "State refers to the data or information that can change dynamically during the lifetime of a widget."),
  Flashcard(
      question: "What is the purpose of the Widget Inspector in Flutter?",
      answer:
          "It is a tool used to inspect and debug the widget tree of a Flutter app"),
  Flashcard(
      question: "What is a Stream in Flutter?",
      answer:
          "Stream is a sequence of asynchronous events that can be listened to and responded to."),
  Flashcard(question: "Is Flutter Open Source or not?", answer: "Yes"),
];

Step 5 : Code for home_widget.dart

This file consists of the UI and logic of the app. The code organizes the app bar, the cards, the textfield to enter new questions and answers, and the icon button to update questions. The stateful widget allows flippable animation over the flashcard. The left and right arrow icon buttons calls the function to update the function to update the question. The "Add Flashcard" button navigates to the Q&A page, where you can enter a question and answer for a new flashcard.

home_widget.dart:

home_widget.dart

import 'package:flip_card/flip_card.dart';
import 'package:flutter/material.dart';
import 'package:geeks_for_geeks/AddFlashCardPage.dart';
import 'package:geeks_for_geeks/flashCard.dart';
import 'package:geeks_for_geeks/ques_ans.dart';

// Main HomePage widget that is stateful
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
    
  // Index to track the current
  // flashcard being displayed
  int _curIndexNum = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey.shade100,
        appBar: AppBar(
            
            // AppBar with title and styling
            centerTitle: true,
            title: Text("Flashcards Learning App",
                style: TextStyle(
                  fontSize: 25,
                  color: Colors.white,
                )),
            backgroundColor: Colors.green[700],
            toolbarHeight: 70,
            elevation: 5,
            shadowColor: Colors.green[700],
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20))),
        body: Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    
                // FlipCard widget to display the
                // front and back of a flashcard
                SizedBox(
                  width: 300,
                  height: 300,
                  child: FlipCard(
                      direction: FlipDirection.HORIZONTAL,
                      front:
                          FlashCardWidget(text: qaList[_curIndexNum].question),
                      back:
                          FlashCardWidget(text: qaList[_curIndexNum].answer))),
              
              // Text below the FlipCard
              Text("Tap to view Answer", style: TextStyle(fontSize: 15)),
              
              // Row containing buttons to
              // navigate between flashcards
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                    
                  // Button to show the previous flashcard
                  ElevatedButton.icon(
                      onPressed: () {
                        showPreviousCard();
                      },
                      icon: Icon(
                        Icons.arrow_left,
                        size: 30,
                        color: Color(0xFFE4E4E4),
                      ),
                      label: Text(""),
                      style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.green[700],
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10)),
                          padding: EdgeInsets.only(
                              right: 20, left: 25, top: 15, bottom: 15))),
                  
                  // Button to show the next flashcard
                  ElevatedButton.icon(
                      onPressed: () {
                        showNextCard();
                      },
                      icon: Icon(
                        Icons.arrow_right,
                        size: 30,
                        color: Color(0xFFE4E4E4),
                      ),
                      label: Text(""),
                      style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.green[700],
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10)),
                          padding: EdgeInsets.only(
                              right: 20, left: 25, top: 15, bottom: 15)))
                ],
              ),
              SizedBox(height: 15),
              
              // Button to navigate to the AddFlashcardPage
              ElevatedButton(
                  onPressed: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => AddFlashcardPage()));
                  },
                  child: Text(
                    "Add FlashCard",
                    style: TextStyle(
                        fontSize: 10,
                        letterSpacing: 1.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.white),
                    textAlign: TextAlign.center,
                  ),
                  style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.green[700],
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)),
                      padding: EdgeInsets.only(
                          right: 20, left: 25, top: 15, bottom: 15))),
            ])));
  }

  // Function to show the next flashcard
  void showNextCard() {
    setState(() {
      _curIndexNum = (_curIndexNum + 1 < qaList.length) ? _curIndexNum + 1 : 0;
    });
  }

  // Function to show the previous flashcard
  void showPreviousCard() {
    setState(() {
      _curIndexNum =
          (_curIndexNum - 1 >= 0) ? _curIndexNum - 1 : qaList.length - 1;
    });
  }
}

Step 6 : Code for main.dart

The file is starting the app, and it calls the HomePage widget coded in above home_widget.dart.

main.dart:

main.dart

import 'package:flashcards_learning_app/home_widget.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flashcards Learning App',
        home: HomePage());
  }
}

Step 7 : Code for add_flash_card.dart

This is the logic to enter the question and answer and then update it in a new flash card.

add_flash_card.dart:

add_flash_card.dart

import 'package:flutter/material.dart';
import 'package:geeks_for_geeks/flashCard.dart';
import 'package:geeks_for_geeks/ques_ans.dart';

// This is the main StatefulWidget
// for the AddFlashcardPage
class AddFlashcardPage extends StatefulWidget {
  @override
  _AddFlashcardPageState createState() => _AddFlashcardPageState();
}

// This is the state class for
// AddFlashcardPage
class _AddFlashcardPageState extends State<AddFlashcardPage> {
  
  // Controllers to manage the input
  // for question and answer fields
  final _questionController = TextEditingController();
  final _answerController = TextEditingController();

  // Function to add a new flashcard to the list
  void _addFlashcard() {
      
    // Check if both question and
    // answer fields are not empty
    if (_questionController.text.isNotEmpty &&
        _answerController.text.isNotEmpty) {
      setState(() {
          
        // Add the new flashcard to the qaList
        qaList.add(Flashcard(
          question: _questionController.text,
          answer: _answerController.text,
        ));
      });

      // Clear the input fields after
      // adding the flashcard
      _questionController.clear();
      _answerController.clear();

      // Navigate back to the previous screen
      Navigator.pop(context);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Title for the app bar
        title: Text("Enter the Question and Answer of your choice"),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            // TextField for entering the question
            TextField(
              controller: _questionController,
              decoration: InputDecoration(
                labelText: 'Enter Question',
              ),
            ),
            // TextField for entering the answer
            TextField(
              controller: _answerController,
              decoration: InputDecoration(
                labelText: 'Enter Answer',
              ),
            ),
            SizedBox(height: 20),
            // Button to trigger the _addFlashcard function
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.green,
                foregroundColor: Colors.white,
              ),
              onPressed: _addFlashcard,
              child: Text("Add Flashcard"),
            ),
          ],
        ),
      ),
    );
  }
}

Step 9 : Run the application

Save the project and enter the below command to run the application.

flutter run

Click here to get the Full Application Code Access