Writing Guidelines

中文 · English

A Flutter widget library for pinyin and English handwriting display. It provides a four-line grid background and supports both single-cell and flow layouts.

Features

Draws a four-line grid with customizable line color and thickness
WritingGuidelines accepts any child and uses WritingGuidelinesStyle for unified styling
Convenient constructors: WritingGuidelines.direct and WritingGuidelines.text
WritingGuidelinesWrap auto-wraps and detects the last item of each row

Quick Start

Add the dependency in pubspec.yaml:

dependencies:
  writing_guidelines: ^0.0.1

Import:

import 'package:writing_guidelines/weights.dart';

Usage

WritingGuidelinesStyle

final style = WritingGuidelinesStyle(
  fontSize: 32,
  lineColor: const Color(0xFFE0E0E0),
  lineWidth: 1,
  baselineRatio: 2 / 3,
  heightRatio: 1.5,
);

WritingGuidelines(
  style: style,
  child: const Text('ma', style: TextStyle(fontSize: 32)),
)

Direct Constructor

WritingGuidelines.direct(
  fontSize: 28,
  heightRatio: 1.5,
  baselineRatio: 2 / 3,
  child: const Text('mā', style: TextStyle(fontSize: 28)),
)

Text Mode

WritingGuidelines.text(
  'mǎ',
  fontSize: 28,
  textStyle: const TextStyle(fontSize: 28),
)

Flow Layout

WritingGuidelinesWrap(
  fontSize: 28,
  runSpacing: 12,
  children: const [
    Text('mā', style: TextStyle(fontSize: 28)),
    Text('má', style: TextStyle(fontSize: 28)),
    Text('mǎ', style: TextStyle(fontSize: 28)),
    Text('mà', style: TextStyle(fontSize: 28)),
  ],
)

String Extension

import 'package:writing_guidelines/utils/pinyin_utils.dart';

final s = 'mā'.replaceAWithAlpha(); // mᾱ

API Notes

Grid height = fontSize * heightRatio
Baseline position = gridHeight * baselineRatio
WritingGuidelinesWrap detects the last item in each row and expands it to fill the remaining space

Example

See the /example directory for more examples.

Contributing

Issues and PRs are welcome.