Build a Flashcard app with Flutter

Recently I’ve been learning how to write apps with Flutter. One of the apps I wanted to make was flashcards deck, where users can swipe left or right to read cards and quiz themselves.

In this article, I will present how to build a simplified flashcard app with flutter, which can be run natively on both iOS and Android.

Simplified Requirements

• Load questions from a static file, ideally, a CSV file.
• Render the question card in a certain order, one screen per card.

A screenshot looks like below:

Implementation Details

For loading data CSV, I use the csv package. Also, for rendering the question flashcards, I used transformer_page_view.

The dependencies in pubspec.yaml file looks like:

dependencies:
  csv: ^4.0.3
  transformer_page_view: ^0.1.6

For loading CSV, we need to add the csv to asset in pubspec.yaml:

flutter:
  uses-material-design: true
  assets:
  - lib/assets/questions.csv

The questions.csv is a plain text csv:

Question
Command to sort lines of text files?
What does the 3rd column of /etc/fstab show?
Alternative name and location for grub.conf on some systems?
What the standard BASH file descriptors?
The .odt file format would be read with what program?
Command to manipulate shell variables and functions

The reason we add it as csv is to make it easy to update questions without changing the app’s code. Simply updating the CSV will do.

To read CSV from asset, we can use rootBundle.loadString(<asset path>), e.g.,

rootBundle.loadString('lib/assets/questions.csv') // returns Future

However, this function returns a Future object, which makes a bit tricky to use, since we don’t want to deal with async in our build function.

Luckily, we can use FutureBuilder class:

Widget build(BuildContext context) {
  return FutureBuilder<String>(
    future: rootBundle.loadString('lib/assets/questions.csv'), //
    builder: (BuildContext context, AsyncSnapshot<String> snapshot){
      List<List<dynamic>> csvTable =
      CsvToListConverter().convert(snapshot.data);
      // ... other code to render other UI
    });
}

Full source code can be found in my Github:

junjizhi/flutter-flashcards

Concluding Thoughts

This article describes a simple flashcards app in less than 100 lines of Dart code. The app can load questions from a static CSV file which makes updating questions easy. Next step is to build the card-flipping functionality into the UI.

One tricky issue is the way how to work with async function. I found FutureBuilder is commonly used for this type of UI rendering based on a future.

Overall, my experience with building a simple app with Flutter is smooth. But I believe as app logic evolves, we need a better way to manage cross-component states. Putting all states inside a component is not a feasible way forward. One direction that looks promising to me is the BLoC pattern.

Thoughts? Feel free to leave me a message!