premium_ui_kit 0.1.5

A comprehensive collection of premium, highly customizable, and theme-aware common Flutter widgets including text fields, pickers, dropdowns, and more.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:sizer/sizer.dart';
import 'package:responsive_framework/responsive_framework.dart';
import 'package:premium_ui_kit/premium_ui_kit.dart';
// ignore: implementation_imports
import 'package:premium_ui_kit/src/preview/widget_preview_screen.dart';

void main() {
  // Initialize the widget library configuration (optionally customize settings here)
  CommonWidgetsConfig.initialize(
    theme: const CommonWidgetsTheme(
      // Customize global colors/radius if desired, or let it fall back to standard defaults
      primaryColor: AppColors.primary,
      accentColor: AppColors.accent,
      fontFamily:
          'Poppins', // Poppins font is loaded as our primary aesthetic typography
    ),
  );

  runApp(
    // Riverpod root wrapper
    const ProviderScope(child: MyApp()),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<CommonWidgetsTheme>(
      valueListenable: CommonWidgetsConfig.themeNotifier,
      builder: (context, theme, child) {
        final isDark = theme.backgroundColor != Colors.white;

        return Sizer(
          builder: (context, orientation, deviceType) {
            return MaterialApp(
              title: 'Common Widgets Showcase',
              debugShowCheckedModeBanner: false,
              theme: ThemeData(
                useMaterial3: true,
                scaffoldBackgroundColor: isDark
                    ? const Color(0xFF0F172A)
                    : AppColors.scaffoldBackground,
                colorScheme: ColorScheme.fromSeed(
                  brightness: isDark ? Brightness.dark : Brightness.light,
                  seedColor: theme.primaryColor,
                  primary: theme.primaryColor,
                ),
              ),
              builder: (context, child) => ResponsiveBreakpoints.builder(
                child: child!,
                breakpoints: [
                  const Breakpoint(start: 0, end: 450, name: MOBILE),
                  const Breakpoint(start: 451, end: 800, name: TABLET),
                  const Breakpoint(start: 801, end: 1920, name: DESKTOP),
                ],
              ),
              home: const WidgetPreviewScreen(),
            );
          },
        );
      },
    );
  }
}