san10ux 0.0.1 
san10ux: ^0.0.1 copied to clipboard
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.
example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:san10ux/san10ux.dart';
void main() {
runApp(const ShowcaseApp());
}
class ShowcaseApp extends StatefulWidget {
const ShowcaseApp({super.key});
@override
State<ShowcaseApp> createState() => _ShowcaseAppState();
}
class _ShowcaseAppState extends State<ShowcaseApp> {
ThemeMode _themeMode = ThemeMode.dark; // Default to modern dark mode
void _toggleTheme() {
setState(() {
_themeMode = _themeMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'San10 Design System Showcase',
debugShowCheckedModeBanner: false,
theme: San10Theme.lightTheme,
darkTheme: San10Theme.darkTheme,
themeMode: _themeMode,
home: Builder(
builder: (context) {
return DemoHomeScreen(
themeMode: _themeMode,
onThemeToggle: _toggleTheme,
);
},
),
);
}
}
class DemoHomeScreen extends StatefulWidget {
final ThemeMode themeMode;
final VoidCallback onThemeToggle;
const DemoHomeScreen({
super.key,
required this.themeMode,
required this.onThemeToggle,
});
@override
State<DemoHomeScreen> createState() => _DemoHomeScreenState();
}
class _DemoHomeScreenState extends State<DemoHomeScreen> with SingleTickerProviderStateMixin {
late TabController _tabController;
// Form states
final _formKey = GlobalKey<FormState>();
final _nameController = TextEditingController();
final _githubController = TextEditingController();
String? _nameError;
String? _githubError;
// Action states
bool _isButtonLoading = false;
int _notificationCount = 3;
@override
void initState() {
super.initState();
_tabController = TabController(length: 5, vsync: this);
}
@override
void dispose() {
_tabController.dispose();
_nameController.dispose();
_githubController.dispose();
super.dispose();
}
void _submitProfileForm() {
setState(() {
final name = _nameController.text;
final github = _githubController.text;
if (name.isEmpty) {
_nameError = "Display name cannot be empty";
} else {
_nameError = null;
}
if (github.isEmpty) {
_githubError = "Github handle is required";
} else {
_githubError = null;
}
if (_nameError == null && _githubError == null) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text("Developer profile updated successfully!"),
backgroundColor: San10Colors.success,
),
);
}
});
}
void _resetForm() {
setState(() {
_nameController.clear();
_githubController.clear();
_nameError = null;
_githubError = null;
});
}
Future<void> _simulateProcess() async {
setState(() {
_isButtonLoading = true;
});
await Future.delayed(const Duration(seconds: 3));
if (mounted) {
setState(() {
_isButtonLoading = false;
_notificationCount++;
});
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text("Workspace sync complete!"),
backgroundColor: San10Colors.info,
),
);
}
}
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final isDark = theme.brightness == Brightness.dark;
return Scaffold(
appBar: San10Header(
title: "San10 DevSpace",
onThemeToggle: widget.onThemeToggle,
actions: [
IconButton(
icon: const Icon(Icons.notifications_outlined),
onPressed: () {
setState(() {
_notificationCount = 0;
});
},
),
if (_notificationCount > 0)
Padding(
padding: const EdgeInsets.only(right: 12.0),
child: San10Badge(
text: _notificationCount.toString(),
variant: San10BadgeVariant.danger,
isPill: true,
),
),
],
),
body: Column(
children: [
Container(
color: isDark ? San10Colors.surfaceDark : Colors.white,
child: TabBar(
controller: _tabController,
isScrollable: true,
indicatorColor: San10Colors.primary,
labelColor: San10Colors.primary,
unselectedLabelColor: isDark ? Colors.white54 : Colors.grey[600],
tabs: const [
Tab(text: "Palette & Fonts", icon: Icon(Icons.style_outlined)),
Tab(text: "Buttons & Loaders", icon: Icon(Icons.ads_click_outlined)),
Tab(text: "Inputs & Forms", icon: Icon(Icons.input_outlined)),
Tab(text: "Cards & Grids", icon: Icon(Icons.grid_view_outlined)),
Tab(text: "Alerts & Pills", icon: Icon(Icons.notification_important_outlined)),
],
),
),
Expanded(
child: TabBarView(
controller: _tabController,
children: [
_buildFoundationsTab(),
_buildButtonsTab(),
_buildFormsTab(),
_buildCardsTab(),
_buildAlertsTab(),
],
),
),
],
),
bottomNavigationBar: San10Footer(
copyrightText: "© ${DateTime.now().year} San10. Engineered with Flutter.",
links: [
San10FooterLink(
label: "Sitemap",
onTap: () {},
),
San10FooterLink(
label: "Terms",
onTap: () {},
),
San10FooterLink(
label: "Privacy",
onTap: () {},
),
],
socialActions: [
IconButton(
icon: const Icon(Icons.code_outlined, color: Colors.indigo, size: 20.0),
onPressed: () {},
),
IconButton(
icon: const Icon(Icons.account_circle_outlined, color: Colors.indigo, size: 20.0),
onPressed: () {},
),
],
),
);
}
Widget _buildFoundationsTab() {
final isDark = Theme.of(context).brightness == Brightness.dark;
final headingColor = isDark ? Colors.white : San10Colors.primary;
return SingleChildScrollView(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Curated Dev Color Scheme",
style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold, color: headingColor),
),
const SizedBox(height: 12.0),
Wrap(
spacing: 12.0,
runSpacing: 12.0,
children: [
_buildSwatch("Indigo (Primary)", San10Colors.primary, Colors.white),
_buildSwatch("Emerald (Secondary)", San10Colors.secondary, Colors.white),
_buildSwatch("Rose (Accent)", San10Colors.accent, Colors.white),
_buildSwatch("Dark Surface", San10Colors.surfaceDark, Colors.white),
_buildSwatch("Success Green", San10Colors.success, Colors.white),
_buildSwatch("Error Red", San10Colors.error, Colors.white),
_buildSwatch("Warning Amber", San10Colors.warning, Colors.white),
_buildSwatch("Info Blue", San10Colors.info, Colors.white),
],
),
const Divider(height: 36.0),
Text(
"Developer Typography Scales",
style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold, color: headingColor),
),
const SizedBox(height: 16.0),
Text(
"Headline 1 - Large Bold Statement",
style: San10Typography.heading1(isDark: isDark),
),
const SizedBox(height: 10.0),
Text(
"Headline 2 - Standard Subsection Title",
style: San10Typography.heading2(isDark: isDark),
),
const SizedBox(height: 10.0),
Text(
"Headline 3 - Minor Subsection Heading",
style: San10Typography.heading3(isDark: isDark),
),
const SizedBox(height: 12.0),
Text(
"Body Large: Used for portfolio highlights, introduction texts, and summary descriptors.",
style: San10Typography.bodyLarge(isDark: isDark),
),
const SizedBox(height: 8.0),
Text(
"Body Medium: Utilized across project descriptions, input forms, button texts, and normal status cards.",
style: San10Typography.bodyMedium(isDark: isDark),
),
const SizedBox(height: 8.0),
Text(
"Caption text: Recommended for helper hints, sitemaps, system log timestamps, and passive notes.",
style: San10Typography.caption(isDark: isDark),
),
],
),
);
}
Widget _buildSwatch(String name, Color color, Color textCol) {
return Container(
width: 140.0,
height: 90.0,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(10.0),
border: Border.all(color: Colors.grey.withOpacity(0.2), width: 1.0),
boxShadow: const [
BoxShadow(
color: Colors.black12,
blurRadius: 4.0,
offset: Offset(0, 2),
),
],
),
padding: const EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
name,
style: TextStyle(fontSize: 11.0, fontWeight: FontWeight.bold, color: textCol),
),
const SizedBox(height: 4.0),
Text(
"#${color.value.toRadixString(16).substring(2).toUpperCase()}",
style: TextStyle(fontSize: 10.0, color: textCol.withOpacity(0.7)),
),
],
),
);
}
Widget _buildButtonsTab() {
return ListView(
padding: const EdgeInsets.all(20.0),
children: [
San10Card(
title: const Text("Premium Personal Buttons"),
subtitle: const Text("Vibrant Indigo, Mint, and Rose action triggers"),
child: Wrap(
spacing: 12.0,
runSpacing: 12.0,
children: [
San10Button(
text: "Indigo Primary",
variant: San10ButtonVariant.primary,
onPressed: () {},
),
San10Button(
text: "Emerald Mint",
variant: San10ButtonVariant.secondary,
onPressed: () {},
),
San10Button(
text: "Rose Accent",
variant: San10ButtonVariant.accent,
onPressed: () {},
),
San10Button(
text: "Outlined Mode",
variant: San10ButtonVariant.outlined,
onPressed: () {},
),
San10Button(
text: "Plain Link",
variant: San10ButtonVariant.text,
onPressed: () {},
),
],
),
),
const SizedBox(height: 16.0),
San10Card(
title: const Text("States & Layout Sizing"),
subtitle: const Text("Supports loading spinners, icons, and full-width block buttons"),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Wrap(
spacing: 12.0,
runSpacing: 12.0,
children: [
San10Button(
text: "Disabled State",
variant: San10ButtonVariant.primary,
onPressed: null,
),
San10Button(
text: "Search GitHub",
variant: San10ButtonVariant.primary,
icon: const Icon(Icons.search_outlined, size: 16.0, color: Colors.white),
onPressed: () {},
),
San10Button(
text: _isButtonLoading ? "Syncing..." : "Simulate Sync",
variant: San10ButtonVariant.accent,
isLoading: _isButtonLoading,
onPressed: _simulateProcess,
),
],
),
const SizedBox(height: 16.0),
San10Button(
text: "Full Width Block Primary Button",
variant: San10ButtonVariant.primary,
isFullWidth: true,
onPressed: () {},
),
],
),
),
const SizedBox(height: 16.0),
San10Card(
title: const Text("Workspace Loaders"),
subtitle: const Text("Sleek circular and linear progress displays"),
child: const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
San10Loader(type: San10LoaderType.circular, size: 32.0),
SizedBox(width: 24.0),
Expanded(
child: San10Loader(
type: San10LoaderType.circular,
message: "Syncing repositories...",
size: 34.0,
),
),
],
),
SizedBox(height: 24.0),
San10Loader(
type: San10LoaderType.linear,
message: "Indexing workspace files...",
),
],
),
),
],
);
}
Widget _buildFormsTab() {
return SingleChildScrollView(
padding: const EdgeInsets.all(20.0),
child: San10Card(
title: const Text("Edit Developer Profile"),
subtitle: const Text("Personal profile configurations with form validation validation"),
actions: [
San10Button(
text: "Reset",
variant: San10ButtonVariant.outlined,
onPressed: _resetForm,
),
San10Button(
text: "Update Profile",
variant: San10ButtonVariant.primary,
onPressed: _submitProfileForm,
),
],
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
San10InputField(
label: "Display Name *",
hintText: "e.g. John Doe",
controller: _nameController,
prefixIcon: const Icon(Icons.person_outline, size: 18.0),
errorText: _nameError,
helperText: "This name will be displayed publicly on your workspace.",
),
const SizedBox(height: 20.0),
San10InputField(
label: "GitHub Username *",
hintText: "e.g. johndoe",
controller: _githubController,
prefixIcon: const Icon(Icons.code_outlined, size: 18.0),
errorText: _githubError,
helperText: "Used to fetch repository statistics.",
),
const SizedBox(height: 20.0),
const San10InputField(
label: "Registered Account Email",
hintText: "john.doe@example.com",
enabled: false,
prefixIcon: Icon(Icons.email_outlined, size: 18.0),
),
const SizedBox(height: 20.0),
const San10InputField(
label: "Personal Bio",
hintText: "Tell us about your developer journey...",
maxLines: 3,
),
],
),
),
),
);
}
Widget _buildCardsTab() {
return ListView(
padding: const EdgeInsets.all(20.0),
children: [
San10Card(
title: const Text("Flutter Framework Plugins"),
subtitle: const Text("Development packages catalog"),
leading: const Icon(Icons.widgets_outlined, color: San10Colors.accent),
actions: [
TextButton(
onPressed: () {},
child: const Text("View Code"),
),
San10Button(
text: "Install Package",
variant: San10ButtonVariant.primary,
onPressed: () {},
),
],
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Active Installs: 15K+",
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Theme.of(context).brightness == Brightness.dark ? Colors.white : Colors.black87,
),
),
const SizedBox(height: 8.0),
const Text(
"A modular catalog UI package providing smooth animations and custom developer tiles. Perfect for building custom dashboards and settings pages.",
style: TextStyle(height: 1.4),
),
],
),
),
const SizedBox(height: 20.0),
San10Card(
title: const Text("Interactive Dashboard Tile"),
subtitle: const Text("Tapping triggers a ripple interaction"),
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text("Dashboard Tile Tapped!")),
);
},
child: const Text("Tap anywhere on this card container to activate the ink-well feedback simulation."),
),
],
);
}
Widget _buildAlertsTab() {
return ListView(
padding: const EdgeInsets.all(20.0),
children: [
const Text(
"Notification Severities",
style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
),
const SizedBox(height: 12.0),
const San10Alert(
severity: San10AlertSeverity.success,
title: "Build Succeeded",
message: "All compilation assets compiled and bundlers packed successfully in 12.5 seconds.",
),
const SizedBox(height: 12.0),
const San10Alert(
severity: San10AlertSeverity.info,
title: "New Update Available",
message: "A new version of Flutter SDK tools (v3.25.0) is ready to download.",
),
const SizedBox(height: 12.0),
San10Alert(
severity: San10AlertSeverity.warning,
title: "Low Disk Space Warn",
message: "Your IDE cache folder is exceeding 15GB. Consider clearing old outputs.",
onClose: () {},
),
const SizedBox(height: 12.0),
San10Alert(
severity: San10AlertSeverity.error,
title: "Dependency Error",
message: "Package conflicts found between direct and transitively resolved packages.",
onClose: () {},
),
const Divider(height: 36.0),
const Text(
"Status Capsules",
style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
),
const SizedBox(height: 12.0),
const Wrap(
spacing: 8.0,
runSpacing: 8.0,
children: [
San10Badge(text: "Active", variant: San10BadgeVariant.primary),
San10Badge(text: "Reviewing", variant: San10BadgeVariant.secondary),
San10Badge(text: "Completed", variant: San10BadgeVariant.success),
San10Badge(text: "Crashed", variant: San10BadgeVariant.danger),
San10Badge(text: "Paused", variant: San10BadgeVariant.warning),
San10Badge(text: "Info", variant: San10BadgeVariant.info),
San10Badge(text: "Draft", variant: San10BadgeVariant.neutral),
],
),
const SizedBox(height: 16.0),
const Wrap(
spacing: 8.0,
runSpacing: 8.0,
children: [
San10Badge(text: "Pill Shape Primary", variant: San10BadgeVariant.primary, isPill: true),
San10Badge(text: "Pill Success", variant: San10BadgeVariant.success, isPill: true),
San10Badge(text: "Pill Warning", variant: San10BadgeVariant.warning, isPill: true),
San10Badge(text: "Custom Pill Color", backgroundColor: Colors.purple, textColor: Colors.white, isPill: true),
],
),
],
);
}
}Metadata
0
likes
130
points
9
downloads
Documentation
Publisher
unverified uploader
Weekly Downloads
Metadata
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.
License
MIT (license)