san10ux 0.0.1

A premium, modern, personal design system for Flutter applications. Provides sleek developer-centric components (Indigo/Rose/Emerald theme) with rounded corners and clean responsive interfaces.

San10 Design System for Flutter

A Flutter package containing production-ready, accessible, and responsive UI components and theme tokens based on a modern personal developer design system named san10ux.

This library is built with sleek developer-centric aesthetics, utilizing curated color palettes (Indigo, Emerald, Rose), rounded corners (12px), clean card boundaries, and dark-mode first design guidelines.

---

Features

• Theme Tokens: Preconfigured light and dark themes carrying Indigo primary themes, Rose accents, Mint secondary colors, and Slate dark backgrounds.
• Core Widgets: A complete set of reusable widgets for personal projects, portfolios, or admin dashboards:
  • San10Button - Rich buttons supporting Primary (Indigo), Secondary (Emerald), Accent (Rose), Outlined, Text, Disabled, and loading states.
  • San10InputField - Input fields featuring top labels, helpful prompts, and active focus borders.
  • San10Card - Rounded card tiles with headers, custom dividers, and action sections.
  • San10Alert - Clean status banners for Success, Error, Warning, and Info notifications.
  • San10Badge - Colored status capsules and counter labels.
  • San10Header - Navigation navbar featuring custom branding slots, utility icons, and light/dark toggles.
  • San10Footer - Developer-focused footer with links to social pages, portfolios, and sitemaps.
  • San10Loader - Circular and linear progress indicators.

---

Getting Started

Add san10ux as a dependency in your pubspec.yaml file:

dependencies:
  san10ux:
    path: ../ux4g_package # Or the version once published to pub.dev

Then run:

flutter pub get

---

Usage

Theme Setup

Wrap your root MaterialApp with the ThemeData generated by San10Theme to apply the system-wide colors, typography, and default element styling:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Developer Portal',
      theme: San10Theme.lightTheme,
      darkTheme: San10Theme.darkTheme,
      themeMode: ThemeMode.system, // Responsive dark/light switching
      home: const DemoHomeScreen(),
    );
  }
}

Adding Components

Here is how you can use the widgets in a screen:

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: San10Header(
        title: "San10 DevSpace",
        onThemeToggle: () {
          // Implement theme toggle logic
        },
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            San10Card(
              title: const Text("Edit Profile Details"),
              subtitle: const Text("Update your developer credentials"),
              actions: [
                San10Button(
                  text: "Reset",
                  variant: San10ButtonVariant.outlined,
                  onPressed: () {},
                ),
                San10Button(
                  text: "Save Changes",
                  variant: San10ButtonVariant.primary,
                  onPressed: () {},
                ),
              ],
              child: const Column(
                children: [
                  San10InputField(
                    label: "Display Name",
                    hintText: "Enter your display name",
                  ),
                  SizedBox(height: 16.0),
                  San10InputField(
                    label: "GitHub Profile",
                    hintText: "github.com/username",
                  ),
                ],
              ),
            ),
            const SizedBox(height: 16.0),
            const San10Alert(
              severity: San10AlertSeverity.success,
              title: "Profile Synced",
              message: "Your project statistics have been refreshed.",
            ),
          ],
        ),
      ),
      bottomNavigationBar: San10Footer(
        copyrightText: "© San10. Engineered with Flutter.",
        links: [
          San10FooterLink(label: "Sitemap", onTap: () {}),
          San10FooterLink(label: "Help", onTap: () {}),
        ],
      ),
    );
  }
}

---

Additional Information

To submit issues, make contributions, or view package logs, check the repository at github.com/Santa/ux4g_package.