auraa_ui 2.1.0

UI Component Library Inspired by material-tailwind and shadcnui, NextUI , Chakra UI

example/lib/example.dart

import 'package:auraa_ui/aura_ui.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

import 'pages/accordion_page.dart';
import 'pages/alert_page.dart';
import 'pages/avatar_page.dart';
import 'pages/badge_page.dart';
import 'pages/bottom_nav_page.dart';
import 'pages/bottom_sheet_page.dart';
import 'pages/buttons_page.dart';
import 'pages/card_page.dart';
import 'pages/carousel_page.dart';
import 'pages/checkbox_page.dart';
import 'pages/chip_page.dart';
import 'pages/dialog_page.dart';
import 'pages/dropdown_page.dart';
import 'pages/progress_page.dart';
import 'pages/radio_group_page.dart';
import 'pages/skeleton_page.dart';
import 'pages/sparkle_page.dart';
import 'pages/stepper_page.dart';
import 'pages/switch_page.dart';
import 'pages/tab_bar_page.dart';
import 'pages/text_field_page.dart';
import 'pages/toast_page.dart';
import 'pages/tooltip_page.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AuraUI v2 — Component Explorer',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color(0xFF6C63FF),
          surface: Colors.white,
        ),
        scaffoldBackgroundColor: const Color(0xFFF5F5F7),
        extensions: const [
          AuraUITheme(
            buttonRadius: 10,
            cardRadius: 12,
            containerRadius: 8,
          ),
        ],
        pageTransitionsTheme: PageTransitionsTheme(
          builders: kIsWeb
              ? {
                  for (final p in TargetPlatform.values)
                    p: const NoTransitionsBuilder(),
                }
              : const {},
        ),
      ),
      home: const HomePage(),
    );
  }
}

class NoTransitionsBuilder extends PageTransitionsBuilder {
  const NoTransitionsBuilder();
  @override
  Widget buildTransitions<T>(
    PageRoute<T>? route,
    BuildContext? context,
    Animation<double> animation,
    Animation<double> secondary,
    Widget? child,
  ) =>
      child!;
}

// ── Home ─────────────────────────────────────────────────────────────────────

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

  @override
  Widget build(BuildContext context) {
    final sections = [
      _Section(title: 'Inputs', items: [
        _DemoItem(Icons.smart_button_rounded,    'Buttons',      const Color(0xFF6C63FF), const ButtonsPage()),
        _DemoItem(Icons.text_fields_rounded,     'Text Field',   const Color(0xFF3D8EF0), const TextFieldPage()),
        _DemoItem(Icons.check_box_rounded,       'Checkbox',     const Color(0xFF7C4DFF), const CheckboxPage()),
        _DemoItem(Icons.radio_button_checked,    'Radio Group',  const Color(0xFF9C27B0), const RadioGroupPage()),
        _DemoItem(Icons.toggle_on_rounded,       'Switch',       const Color(0xFF00BCD4), const SwitchPage()),
        _DemoItem(Icons.arrow_drop_down_circle,  'Dropdown',     const Color(0xFF0097A7), const DropdownPage()),
      ]),
      _Section(title: 'Display', items: [
        _DemoItem(Icons.dashboard_rounded,               'Card',         const Color(0xFF43A047), const CardPage()),
        _DemoItem(Icons.person_rounded,          'Avatar',       const Color(0xFF26A69A), const AvatarPage()),
        _DemoItem(Icons.label_rounded,           'Chip',         const Color(0xFFEF6C00), const ChipPage()),
        _DemoItem(Icons.notifications_rounded,   'Badge',        const Color(0xFFE53935), const BadgePage()),
        _DemoItem(Icons.view_carousel_rounded,   'Carousel',     const Color(0xFFFF7043), const CarouselPage()),
        _DemoItem(Icons.auto_awesome_rounded,    'Sparkle Text', const Color(0xFFE91E63), const SparklePage()),
      ]),
      _Section(title: 'Feedback', items: [
        _DemoItem(Icons.notifications_active_rounded, 'Toasts',    const Color(0xFF4CAF50), const ToastPage()),
        _DemoItem(Icons.chat_bubble_rounded,          'Dialogs',   const Color(0xFFFF7043), const DialogPage()),
        _DemoItem(Icons.warning_amber_rounded,        'Alert',     const Color(0xFFF59E0B), const AlertPage()),
        _DemoItem(Icons.timelapse_rounded,            'Progress',  const Color(0xFF1E88E5), const ProgressPage()),
        _DemoItem(Icons.motion_photos_on_rounded,     'Skeleton',  const Color(0xFF78909C), const SkeletonPage()),
        _DemoItem(Icons.info_outline_rounded,         'Tooltip',   const Color(0xFF455A64), const TooltipPage()),
      ]),
      _Section(title: 'Navigation & Layout', items: [
        _DemoItem(Icons.tab_rounded,                  'Tab Bar',       const Color(0xFF5C6BC0), const TabBarPage()),
        _DemoItem(Icons.navigation_rounded,                   'Bottom Nav',    const Color(0xFF3949AB), const BottomNavPage()),
        _DemoItem(Icons.linear_scale_rounded,         'Stepper',       const Color(0xFF00897B), const StepperPage()),
        _DemoItem(Icons.expand_more_rounded,          'Accordion',     const Color(0xFF00ACC1), const AccordionPage()),
        _DemoItem(Icons.swipe_up_rounded,             'Bottom Sheet',  const Color(0xFF7B1FA2), const BottomSheetPage()),
      ]),
    ];

    return Scaffold(
      appBar: AppBar(
        title: const Text('AuraUI v2.1'),
        centerTitle: true,
        backgroundColor: Colors.white,
        elevation: 0,
      ),
      body: ListView(
        padding: const EdgeInsets.fromLTRB(20, 16, 20, 32),
        children: [
          const Text(
            'Component Explorer',
            style: TextStyle(fontSize: 22, fontWeight: FontWeight.w700),
          ),
          const SizedBox(height: 4),
          Text(
            'Tap a component to see it in action',
            style: TextStyle(fontSize: 14, color: Colors.grey[600]),
          ),
          const SizedBox(height: 24),
          for (final section in sections) ...[
            Text(
              section.title,
              style: const TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.w600,
                letterSpacing: 0.8,
                color: Color(0xFF888888),
              ),
            ),
            const SizedBox(height: 10),
            GridView.builder(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 12,
                mainAxisSpacing: 12,
                childAspectRatio: 1.05,
              ),
              itemCount: section.items.length,
              itemBuilder: (context, i) => _DemoCard(item: section.items[i]),
            ),
            const SizedBox(height: 24),
          ],
        ],
      ),
    );
  }
}

class _Section {
  final String title;
  final List<_DemoItem> items;
  const _Section({required this.title, required this.items});
}

class _DemoItem {
  final IconData icon;
  final String label;
  final Color color;
  final Widget page;
  const _DemoItem(this.icon, this.label, this.color, this.page);
}

class _DemoCard extends StatelessWidget {
  final _DemoItem item;
  // ignore: unused_element_parameter
  const _DemoCard({super.key, required this.item});

  @override
  Widget build(BuildContext context) {
    return InkWell(
      borderRadius: BorderRadius.circular(14),
      onTap: () => Navigator.push(
        context,
        MaterialPageRoute(builder: (_) => item.page),
      ),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(14),
          boxShadow: const [
            BoxShadow(
              color: Color(0x10000000),
              blurRadius: 10,
              offset: Offset(0, 3),
            ),
          ],
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 44,
              height: 44,
              decoration: BoxDecoration(
                color: item.color.withAlpha(24),
                borderRadius: BorderRadius.circular(12),
              ),
              child: Icon(item.icon, color: item.color, size: 22),
            ),
            const SizedBox(height: 8),
            Text(
              item.label,
              style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w600),
              textAlign: TextAlign.center,
              maxLines: 2,
            ),
          ],
        ),
      ),
    );
  }
}