flashcard #

A lightweight, accessible Flutter widget for question/answer flashcards with:

• Flip by tap or swipe (horizontal/vertical)
• Automatic text contrast (WCAG-based) against any background color
• Tiled diagonal watermark via CustomPainter
• Built-in text auto-fit (no external dependency)
• Minimal API, null-safety, and flutter_lints-clean

GIFs/Screenshots: Add your media under assets/ and link them here. Example command to record a quick demo on desktop: flutter run -d macos and capture with your OS tool.

Features #

• Flip behaviors: none, tap, verticalSwipe, horizontalSwipe
• Background styles: solid, pattern (tiled diagonal watermark)
• Auto-fit text: Binary search based sizing to avoid overflow
• Contrast-aware text: Picks black/white for optimal readability
• Accessible: Semantics for screen readers and hints

Quick Start #

import 'package:flutter/material.dart';
import 'package:flashcard/flashcard.dart';

class MyCard extends StatelessWidget {
  const MyCard({super.key});

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 3 / 2,
      child: Flashcard(
        questionText: 'What is the capital of France?',
        answerText: 'Paris',
        frontColor: Colors.amber,
        backColor: Colors.teal,
        flipBehavior: FlashcardFlipBehavior.tap,
        backgroundStyle: FlashcardBackgroundStyle.pattern,
        watermarkTextFront: 'Question',
        watermarkTextBack: 'Answer',
        autoFitText: true,
        minFontSize: 16,
        maxLines: 10,
        borderRadius: 16,
        elevation: 2,
        padding: const EdgeInsets.symmetric(horizontal: 16),
      ),
    );
  }
}

// Fullscreen example
class FullscreenCard extends StatelessWidget {
  const FullscreenCard({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox.expand(
      child: Flashcard(
        questionText: 'What is the capital of France?',
        answerText: 'Paris',
        frontColor: Colors.amber,
        backColor: Colors.teal,
        flipBehavior: FlashcardFlipBehavior.tap,
        backgroundStyle: FlashcardBackgroundStyle.pattern,
        watermarkTextFront: 'Question',
        watermarkTextBack: 'Answer',
        autoFitText: true,
        minFontSize: 16,
        maxLines: 10,
        borderRadius: 16,
        elevation: 2,
        padding: const EdgeInsets.symmetric(horizontal: 16),
      ),
    );
  }
}

Example app #

Run the included demo:

cd example && flutter run -d chrome

API #

Flashcard({
  required String questionText,
  required String answerText,
  required Color frontColor,
  Color? backColor,
  FlashcardFlipBehavior flipBehavior = FlashcardFlipBehavior.tap,
  FlashcardBackgroundStyle backgroundStyle = FlashcardBackgroundStyle.solid,
  String? watermarkTextFront,
  String? watermarkTextBack,
  bool autoForegroundColor = true,
  TextStyle? questionTextStyle,
  TextStyle? answerTextStyle,
  bool autoFitText = true,
  double minFontSize = 16,
  int maxLines = 10,
  double borderRadius = 16,
  double elevation = 2,
  EdgeInsetsGeometry padding = const EdgeInsets.symmetric(horizontal: 16),
})

Enums #

enum FlashcardFlipBehavior { none, tap, verticalSwipe, horizontalSwipe }
enum FlashcardBackgroundStyle { solid, pattern }

Property Table #

Accessibility #

• The root widget exposes semantics as a button when interactive.
• Semantic labels describe whether the question or answer is currently visible.
• Semantic hints indicate the interaction (tap or swipe) when enabled.
• Ensure sufficient color contrast. The widget automatically picks black/white foreground using WCAG contrast against your background colors.

Screenshots / GIFs #

Testing #

Run unit/widget tests:

flutter test

License #

MIT