sonner_toast 0.0.1

A customizable, stackable, and animated toast notification system for Flutter, inspired by the Sonner library.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      darkTheme: ThemeData.dark(),
      builder: (context, child) => Stack(
        children: [
          child!,
          SonnerOverlay(
            config: const SonnerConfig(
              maxVisibleToasts: 3,
              width: 350,
              alignment: Alignment.bottomRight,
              innerPadding: EdgeInsets.all(16),
            ),
            key: Sonner.overlayKey,
          ),
        ],
      ),
      home: DemoScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Sonner.toast(
              duration: const Duration(seconds: 4),
              expandWidth: true,
              builder: (context, dismissToast) => BasicToast(
                title: 'Hello, Sonner!',
                message: 'This is a custom toast message.',
                onDismiss: dismissToast,
              ),
            );
          },
          child: const Text('Show Toast'),
        ),
      ),
    );
  }
}

class BasicToast extends StatelessWidget {
  final String title;
  final String message;
  final VoidCallback onDismiss;
  const BasicToast({
    super.key,
    required this.title,
    required this.message,
    required this.onDismiss,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
      decoration: BoxDecoration(
        color: const Color(0xFF383838),
        border: Border.all(color: const Color(0xFF575757)),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Row(
        children: [
          Expanded(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 4),
                Text(message, style: const TextStyle(fontSize: 12)),
              ],
            ),
          ),
          IconButton(
            onPressed: onDismiss,
            icon: const Icon(Icons.close, size: 14),
          ),
        ],
      ),
    );
  }
}