shinobi_ui 1.0.0

An anime-inspired Flutter UI kit themed around Naruto. Features Sharingan & Rinnegan loading spinners, chakra glow buttons, and power-level progress bars with Genin→Kage rank indicators. Built for dev [...]

example/lib/main.dart

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

void main() {
  runApp(const ShinobiExampleApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'shinobi_ui Demo',
      debugShowCheckedModeBanner: false,
      theme: ShinobiTheme.darkTheme(),
      home: const DemoPage(),
    );
  }
}

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

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  double _chakra = 0.65;
  final double _health = 0.85;
  final double _stamina = 0.3;
  final ChakraType _selectedType = ChakraType.sharingan;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ShinobiTheme.akatsukiDark,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: const Text(
          'SHINOBI UI',
          style: ShinobiTheme.jutsuTitle,
        ),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // ── Loaders ──────────────────────────────────────
            const _Section(title: 'LOADERS'),
            const SizedBox(height: 16),
            const Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Column(
                  children: [
                    SharinganLoader(size: 80),
                    SizedBox(height: 8),
                    Text('Sharingan',
                        style: TextStyle(
                            color: ShinobiTheme.sharinganRed, fontSize: 12)),
                  ],
                ),
                Column(
                  children: [
                    RinneganLoader(size: 80),
                    SizedBox(height: 8),
                    Text('Rinnegan',
                        style: TextStyle(
                            color: ShinobiTheme.rinneganPurple, fontSize: 12)),
                  ],
                ),
                Column(
                  children: [
                    SharinganLoader(
                        size: 80, type: ChakraType.kurama),
                    SizedBox(height: 8),
                    Text('Kurama',
                        style: TextStyle(
                            color: ShinobiTheme.kuramaOrange, fontSize: 12)),
                  ],
                ),
              ],
            ),

            const SizedBox(height: 32),

            // ── Buttons ──────────────────────────────────────
            const _Section(title: 'CHAKRA BUTTONS'),
            const SizedBox(height: 16),
            Center(
              child: Column(
                children: [
                  ChakraButton(
                    label: 'Chidori',
                    jutsuName: 'Lightning Release',
                    type: ChakraType.chakra,
                    onPressed: () {},
                  ),
                  const SizedBox(height: 12),
                  ChakraButton(
                    label: 'Amaterasu',
                    jutsuName: 'Mangekyō Sharingan',
                    type: ChakraType.sharingan,
                    onPressed: () {},
                  ),
                  const SizedBox(height: 12),
                  ChakraButton(
                    label: 'Shinra Tensei',
                    jutsuName: 'Rinnegan Deva Path',
                    type: ChakraType.rinnegan,
                    onPressed: () {},
                  ),
                  const SizedBox(height: 12),
                  ChakraButton(
                    label: 'Sage Mode',
                    jutsuName: 'Nature Transformation',
                    type: ChakraType.sage,
                    onPressed: () {},
                  ),
                  const SizedBox(height: 12),
                  ChakraButton(
                    label: 'Tailed Beast Bomb',
                    jutsuName: 'Nine Tails',
                    type: ChakraType.kurama,
                    onPressed: () {},
                  ),
                ],
              ),
            ),

            const SizedBox(height: 32),

            // ── Progress Bars ─────────────────────────────────
            const _Section(title: 'CHAKRA PROGRESS BARS'),
            const SizedBox(height: 16),
            ChakraProgressBar(
              value: _chakra,
              label: 'Chakra Reserve',
              type: ChakraType.chakra,
              showRank: true,
              showPercent: true,
            ),
            const SizedBox(height: 16),
            ChakraProgressBar(
              value: _health,
              label: 'Health',
              type: ChakraType.sage,
              showPercent: true,
            ),
            const SizedBox(height: 16),
            ChakraProgressBar(
              value: _stamina,
              label: 'Stamina',
              type: ChakraType.kurama,
              showRank: true,
              showPercent: true,
            ),

            const SizedBox(height: 24),

            // Slider to demo
            const Text('Adjust Chakra Reserve',
                style: TextStyle(
                    color: ShinobiTheme.chakraBlue,
                    fontSize: 12,
                    letterSpacing: 1)),
            Slider(
              value: _chakra,
              onChanged: (v) => setState(() => _chakra = v),
              activeColor: ShinobiTheme.chakraBlue,
              inactiveColor: ShinobiTheme.chakraBlue.withValues(alpha: 0.2),
            ),
          ],
        ),
      ),
    );
  }
}

class _Section extends StatelessWidget {
  final String title;
  const _Section({required this.title});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          width: 3,
          height: 16,
          decoration: BoxDecoration(
            color: ShinobiTheme.chakraBlue,
            borderRadius: BorderRadius.circular(2),
            boxShadow: [
              BoxShadow(
                color: ShinobiTheme.chakraBlue.withValues(alpha: 0.6),
                blurRadius: 6,
              )
            ],
          ),
        ),
        const SizedBox(width: 10),
        Text(
          title,
          style: const TextStyle(
            fontSize: 11,
            fontWeight: FontWeight.w800,
            letterSpacing: 3,
            color: Colors.white54,
          ),
        ),
      ],
    );
  }
}