writing_guidelines 0.0.2

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.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:writing_guidelines/writing_guidelines.dart';
import 'package:writing_guidelines/writing_guidelines_wrap.dart';
import 'package:writing_guidelines/style/writing_guidelines_style.dart';
import 'package:writing_guidelines/utils/pinyin_utils.dart';
import 'package:google_fonts/google_fonts.dart';
void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PinyinGrid Demo',
      theme: ThemeData(colorScheme: .fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'PinyinGrid Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _pinyinTexts = ["běi", "jīng", "huān", "yíng", "nín"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: .start,
          spacing: 40,
          children: [
            SizedBox(height: 10,),
            WritingGuidelines(
              style: WritingGuidelinesStyle(fontSize: 60,lineWidth: 3),
              child: Text("huān yíng",  style: GoogleFonts.playwriteIe(fontSize: 60),),
            ),
            WritingGuidelines.text(
              "huān yíng".replaceAWithAlpha(),
              textStyle: TextStyle(fontSize: 60),
              fontSize: 60,
              lineWidth: 4,
            ),
            SizedBox(
              width: .infinity,
              child: WritingGuidelines.direct(
                fontSize: 60,
                child: Row(
                  mainAxisAlignment: .center,
                  crossAxisAlignment: .center,
                  children: [
                    Text("běi jīng", style: TextStyle(fontSize: 60)),
                    Container(
                      decoration: BoxDecoration(
                        shape: .circle,
                        color: Colors.blue,
                      ),
                      width: 60,
                      height: 60,
                    ),
                  ],
                ),
              ),
            ),
            SizedBox(
              width: .infinity,
              child: WritingGuidelinesWrap(
                fontSize: 60,
                runSpacing: 5,
                lineColor: Colors.pink,
                children: _pinyinTexts
                    .map((text) => Text(text, style: TextStyle(fontSize: 60)))
                    .toList(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}