zeba_academy_neumorphism

Beautiful neumorphic UI widgets for Flutter with soft shadows, convex/concave effects, animated buttons, cards, sliders, and modern customizable components.

pub package likes popularity license

✨ Features

✅ Soft neumorphic shadows ✅ Convex & concave effects ✅ Pressable neumorphic buttons ✅ Beautiful neumorphic cards ✅ Smooth animated containers ✅ Custom neumorphic sliders ✅ Light & dark UI support ✅ Highly customizable widgets ✅ Minimal & modern design ✅ Easy integration

📸 Preview

Neumorphic Button Neumorphic Card Convex Effect
Soft interactive buttons Modern neumorphic cards Elegant UI depth

🚀 Installation

Add this to your pubspec.yaml:

dependencies:
  zeba_academy_neumorphism: ^0.0.1

Then run:

flutter pub get

📦 Import

import 'package:zeba_academy_neumorphism/zeba_academy_neumorphism.dart';

🧩 Basic Usage

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    const background = Color(0xFFE0E5EC);

    return Scaffold(
      backgroundColor: background,
      body: Center(
        child: NeumorphicButton(
          style: const NeumorphismStyle(
            color: background,
            radius: 20,
            depth: 8,
          ),
          onTap: () {},
          child: const Text('Press'),
        ),
      ),
    );
  }
}

🎨 Neumorphic Container

NeumorphicContainer(
  width: 200,
  height: 200,
  style: const NeumorphismStyle(
    color: Color(0xFFE0E5EC),
    radius: 24,
    depth: 12,
    type: NeumorphicType.convex,
  ),
  child: const Center(
    child: Text('Zeba Academy'),
  ),
)

🔘 Neumorphic Button

NeumorphicButton(
  style: const NeumorphismStyle(
    color: Color(0xFFE0E5EC),
    radius: 18,
    depth: 8,
  ),
  onTap: () {
    debugPrint("Pressed");
  },
  child: const Text('Click Me'),
)

🪪 Neumorphic Card

NeumorphicCard(
  style: const NeumorphismStyle(
    color: Color(0xFFE0E5EC),
    type: NeumorphicType.concave,
  ),
  child: const Center(
    child: Text('Beautiful Card'),
  ),
)

🎚️ Neumorphic Slider

double sliderValue = 0.5;

NeumorphicSlider(
  value: sliderValue,
  onChanged: (value) {
    setState(() {
      sliderValue = value;
    });
  },
)

✨ Neumorphic Types

The package supports multiple neumorphic styles:

NeumorphicType.flat
NeumorphicType.concave
NeumorphicType.convex
NeumorphicType.pressed

⚙️ Customization

Property Description
color Background color
depth Shadow depth
radius Border radius
type Neumorphic effect type

🌗 Dark Mode Example

NeumorphicContainer(
  style: const NeumorphismStyle(
    color: Color(0xFF2C2F36),
    depth: 10,
    radius: 20,
    type: NeumorphicType.flat,
  ),
)

📁 Package Structure

lib/
│
├── core/
├── widgets/
├── enums/
└── zeba_academy_neumorphism.dart

🧪 Testing

Run tests using:

flutter test

Analyze code quality:

flutter analyze

🛣️ Roadmap

  • Neumorphic switches
  • Toggle buttons
  • Progress indicators
  • Animated depth effects
  • Advanced gradients
  • Theme presets
  • Glassmorphism support
  • Interactive loaders

🤝 Contributing

Contributions are welcome!

If you'd like to improve this package:

  1. Fork the repository
  2. Create a feature branch
  3. Commit changes
  4. Submit a pull request

📄 License

This project is licensed under the GPL License.

👨‍💻 About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at sufyanism.com or connect with me on LinkedIn

🌍 Your all-in-one learning hub!

🚀 Explore courses and resources in coding, tech, and development at zeba.academy and code.zeba.academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience.

Level up your tech game today! 💻✨

➡ Visit our main site: https://zeba.academy ➡ Explore hands-on courses and resources at: https://code.zeba.academy ➡ Check out our YouTube for more tutorials: https://www.youtube.com/@zeba.academy ➡ Follow us on Instagram: https://www.instagram.com/zeba.academy/

❤️ Support

If you like this package, please give it a ⭐ on GitHub and share it with the Flutter community.

Thank you for visiting!

Libraries

zeba_academy_neumorphism