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.
Status | Comments |
---|---|
Current stable Flutter version | |
Current beta Flutter version | |
The oldest supported Flutter version |
This package is neither supported nor related to the creators of the KanjiVG project.
Getting started
- Add this package to your dependencies.
dependencies:
flutter_kanjivg: latest_version
- 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:
- download SVG files from project's GitHub page,
- 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.