flutter_project_kit 0.0.4

flutter_project_kit: ^0.0.4 copied to clipboard

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_project_kit/project_kit_app.dart';
import 'package:flutter_project_kit/routes/routes.dart';
import 'package:flutter_project_kit/theme/app_theme_model.dart';
import 'package:flutter_project_kit/util/screen_util.dart';
import 'package:flutter_project_kit/widgets/expanded_dropdown/prokit_dropdown.dart';
import 'package:flutter_project_kit/widgets/pro_kit_appbar.dart';
import 'package:flutter_project_kit/widgets/pro_kit_button.dart';
import 'package:flutter_project_kit/widgets/pro_kit_svg.dart';
import 'package:flutter_project_kit/snack_bar/snack_bar.dart';
import 'package:flutter_project_kit/snack_bar/snackbar_enum.dart';
import 'package:flutter_project_kit/widgets/pro_kit_readmore.dart';
import 'package:flutter_project_kit/consumers/theme_consumer.dart';
import 'package:flutter_project_kit/provider/app_theme_provider.dart';
import 'package:flutter_project_kit/theme/app_theme.dart';
import 'package:flutter_project_kit/widgets/pro_kit_text.dart';
void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {


    final customDarkThemeModel = ProKitThemeModel(
      scaffold: Colors.black,
      text: Colors.white,
      appBarBackground: Colors.green,
      button: Colors.red,
      tabBarBackground: Colors.white,
    );

    final customLightThemeModel = ProKitThemeModel(
      scaffold: Colors.white,
      text: Colors.deepOrange,
      appBarBackground: Colors.yellow,
      button: Colors.yellow,
      tabBarBackground: Colors.black,
    );

    return ProKitApp(
      title: "ProKit Example",
      home: const ProKitPackageExample(),
      customDarkTheme: customDarkThemeModel,
      customLightTheme: customLightThemeModel,
      initialThemeMode: ThemeMode.light, /// Start with dark theme
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const ProKitText(
          text: 'ProKit Package Navigation',
          size: 20,
          weight: FontWeight.bold,
        ),
      ),
      body: GridView.count(
        crossAxisCount: 2, // 2 cards per row
        padding: const EdgeInsets.all(16.0),
        children: [
          _buildCard(
            context,
            title: 'ProKit Button Example',
            description: 'Explore various button types and functionalities.',
            screen: const ProKitButtonExampleScreen(),
          ),_buildCard(
            context,
            title: 'AppBar Example',
            description: 'Explore various button types and functionalities.',
            screen: const ProKitAppBarShowcase(),
          ),_buildCard(
            context,
            title: 'Drop Down Example',
            description: 'Explore various button types and functionalities.',
            screen: DropdownExamples(),
          ),
          _buildCard(
            context,
            title: 'SnackBar Demo',
            description: 'See how SnackBars can be used for messages.',
            screen: const SnackBarExample(),
          ),
          _buildCard(
            context,
            title: 'Rich Text Read More',
            description: 'Learn how to use rich text with read more options.',
            screen: const ReadMoreTextExample(),
          ),
          _buildCard(
            context,
            title: 'Theme Screen',
            description: 'Customize your app theme with various options.',
            screen: const ThemeChangeExample(),
          ),
          _buildCard(
            context,
            title: 'Text Example',
            description: 'Explore different text styles and fonts.',
            screen: const ProKitTextExample(),
          ),
          _buildCard(
            context,
            title: 'Navigation Example',
            description: 'Demonstrates how to navigate between screens.',
            screen: const NavigationExample(),
          ),
          _buildCard(
            context,
            title: 'Responsive Home Screen',
            description: 'See how the app adapts to various screen sizes.',
            screen: const ResponsiveNessExample(),
          ),
        ],
      ),
    );
  }

  Widget _buildCard(BuildContext context, {
    required String title,
    required String description,
    required Widget screen,
  }) {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      margin: const EdgeInsets.all(8.0),
      child: InkWell(
        onTap: () {
          ProKitNavigator.push(screen);
        },
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ProKitText(
                text: title,
                size: 18,
                weight: FontWeight.bold,
              ),
              const SizedBox(height: 10),
              ProKitText(
                text: description,
                size: 14,
                color: Colors.grey[600],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ProKit Button Example'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 100.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ProKitButton(
                text: "Click Me",
                onPressed: () {
                  // Do something
                },
                buttonStyle: ProKitButtonStyle.gradient,
                showIcon: false,
                iconAsset: "assets/icons/custom_icon.svg",
                buttonColor: Colors.blue,
                gradient: const LinearGradient(
                  colors: [Colors.red, Colors.orange],
                ),
              ),
              SizedBox(height: 20.h),
              // Example 1: Simple button with text
              ProKitButton(
                text: 'Simple Button',
                buttonColor: Colors.blue,
                textStyle: const TextStyle(color: Colors.blue),
                buttonStyle: ProKitButtonStyle.outlined,
                onPressed: () {
                  print('Simple Button Pressed');
                },
              ),
              SizedBox(height: 20.h),

              /// Example 2: Button with icon
              ProKitButton(
                text: 'Button with Icon',
                buttonColor: Colors.green,


                buttonStyle: ProKitButtonStyle.flat,
                showIcon: true,
                iconAsset: 'assets/icons/sample_icon.svg', // Path to your icon
                iconColor: Colors.white,
                onPressed: () {
                  print('Button with Icon Pressed');
                },
              ),
              const SizedBox(height: 20),

              // Example 3: Button with custom styling
              ProKitButton(
                text: 'Custom Styled Button',
                buttonColor: Colors.red,


                buttonStyle: ProKitButtonStyle.iconButton,
                textStyle: const TextStyle(fontSize: 18, color: Colors.white),
                padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
                borderRadius: BorderRadius.circular(10),
                elevation: 5,
                onPressed: () {
                  print('Custom Styled Button Pressed');
                },
              ),
              const SizedBox(height: 20),

              /// Example 4: Button with custom widget for icon
              ProKitButton(
                text: 'Custom Icon Widget',
                buttonColor: Colors.purple,


                buttonStyle: ProKitButtonStyle.raised,
                showIcon: true,
                customIconWidget: const ProKitSvg(assetName: "assetName"),
                onPressed: () {
                  print('Button with Custom Icon Widget Pressed');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ProKit SnackBar Grid Example'),
      ),
      body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: GridView.count(
            crossAxisCount: MediaQuery.of(context).size.width > 600 ? 3 : 2,
            /// 3 columns for larger screens, 2 for smaller
            childAspectRatio: MediaQuery.of(context).size.width > 600 ? 4 : 2.5,
            /// Adjusts ratio for better text visibility
            crossAxisSpacing: 8.0,
            /// Spacing between columns
            mainAxisSpacing: 8.0,
            /// Spacing between rows
            children: _buildSnackBarGridItems(context),
          )),
    );
  }

  /// Builds the list of Grid Items for displaying SnackBars
  List<Widget> _buildSnackBarGridItems(BuildContext context) {
    return [
      _gridSnackBarItem(
        context: context,
        label: "Show Bordered Success SnackBar",
        onPressed: () => _showSuccessSnackBar(context),
      ),
      _gridSnackBarItem(
        context: context,
        label: "Show Bordered Error SnackBar",
        onPressed: () => _showErrorSnackBar(context),
      ),
      _gridSnackBarItem(
        context: context,
        label: "Show Bordered Warning SnackBar",
        onPressed: () => _showWarningSnackBar(context),
      ),
      _gridSnackBarItem(
        context: context,
        label: "Show Bordered Help SnackBar",
        onPressed: () => _showHelpSnackBar(context),
      ),
      _gridSnackBarItem(
        context: context,
        label: "Show Bordered Custom Size SnackBar",
        onPressed: () => _showCustomSizeSnackBar(context),
      ),
      _gridSnackBarItem(
        context: context,
        label: "Show Bordered Centered SnackBar",
        onPressed: () => _showCenteredSnackBar(context),
      ),
      _gridSnackBarItem(
        context: context,
        label: "Show Colored Success SnackBar",
        onPressed: () => _showColoredSuccessSnackBar(context),
      ),
      _gridSnackBarItem(
        context: context,
        label: "Show Colored Error SnackBar",
        onPressed: () => _showColoredErrorSnackBar(context),
      ),
      _gridSnackBarItem(
        context: context,
        label: "Show Colored Warning SnackBar",
        onPressed: () => _showColoredWarningSnackBar(context),
      ),
      _gridSnackBarItem(
        context: context,
        label: "Show Colored Help SnackBar",
        onPressed: () => _showColoredHelpSnackBar(context),
      ),
    ];
  }

  /// Helper method to create a Grid item for each SnackBar
  Widget _gridSnackBarItem({
    required BuildContext context,
    required String label,
    required VoidCallback onPressed,
  }) {
    return GestureDetector(
      onTap: onPressed,
      child: Container(
        padding: const EdgeInsets.all(12.0),
        decoration: BoxDecoration(
          color: Colors.blueGrey[50], // Background color
          borderRadius: BorderRadius.circular(8.0), // Rounded corners
          border: Border.all(color: Colors.blueAccent), // Border style
        ),
        child: Center(
          child: Text(
            label,
            textAlign: TextAlign.center,
            style: const TextStyle(fontSize: 14.0, fontWeight: FontWeight.w600),
          ),
        ),
      ),
    );
  }

  /// Displays a bordered success SnackBar
  void _showSuccessSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "Success",
      message: "Operation completed successfully.",
      snackBarType: ProKitSnackBarType.bordered,
      notificationType: ProKitNotificationType.success,
    );
  }

  /// Displays a bordered error SnackBar
  void _showErrorSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "Error",
      message: "Something went wrong.",
      snackBarType: ProKitSnackBarType.bordered,
      notificationType: ProKitNotificationType.failure,
      snackBarPosition: ProKitSnackBarPosition.topRight,
    );
  }

  /// Displays a bordered warning SnackBar
  void _showWarningSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "Warning",
      message: "This is a warning message.",
      snackBarType: ProKitSnackBarType.bordered,
      notificationType: ProKitNotificationType.warning,
      color: Colors.deepOrange,
      autoCloseDuration: const Duration(seconds: 5),
    );
  }

  /// Displays a bordered help SnackBar
  void _showHelpSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "Help",
      message: "Need help with something?",
      snackBarType: ProKitSnackBarType.bordered,
      notificationType: ProKitNotificationType.help,
      customIcon: const Icon(Icons.help_outline, color: Colors.blue),
      titleTextStyle: const TextStyle(
        fontSize: 18,
        fontWeight: FontWeight.bold,
        color: Colors.blue,
      ),
      messageTextStyle: const TextStyle(
        fontSize: 14,
        color: Colors.blue,
      ),
    );
  }

  /// Displays a bordered custom size SnackBar
  void _showCustomSizeSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "Custom Size",
      message: "This SnackBar has a custom width and height.",
      snackBarType: ProKitSnackBarType.bordered,
      notificationType: ProKitNotificationType.success,
      width: 300,
      height: 100,
    );
  }

  /// Displays a bordered centered SnackBar
  void _showCenteredSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "Centered SnackBar",
      message: "This SnackBar is displayed in the center of the screen.",
      snackBarType: ProKitSnackBarType.bordered,
      notificationType: ProKitNotificationType.help,
      autoClose: false,
      snackBarPosition: ProKitSnackBarPosition.center,
    );
  }

  /// Displays a colored success SnackBar
  void _showColoredSuccessSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "Success",
      message: "Operation completed successfully.",
      snackBarType: ProKitSnackBarType.colored,
      notificationType: ProKitNotificationType.success,
    );
  }

  /// Displays a colored error SnackBar
  void _showColoredErrorSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "Error",
      message: "Something went wrong.",
      snackBarType: ProKitSnackBarType.colored,
      notificationType: ProKitNotificationType.failure,
      snackBarPosition: ProKitSnackBarPosition.topRight,
    );
  }

  /// Displays a colored warning SnackBar
  void _showColoredWarningSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "Warning",
      message: "This is a warning message.",
      snackBarType: ProKitSnackBarType.colored,
      notificationType: ProKitNotificationType.warning,
      color: Colors.deepOrange,
      autoCloseDuration: const Duration(seconds: 5),
    );
  }

  /// Displays a colored help SnackBar
  void _showColoredHelpSnackBar(BuildContext context) {
    showProKitSnackBar(
      context,
      title: "Help",
      message: "Need help with something?",
      snackBarType: ProKitSnackBarType.colored,
      notificationType: ProKitNotificationType.help,
      customIcon: const Icon(Icons.help_outline, color: Colors.white),
      titleTextStyle: const TextStyle(
        fontSize: 18,
        fontWeight: FontWeight.bold,
        color: Colors.white,
      ),
      messageTextStyle: const TextStyle(
        fontSize: 14,
        color: Colors.white70,
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    const sampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.';

    return Scaffold(
      appBar: AppBar(
        title: const Text('ProKit ReadMore Example'),
      ),
      body: SingleChildScrollView(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Basic usage with minimal required options
              const ProKitRichTextReadMore(
                text: "This is a short example text to demonstrate the Read More functionality.",
                maxChars: 20,
              ),

              // Customizing the TextStyle, alignment, and overflow
              const ProKitRichTextReadMore(
                text: "This is a slightly longer example text to demonstrate the alignment and overflow properties in the widget.",
                maxChars: 40,
                textStyle: TextStyle(fontSize: 16, color: Colors.black),
                align: TextAlign.justify,
                overflow: TextOverflow.ellipsis,
              ),

              // Customizing the "Read More" and "Show Less" texts
              const ProKitRichTextReadMore(
                text: "Here, we are using custom texts for 'Read More' and 'Show Less'. The widget now displays 'Show More' instead of 'Read More'.",
                maxChars: 50,
                readMoreText: "Show More",
                showLessText: "Hide",
              ),

              // Customizing colors for "Read More" and "Show Less"
              const ProKitRichTextReadMore(
                text: "This example demonstrates how you can customize the color of the 'Read More' and 'Show Less' texts to match your app theme.",
                maxChars: 30,
                readMoreColor: Colors.orange,
                showLessColor: Colors.purple,
              ),

              // Controlling underlining for "Read More" and "Show Less"
              const ProKitRichTextReadMore(
                text: "Control whether the 'Read More' and 'Show Less' texts are underlined or not using the underlineReadMore and underlineShowLess properties.",
                maxChars: 60,
                underlineReadMore: false,  // No underline for "Read More"
                underlineShowLess: true,   // Underline for "Show Less"
              ),

              // Adding custom tap functionality
              ProKitRichTextReadMore(
                text: "This example includes a custom action when 'Read More' or 'Show Less' is clicked. You can provide any functionality you'd like.",
                maxChars: 50,
                onTap: () {
                  print("Custom tap action triggered!");
                },
              ),
            ],
          )

      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ProKitTheme.cT.scaffold,
      appBar: AppBar(
        title: const Text('ProKit Theme Change Example'),
      ),
      body: ProKitThemeConsumer(
        builder: (context, themeMode) {
          bool isDark = themeMode == ThemeMode.dark;

          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "Current Theme: ${isDark ? "Dark" : "Light"}",
                  style: TextStyle(color: isDark ? Colors.white : Colors.black),
                ),
                ElevatedButton(
                  onPressed: () {
                    ProKitThemeProvider.state(context).setTheme(
                      theme: isDark ? ThemeMode.light : ThemeMode.dark,
                    );
                  },
                  child: const Text("Change Theme"),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ProKitText Usage Examples'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 1. Simple Text
              const ProKitText(
                text: "Simple Text Example",
                size: 18,
                weight: FontWeight.bold,
                color: Colors.black,
              ),

              const SizedBox(height: 20),

              // 2. Underlined Text
              const ProKitText(
                text: "Underlined Text Example",
                isUnderlined: true,
                color: Colors.red,
                size: 16,
              ),

              const SizedBox(height: 20),

              ///
              ProKitText(
                textSpans: [
                  const ProKitTextSpan(
                    text: "This is a ",
                    style: TextStyle(color: Colors.black),
                  ),
                  ProKitTextSpan(
                    text: "clickable ",
                    style: const TextStyle(
                      color: Colors.blue,
                      decoration: TextDecoration.underline,
                    ),
                    onTap: () {
                      print("Clickable text segment clicked!");
                    },
                  ),
                  const ProKitTextSpan(
                    text: "segment in RichText.",
                    style: TextStyle(color: Colors.black),
                  ),
                ],
              ),

              const SizedBox(height: 20),

              ///
              const ProKitText(
                text: "Selectable Text Example: You can select this text!",
                selectable: true,
                size: 14,
                weight: FontWeight.w400,
                color: Colors.green,
              ),

              const SizedBox(height: 20),

              ///
              ProKitText(
                textSpans: [
                  const ProKitTextSpan(
                    text: "Explore ",
                    style: TextStyle(fontSize: 16, color: Colors.black),
                  ),
                  const ProKitTextSpan(
                    text: "Flutter ",
                    style: TextStyle(
                      color: Colors.orange,
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const ProKitTextSpan(
                    text: "with ",
                    style: TextStyle(fontSize: 16, color: Colors.black),
                  ),
                  ProKitTextSpan(
                    text: "ProKitText",
                    style: const TextStyle(
                      color: Colors.blue,
                      decoration: TextDecoration.underline,
                      fontSize: 16,
                    ),
                    onTap: () {
                      print("Flutter ProKitText clicked!");
                    },
                  ),
                  const ProKitTextSpan(
                    text: " for flexible and rich text styling!",
                    style: TextStyle(fontSize: 16, color: Colors.black),
                  ),
                ],
              ),

              const SizedBox(height: 20),

              /// 6. Custom TextStyle with Letter Spacing and Font Family
              const ProKitText(
                text: "Custom Font Family and Letter Spacing",
                size: 20,
                weight: FontWeight.w500,
                family: 'Roboto',
                letterSpacing: 2.0,
                color: Colors.purple,
              ),

              const SizedBox(height: 20),

              // 7. Handling Long Text Overflow
              const ProKitText(
                text: "This is a very long text example that should overflow properly if the text exceeds the maximum lines set for this widget.",
                size: 16,
                color: Colors.black87,
                overflow: TextOverflow.ellipsis,
                lines: 2, // Limits to 2 lines with ellipsis for overflow
              ),

              const SizedBox(height: 20),

              // 8. Text with Custom Decoration
              const ProKitText(
                text: "Strikethrough Text Example",
                textStyle: TextStyle(
                  fontSize: 16,
                  color: Colors.red,
                  decoration: TextDecoration.lineThrough,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ProKit Navigation Example'),
      ),
      body: Column(
        children: [
          ProKitButton(
            text: 'Navigation Example 1',
            buttonColor: Colors.purple,
            showIcon: true,
            onPressed: () {
              ProKitNavigator.push(const SnackBarExample(), animationType: NavigateAnimType.rightToLeft);
            },
          ),
          ProKitButton(
            text: 'Navigation Example 2',
            buttonColor: Colors.purple,
            showIcon: true,
            onPressed: () {
              ProKitNavigator.pushReplacement(const SnackBarExample(), animationType: NavigateAnimType.topToBottom);
            },
          ),
          ProKitButton(
            text: 'Navigation Example 3',
            buttonColor: Colors.purple,
            showIcon: true,
            onPressed: () {
              ProKitNavigator.pushAndRemoveUntil(const SnackBarExample(), animationType: NavigateAnimType.bottomToTop);
            },
          ),
          ProKitButton(
            text: 'Pop Example with return Data',
            buttonColor: Colors.purple,
            showIcon: true,
            onPressed: () {
              ProKitNavigator.pop('Data from Third Screen');
            },
          ),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    /// Initialize SizeConfig to get screen dimensions
    SizeConfig.init(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Responsive Design Example'),
      ),
      body: const ProKitResponsive(
        mobile: MobileView(),
        tablet: TabletView(),
        desktop: DesktopView(),
        largeMobile: LargeMobileView(),
        extraLargeScreen: ExtraLargeView(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 80.w, // 80% of the screen width
        height: 30.h, // 30% of the screen height
        color: Colors.blue,
        child: const Center(child: Text('Mobile View', style: TextStyle(color: Colors.white))),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 60.w, // 60% of the screen width
        height: 40.h, // 40% of the screen height
        color: Colors.green,
        child: const Center(child: Text('Tablet View', style: TextStyle(color: Colors.white))),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 50.w, /// 50% of the screen width
        height: 50.h, /// 50% of the screen height
        color: Colors.orange,
        child: const Center(child: Text('Desktop View', style: TextStyle(color: Colors.white))),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 70.w, // 70% of the screen width
        height: 35.h, // 35% of the screen height
        color: Colors.purple,
        child: const Center(child: Text('Large Mobile View', style: TextStyle(color: Colors.white))),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 50.w, /// 50% of the screen width
        height: 50.h, /// 50% of the screen height
        color: Colors.red,
        child: const Center(child: Text('Extra Large View', style: TextStyle(color: Colors.white))),
      ),
    );
  }
}
/// Example class showcasing Expandable Dropdown variations
class DropdownExamples extends StatelessWidget {
  DropdownExamples({super.key});

  final List<String> _items = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'];
  String? _selectedValue;
  List<String> _selectedValues = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const ProKitAppBar(
              showBackButton: true,
              heading: 'Dropdown Examples',
            ),
            // Basic Single Select Dropdown
            const Text('Basic Single Select', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            const SizedBox(height: 16),
            ProKitDropDown<String>(
              items: _items,
              hint: 'Select an option',
              selectedValue: _selectedValue,
              itemAsString: (item) => item,
              onChanged: (value) {
                _selectedValue = value;
              },
            ),
            const SizedBox(height: 24),

            // Multi Select Dropdown
            const Text('Multi Select Dropdown', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            const SizedBox(height: 16),
            ProKitDropDown<String>(
              items: _items,
              hint: 'Select multiple options',
              selectedValues: _selectedValues,
              isMultiSelect: true,
              itemAsString: (item) => item,
              onMultiChanged: (values) {
                _selectedValues = values;
              },
            ),
            const SizedBox(height: 24),

            // Custom Styled Dropdown
            const Text('Custom Styled Dropdown', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            const SizedBox(height: 16),
            ProKitDropDown<String>(
              items: _items,
              hint: 'Custom styled dropdown',
              selectedValue: _selectedValue,
              itemAsString: (item) => item,
              onChanged: (value) {
                _selectedValue = value;
              },
              borderColor: Colors.purple,
              backgroundColor: Colors.purple.shade50,
              itemTextColor: Colors.purple,
              width: 200,
              height: 60,
              textSize: 16,
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      body: SingleChildScrollView(
        child: Column(
          children: [
            // Basic AppBar with just title
            const ProKitAppBar(
              heading: "Basic Header",
            ),

            // AppBar with subtitle
            const ProKitAppBar(
              heading: "Header with Subtitle",
              subtitle: "This is a subtitle explaining more",
            ),

            // AppBar with trailing icon
            const ProKitAppBar(
              heading: "Trailing Icon",
              trailingIcon: Icons.notifications_none_outlined,
              trailingIconColor: Colors.deepPurple,
            ),

            // AppBar with trailing button
            ProKitAppBar(
              heading: "With Action Button",
              buttonLabel: "Save",
              onTrailingPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Save tapped')),
                );
              },
            ),

            // AppBar with trailing custom widget (e.g. avatar)
            const ProKitAppBar(
              heading: "Custom Widget",
              subtitle: "With user avatar on right",
              trailingWidget: CircleAvatar(
                radius: 18,
                backgroundColor: Colors.orange,
                child: Text(
                  "AB",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),

            // AppBar without back button
            const ProKitAppBar(
              heading: "No Back Button",
              subtitle: "Trailing icon, no back",
              trailingIcon: Icons.settings,
              showBackButton: false,
            ),

            // AppBar with custom back icon and action
            ProKitAppBar(
              heading: "Custom Back",
              subtitle: "Back action override",
              onBackPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Back pressed')),
                );
              },
              backIcon: Icons.arrow_back,
              backIconColor: Colors.red,
              backButtonBackground: Colors.red.shade50,
              trailingIcon: Icons.info_outline,
            ),

            // Fully styled AppBar
            ProKitAppBar(
              heading: "Styled Header",
              subtitle: "Custom fonts, colors, shadow",
              headingTextStyle: const TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.w700,
                color: Colors.teal,
              ),
              subtitleTextStyle: const TextStyle(
                fontSize: 14,
                color: Colors.tealAccent,
              ),
              trailingIcon: Icons.star_border,
              trailingIconColor: Colors.teal,
              backgroundColor: Colors.white,
              borderRadius: 16,
              boxShadowBlur: 16,
              shadowColor: Colors.teal.shade100,
            ),
          ],
        ),
      ),
    );
  }
}