astra_ui 0.1.0

A beautiful modern Flutter UI component library with 37+ components. Includes buttons inputs chips avatars tabs and more. Inspired by shadcn/ui.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:astra_ui/astra_ui.dart';
import 'package:device_preview/device_preview.dart';
import 'tabs/buttons_tab.dart';
import 'tabs/inputs_tab.dart';
import 'tabs/controls_tab.dart';
import 'tabs/dropdowns_tab.dart';
import 'tabs/tabs_showcase_tab.dart';
import 'tabs/chips_tab.dart';
import 'tabs/avatars_tab.dart';

void main() {
  runApp(
    DevicePreview(
      enabled: true,
      defaultDevice: Devices.android.samsungGalaxyNote20Ultra,
      devices: [
        // iOS Devices
        Devices.ios.iPhone13,
        Devices.ios.iPhone13ProMax,
        Devices.ios.iPhone13Mini,
        Devices.ios.iPhoneSE,
        Devices.ios.iPad,
        Devices.ios.iPadPro11Inches,

        // Android Devices
        Devices.android.samsungGalaxyS20,
        Devices.android.samsungGalaxyNote20,
        Devices.android.samsungGalaxyNote20Ultra,
        Devices.android.samsungGalaxyA50,
        Devices.android.onePlus8Pro,
        Devices.android.sonyXperia1II,
        Devices.android.smallPhone,
        Devices.android.mediumPhone,
        Devices.android.mediumTablet,

        // Desktop
        Devices.windows.laptop,
        Devices.macOS.macBookPro,
      ],
      builder: (context) => const AstraUIExampleApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AstraUI Canvas',
      debugShowCheckedModeBanner: false,
      locale: DevicePreview.locale(context),
      builder: DevicePreview.appBuilder,
      theme: ThemeData(
        scaffoldBackgroundColor: AstraColors.offWhite,
        useMaterial3: true,
      ),
      home: const AstraCanvas(),
    );
  }
}

class AstraCanvas extends StatefulWidget {
  const AstraCanvas({super.key});

  @override
  State<AstraCanvas> createState() => _AstraCanvasState();
}

class _AstraCanvasState extends State<AstraCanvas> {
  int selectedTab = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AstraColors.offWhite,
      appBar: AppBar(
        title: const Text(
          'AstraUI Canvas',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
            color: AstraColors.warmGray,
          ),
        ),
        backgroundColor: Colors.white,
        elevation: 0,
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(1),
          child: Container(height: 1, color: AstraColors.lightGray),
        ),
      ),
      body: Column(
        children: [
          // Main Navigation Tabs
          Container(
            color: Colors.white,
            padding: const EdgeInsets.all(16),
            child: AstraLineTabs(
              selectedIndex: selectedTab,
              tabs: const [
                AstraLineTabItem(label: 'Buttons', icon: Icons.touch_app),
                AstraLineTabItem(label: 'Inputs', icon: Icons.edit_outlined),
                AstraLineTabItem(label: 'Controls', icon: Icons.tune),
                AstraLineTabItem(
                  label: 'Dropdowns',
                  icon: Icons.arrow_drop_down,
                ),
                AstraLineTabItem(label: 'Tabs', icon: Icons.tab),
                AstraLineTabItem(label: 'Chips', icon: Icons.label),
                AstraLineTabItem(label: 'Avatars', icon: Icons.account_circle),
              ],
              onTabChanged: (index) {
                setState(() {
                  selectedTab = index;
                });
              },
            ),
          ),

          // Content
          Expanded(child: _buildTabContent()),
        ],
      ),
    );
  }

  Widget _buildTabContent() {
    switch (selectedTab) {
      case 0:
        return const ButtonsTab();
      case 1:
        return const InputsTab();
      case 2:
        return const ControlsTab();
      case 3:
        return const DropdownsTab();
      case 4:
        return const TabsShowcaseTab();
      case 5:
        return const ChipsTab();
      case 6:
        return const AvatarsTab();
      default:
        return const SizedBox();
    }
  }
}