FlashCards Learning App in Flutter

Last Updated : 31 Mar, 2025

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

Output:

FlashCards Learning App in Flutter

flutterfly

Improve

Article Tags :

FlashCards Learning App in Flutter

Concepts Covered in the App

Project Structure

Step-by-Step Implementation of Flashcard Learning App

Step 1 : Create a new Flutter Application

Step 2 : Adding the Dependency

Step 3 : Code for flash_card.dart

Step 4 : Code for ques_ans.dart file

Step 5 : Code for home_widget.dart

Step 6 : Code for main.dart

Step 7 : Code for add_flash_card.dart

Step 9 : Run the application

Click here to get the Full Application Code Access

Output:

Similar Reads