cherry_toast_msgs 1.2.1

cherry_toast_msgs: ^1.2.1 copied to clipboard

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:cherry_toast_msgs/cherry_toast_msgs.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cherry Toast Messages Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Cherry Toast Messages'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Text(
              'Cherry Toast Messages Demo',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 20),

            // Success Toast Button
            ElevatedButton.icon(
              onPressed: () {
                CherryToastMsgs.showSuccessToast(
                  context: context,
                  title: "Success!",
                  description: "Your action was completed successfully.",
                );
              },
              icon: const Icon(Icons.check_circle, color: Colors.green),
              label: const Text('Show Success Toast'),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.green.shade50,
                foregroundColor: Colors.green.shade700,
              ),
            ),
            const SizedBox(height: 12),

            // Error Toast Button
            ElevatedButton.icon(
              onPressed: () {
                CherryToastMsgs.showErrorToast(
                  context,
                  "Error!",
                  "Something went wrong. Please try again.",
                );
              },
              icon: const Icon(Icons.error, color: Colors.red),
              label: const Text('Show Error Toast'),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.red.shade50,
                foregroundColor: Colors.red.shade700,
              ),
            ),
            const SizedBox(height: 12),

            // Warning Toast Button
            ElevatedButton.icon(
              onPressed: () {
                CherryToastMsgs.showWarningToast(
                  context,
                  "Warning!",
                  "Please check your input before proceeding.",
                );
              },
              icon: const Icon(Icons.warning, color: Colors.orange),
              label: const Text('Show Warning Toast'),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.orange.shade50,
                foregroundColor: Colors.orange.shade700,
              ),
            ),
            const SizedBox(height: 12),

            // Info Toast Button
            ElevatedButton.icon(
              onPressed: () {
                CherryToastMsgs.showInfoToast(
                  context,
                  "Information",
                  "Here's some useful information for you.",
                );
              },
              icon: const Icon(Icons.info, color: Colors.blue),
              label: const Text('Show Info Toast'),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.blue.shade50,
                foregroundColor: Colors.blue.shade700,
              ),
            ),
            const SizedBox(height: 12),

            // Custom Toast Button
            ElevatedButton.icon(
              onPressed: () {
                CherryToastMsgs.showAnimatedToast(
                  context: context,
                  title: "Custom Toast",
                  description:
                      "This is a custom toast with purple theme and custom size",
                  icon: Icons.star,
                  iconColor: Colors.white,
                  iconBackground: Colors.purple,
                  backgroundColor: Colors.purple.shade50,
                  borderColor: Colors.purple.shade200,
                  titleStyle: const TextStyle(
                    color: Colors.purple,
                    fontWeight: FontWeight.bold,
                    fontSize: 18,
                  ),
                  descriptionStyle: TextStyle(
                    color: Colors.purple.shade600,
                    fontSize: 16,
                  ),
                  borderRadius: 16,
                  borderWidth: 2,
                  duration: const Duration(seconds: 5),
                  elevation: 12,
                  width: 300,
                  height: 130, // Increased height to accommodate content
                );
              },
              icon: const Icon(Icons.star, color: Colors.purple),
              label: const Text('Show Custom Toast'),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.purple.shade50,
                foregroundColor: Colors.purple.shade700,
              ),
            ),
            const SizedBox(height: 12),

            // Custom Size Toast Button
            ElevatedButton.icon(
              onPressed: () {
                CherryToastMsgs.showAnimatedToast(
                  context: context,
                  title: "Wide Toast",
                  description: "This toast has a custom width and height",
                  icon: Icons.aspect_ratio,
                  iconColor: Colors.white,
                  iconBackground: Colors.teal,
                  backgroundColor: Colors.teal.shade50,
                  borderColor: Colors.teal.shade200,
                  width: 400,
                  height: 140, // Increased height to accommodate content
                );
              },
              icon: const Icon(Icons.aspect_ratio, color: Colors.teal),
              label: const Text('Show Custom Size Toast'),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.teal.shade50,
                foregroundColor: Colors.teal.shade700,
              ),
            ),
            const SizedBox(height: 12),

            // Positioned Toast Examples Section
            const SizedBox(height: 20),
            const Text(
              'Positioned Toast Examples',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 16),

            // Center Position Toast Button
            ElevatedButton.icon(
              onPressed: () {
                CherryToastMsgs.showInfoToast(
                  context,
                  "Center Toast",
                  "This toast appears in the center of the screen",
                  position: ToastPosition.center,
                );
              },
              icon: const Icon(Icons.center_focus_strong, color: Colors.indigo),
              label: const Text('Show Center Toast'),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.indigo.shade50,
                foregroundColor: Colors.indigo.shade700,
              ),
            ),
            const SizedBox(height: 12),

            // Custom Position Toast Button
            ElevatedButton.icon(
              onPressed: () {
                CherryToastMsgs.showWarningToast(
                  context,
                  "Custom Position",
                  "This toast appears with custom offset from top",
                  position: ToastPosition.custom,
                  topOffset: 150.0,
                );
              },
              icon: const Icon(Icons.gps_fixed, color: Colors.amber),
              label: const Text('Show Custom Position Toast'),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.amber.shade50,
                foregroundColor: Colors.amber.shade700,
              ),
            ),
            const SizedBox(height: 12),

            // Bottom Position with Offset Toast Button
            ElevatedButton.icon(
              onPressed: () {
                CherryToastMsgs.showAnimatedToast(
                  context: context,
                  title: "Bottom Toast",
                  descriptionStyle: const TextStyle(
                    color: Colors.deepOrange,
                    fontSize: 14,
                  ),
                  height: 120, // Increased height for better visibility
                  description:
                      "This toast appears at bottom with custom offset",
                  icon: Icons.keyboard_arrow_down,
                  iconColor: Colors.white,
                  iconBackground: Colors.deepOrange,
                  backgroundColor: Colors.deepOrange.shade50,
                  borderColor: Colors.deepOrange.shade200,
                  position: ToastPosition.bottom,
                  bottomOffset: 80.0,
                );
              },
              icon: const Icon(
                Icons.keyboard_arrow_down,
                color: Colors.deepOrange,
              ),
              label: const Text('Show Bottom Toast with Offset'),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.deepOrange.shade50,
                foregroundColor: Colors.deepOrange.shade700,
              ),
            ),
            const SizedBox(height: 30),

            // Static Info Container Section
            const Text(
              'Static Info Containers',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 16),

            // Default Static Info Container
            StaticeInfoContainer(
              message:
                  "This is a default static information container with blue theme",
            ),
            const SizedBox(height: 12),

            // Custom Static Info Container
            StaticeInfoContainer(
              message: "This is a custom static container with green theme",
              icon: Icons.check_circle,
              backgroundColor: Colors.green.shade50,
              borderColor: Colors.green.shade200,
              iconColor: Colors.green.shade600,
              textColor: Colors.green.shade700,
            ),
            const SizedBox(height: 12),

            // Warning Static Info Container
            StaticeInfoContainer(
              message: "This is a warning static container with orange theme",
              icon: Icons.warning,
              backgroundColor: Colors.orange.shade50,
              borderColor: Colors.orange.shade200,
              iconColor: Colors.orange.shade600,
              textColor: Colors.orange.shade700,
            ),
            const SizedBox(height: 12),

            // Error Static Info Container
            StaticeInfoContainer(
              message: "This is an error static container with red theme",
              icon: Icons.error,
              backgroundColor: Colors.red.shade50,
              borderColor: Colors.red.shade200,
              iconColor: Colors.red.shade600,
              textColor: Colors.red.shade700,
            ),
            const SizedBox(height: 12),

            // Custom Size Static Info Container
            StaticeInfoContainer(
              message:
                  "This is a custom sized static container with fixed width and height",
              icon: Icons.aspect_ratio,
              backgroundColor: Colors.indigo.shade50,
              borderColor: Colors.indigo.shade200,
              iconColor: Colors.indigo.shade600,
              textColor: Colors.indigo.shade700,
              width: 350,
              height: 80,
            ),
            const SizedBox(height: 12),

            // Wide Static Info Container
            StaticeInfoContainer(
              message:
                  "This is a wide static container that spans most of the screen width",
              icon: Icons.straighten,
              backgroundColor: Colors.orange.shade50,
              borderColor: Colors.orange.shade200,
              iconColor: Colors.orange.shade600,
              textColor: Colors.orange.shade700,
              width: 400,
            ),
            const SizedBox(height: 30),

            // Device Info Display
            Container(
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.grey.shade100,
                borderRadius: BorderRadius.circular(8),
                border: Border.all(color: Colors.grey.shade300),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    'Screen Information:',
                    style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 8),
                  Builder(
                    builder: (context) {
                      final size = MediaQuery.of(context).size;
                      return Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'Screen Width: ${size.width.toStringAsFixed(0)}',
                          ),
                          Text(
                            'Screen Height: ${size.height.toStringAsFixed(0)}',
                          ),
                          Text(
                            'Device Type: ${size.width > 600 ? 'tablet' : 'mobile'}',
                          ),
                          Text(
                            'Orientation: ${size.width > size.height ? 'landscape' : 'portrait'}',
                          ),
                        ],
                      );
                    },
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}