zen_widget 0.0.2

A premium Neumorphic (Soft UI) widget library for Flutter, featuring smooth animations and dynamic theme support.

example/lib/main.dart

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeMode _themeMode = ThemeMode.light;

  void _toggleTheme() {
    setState(() {
      _themeMode =
          _themeMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Zen Neumorphic Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.light,
        scaffoldBackgroundColor: const Color(0xFFE0E5EC),
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        scaffoldBackgroundColor: const Color(0xFF1C1E22),
      ),
      themeMode: _themeMode,
      home: ExampleHome(onThemeToggle: _toggleTheme),
    );
  }
}

class ExampleHome extends StatefulWidget {
  final VoidCallback onThemeToggle;

  const ExampleHome({super.key, required this.onThemeToggle});

  @override
  State<ExampleHome> createState() => _ExampleHomeState();
}

class _ExampleHomeState extends State<ExampleHome> {
  bool _switchValue = false;
  bool _checkboxValue = false;
  double _sliderValue = 0.5;
  int _navIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      appBar: AppBar(
        title: const Text('Zen Neumorphic'),
        backgroundColor: Colors.transparent,
        elevation: 0,
        actions: [
          IconButton(
            onPressed: widget.onThemeToggle,
            icon: Icon(
              Theme.of(context).brightness == Brightness.dark
                  ? Icons.light_mode
                  : Icons.dark_mode,
            ),
          ),
        ],
      ),
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.all(16),
        child: ZenNeumorphicNavbar(
          currentIndex: _navIndex,
          onTap: (index) => setState(() => _navIndex = index),
          items: const [
            ZenNeumorphicNavbarItem(icon: Icons.home, label: 'Home'),
            ZenNeumorphicNavbarItem(icon: Icons.search, label: 'Search'),
            ZenNeumorphicNavbarItem(icon: Icons.settings, label: 'Settings'),
          ],
        ),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const SectionTitle(title: 'Containers'),
            const SizedBox(height: 16),
            const Row(
              children: [
                Expanded(
                  child: ZenNeumorphicContainer(
                    style: ZenNeumorphicStyle.convex,
                    child: Center(child: Text('Convex')),
                  ),
                ),
                SizedBox(width: 16),
                Expanded(
                  child: ZenNeumorphicContainer(
                    style: ZenNeumorphicStyle.concave,
                    child: Center(child: Text('Concave')),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 16),
            const ZenNeumorphicContainer(
              style: ZenNeumorphicStyle.flat,
              child: Center(child: Text('Flat')),
            ),
            const SizedBox(height: 32),
            const SectionTitle(title: 'Form Elements'),
            const SizedBox(height: 16),
            const ZenNeumorphicTextField(
              hintText: 'Enter your name...',
              prefixIcon: Icons.person,
            ),
            const SizedBox(height: 24),
            ZenNeumorphicGroup(
              title: 'Settings Group',
              children: [
                ListTile(
                  title: const Text('Notifications'),
                  trailing: ZenNeumorphicSwitch(
                    value: _switchValue,
                    onChanged: (val) => setState(() => _switchValue = val),
                  ),
                ),
                const Divider(height: 1),
                ListTile(
                  title: const Text('Agree to Terms'),
                  trailing: ZenNeumorphicCheckbox(
                    value: _checkboxValue,
                    onChanged: (val) => setState(() => _checkboxValue = val),
                  ),
                ),
                const Divider(height: 1),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text('Volume Level'),
                      const SizedBox(height: 8),
                      ZenNeumorphicSlider(
                        value: _sliderValue,
                        onChanged: (val) => setState(() => _sliderValue = val),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            const SizedBox(height: 32),
            const SectionTitle(title: 'Interactive Buttons'),
            const SizedBox(height: 16),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ZenNeumorphicButton(
                  onPressed: () {},
                  shape: BoxShape.circle,
                  width: 64,
                  height: 64,
                  child: const Icon(Icons.favorite),
                ),
                ZenNeumorphicButton(
                  onPressed: () {},
                  width: 120,
                  height: 64,
                  child: const Text('Press Me'),
                ),
                ZenNeumorphicButton(
                  onPressed: () {},
                  shape: BoxShape.circle,
                  width: 64,
                  height: 64,
                  child: const Icon(Icons.share),
                ),
              ],
            ),
            const SizedBox(height: 32),
            const SectionTitle(title: 'Stats & Progress'),
            const SizedBox(height: 16),
            const ZenNeumorphicProgressBar(
              progress: 0.75,
              label: 'Storage Used',
            ),
            const SizedBox(height: 16),
            ZenNeumorphicProgressBar(
              progress: 0.4,
              label: 'System Health',
              color: Colors.green.shade400,
            ),
          ],
        ),
      ),
    );
  }
}

class SectionTitle extends StatelessWidget {
  final String title;
  const SectionTitle({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: Text(
        title.toUpperCase(),
        style: Theme.of(context).textTheme.labelLarge?.copyWith(
              fontWeight: FontWeight.w900,
              letterSpacing: 2.0,
              color: Theme.of(context).brightness == Brightness.dark
                  ? Colors.orange.withOpacity(0.8)
                  : Colors.blue.withOpacity(0.8),
            ),
      ),
    );
  }
}