tecta_ui 0.1.0

A premium, clean, and highly customizable UI component design system for Flutter, featuring beautiful colors, smooth typography, and refined feedback elements.

Tc

A sleek, premium, and highly-customizable Flutter UI design system inspired by the modern MUI (Material UI) and Minimals design language.

Tc provides a complete set of visually stunning, flexible, and robust components designed to speed up development while offering custom theme structures (typography, shadow depths, and curated HSL palettes).

---

🚀 Key Features

• Beautiful Foundations: Comprehensive brand colors (Primary, Secondary, Success, Warning, Info, Error, and Grey shades), modern typography scale (using Google Sans), and smooth elevation shadows.
• Segmented & Contained Controls: Premium iOS/macOS styled contained tabs tray, capsule pill tabs, and classic line indicators with zero horizontal layout overflows.
• Google-Style Progress Loaders: Indeterminate progress bars that cycle smoothly through a list of custom brand colors.
• Robust Feedback & Modals: Overlay-based tooltip bubble notes with 4 direction support, rating star bars (half stars & tap gestures), timeline step guides, drag sliders, sheet drawers, dialogs, and snackbars.
• Responsive & Adaptive: Zero hardcoded overflows, flexible layout constraints, and cross-platform layout compatibility.

---

🤖 AI & Agent Ready

Tc is built to be easily understood and integrated by AI coding assistants (such as Copilot, Cursor, Gemini, and GPT). We provide a single-file, structured API specification that you can feed directly to your AI agents:

• TECTA_SPECS.md: A complete, structured cheatsheet containing all design tokens, signatures, constructor parameters, and code snippets for our 23+ components.

How to use with AI:

When prompting your coding assistant, simply reference @TECTA_SPECS.md in your IDE context window (or copy its content to the system prompt) and say:

"Create a page using Tc components. Refer to TECTA_SPECS.md for accurate widget signatures."

---

📦 Installed Components

Category	Components
Foundation	TcColors, TcTypography, TcShadows
Buttons	TcButton, TcIconButton, TcFab (Outlined, Soft, Contained)
Inputs	TcTextField (Text & Selection), TcCheckbox, TcRadio, TcSwitch, TcUpload (Box & Avatar Upload zones)
Data Display	TcCard (with compartment zones & hover lift animations), TcAccordion, TcAvatar, TcAvatarGroup, TcBadge, TcChip (Tag style), TcLabel (Status chips), TcTimeline (Solid & dashed step paths)
Feedback & Modal	TcAlert, TcSnackbar (Toasts), TcDialog, TcBottomSheet (Scrollable / Draggable layout)
Overlays & Controls	TcTooltip (4-direction overlays), TcRating (half/full stars), TcSlider, TcTabs (Line, Pill, Contained)
Loading & Placeholders	TcSkeleton (pulsing shimmers), TcEmptyState (clean placeholder layout screens)

---

🏁 Getting Started

1. Add dependency

Add tecta_ui to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  tecta_ui: ^0.1.0 # Or latest version from pub.dev

Or run this command in your terminal:

flutter pub add tecta_ui

2. Import package

Import the library in your Dart code:

import 'package:tecta_ui/tecta_ui.dart';

---

💡 Usage Examples

1. Primary Button

TcButton(
  label: 'Get Started',
  variant: TcButtonVariant.contained,
  onPressed: () {
    print('Button Pressed!');
  },
)

2. Contained Segmented Tabs (iOS/macOS Control Style)

TcTabs(
  selectedIndex: _activeIndex,
  variant: TcTabsVariant.contained,
  tabs: const [
    TcTab(label: 'Daily'),
    TcTab(label: 'Weekly'),
    TcTab(label: 'Monthly'),
  ],
  onTabChanged: (index) {
    setState(() => _activeIndex = index);
  },
)

3. Google-Style Multi-Color Progress Spinner

TcCircularProgress(
  size: 40.0,
  strokeWidth: 4.0,
  colors: [
    TcColors.infoMain,
    TcColors.errorMain,
    TcColors.warningMain,
    TcColors.successMain,
  ],
)

4. Interactive Rating Star Bar

TcRating(
  rating: 3.5,
  allowHalfRating: true,
  onRatingChanged: (newRating) {
    print('New rating: $newRating');
  },
)

5. Premium Empty State Screen

TcEmptyState(
  title: 'No Mail Found',
  description: 'Your inbox is clear! Check back later for incoming messages.',
  iconData: Icons.folder_off_outlined,
  action: TcButton(
    label: 'Refresh Inbox',
    onPressed: () => refresh(),
  ),
)

---

🎨 Theme Customization

Tc UI components support dynamic brand colors. By default, components will look up and inherit colors from Theme.of(context).colorScheme.primary and secondary.

1. Standard ThemeData Customization

If you use standard Flutter themes, components automatically adjust to the active colors:

MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.deepPurple,
      primary: Colors.deepPurple,
      secondary: Colors.amber,
    ),
  ),
  // ...
);

2. Custom TcTheme Builder

Alternatively, use the custom TcTheme builder from the package to preserve MUI/Minimals styled radius, elevation, and fonts while applying custom colors:

MaterialApp(
  theme: TcTheme.buildTheme(
    brightness: Brightness.light,
    primaryColor: Colors.teal,
    secondaryColor: Colors.pink,
  ),
  darkTheme: TcTheme.buildTheme(
    brightness: Brightness.dark,
    primaryColor: Colors.tealAccent,
    secondaryColor: Colors.pinkAccent,
  ),
  // ...
);

---

🛠️ Running the Showcase Application

To see all components in action and inspect their design parameters, run the included example app:

cd example
flutter run

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.