flutter_kanjivg

flutter_kanjivg provides a simple way of interacting with data from the KanjiVG (Kanji Vector Graphics) project. This package contains a parser for SVG files with extensions added by the maintainers of KanjiVG and Flutter widgets that simplify displaying animated kanji. It also provides metadata like stroke count, original radical forms (e.g. 人 for 亻), the position of radicals and more.

This package is neither supported nor related to the creators of the KanjiVG project.

Getting started

1. Add this package to your dependencies.

dependencies:
  flutter_kanjivg: latest_version

2. Get the dependencies.

flutter pub get

When using flutter_kanjivg there is no need to add kanjivg to your dependencies as flutter_kanjivg imports it itself.

Usage

The library doesn't include kanji data as there are over 10,000 files and it would be quite wasteful if you want to fetch them at runtime. You can either:

1. download SVG files from project's GitHub page,
2. self-host them and get SVG data from your server.

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

class KanjiPage extends StatefulWidget {
  const KanjiPage({super.key});

  @override
  State<KanjiPage> createState() => _KanjiPageState();
}

class _KanjiPageState extends State<KanjiPage> with TickerProviderStateMixin {
  late final KanjiController controller;

  @override
  void initState() {
    super.initState();

    const source = '<?xml version="1.0" encoding="UTF-8"?> ... </svg>';
    const parser = KanjiParser();

    // Returns an instance of `KvgData` with `id`, `character`, `radicals` and `strokes`.
    final data = parser.parse(source);

    controller = KanjiController(
      vsync: this,
      duration: const Duration(seconds: 5),
    )
      ..load(data)
      ..forward();
  }

  @override
  void dispose() {
    controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: KanjiCanvas(
          controller: controller,
          size: 260,
          thickness: 6,
          color: Colors.red,
          hintColor: Colors.red.withOpacity(0.33),
        ),
      ),
    );
  }
}

Additional information

• This package requires at least Flutter 3.24 to work.
• If there are any issues feel free to go to GitHub Issues and report a bug.

Maintainers

• Nikodem Bernat