flutter_kanjivg

Description:

flutter kanjivg

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 #

Add this package to your dependencies.

dependencies:
flutter_kanjivg: latest_version
copied to clipboard

Get the dependencies.

flutter pub get
copied to clipboard
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),
),
),
);
}
}
copied to clipboard
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