Toast

In ProgressDark modeRTL

A temporary notification popup.

7:21

✓

Event created

Something went wrong

⚠

Storage almost full

●

Event has been created

Undo

●

Scheduled

Friday, Jan 24 at 9:00 AM

●

Your message was sent

Installation

Copy the component into your project using the CLI:

$ronakcn add toast

Usage

Import and use the component in your Flutter widget tree:

lib/pages/example.dart

import 'package:flutter/material.dart';
import '../components/toast/toast.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('RcnToast Example')),
      body: Center(
        child: RcnToast(
          // Configure props here
        ),
      ),
    );
  }
}

Variants

Toast ships with the following variants:

default

A neutral informational toast.

7:21

●

Your message was sent

success

A green success toast.

7:21

✓

Event created

error

A red error toast.

7:21

Something went wrong

warning

An amber warning toast.

7:21

⚠

Storage almost full

with-action

Toast with an action button.

7:21

●

Event has been created

Undo

with-description

Toast with a longer description.

7:21

●

Scheduled

Friday, Jan 24 at 9:00 AM

Props

Prop	Type	Default	Description
`title`*	`String`	—	Short notification message.
`description`	`String?`	`null`	Additional detail text.
`variant`	`ToastVariant`	`ToastVariant.defaultVariant`	Visual style.
`action`	`Widget?`	`null`	Optional action button.
`duration`	`Duration`	`Duration(seconds: 4)`	How long the toast shows.

Source files

lib/components/ui/toast.dart

import 'package:flutter/material.dart';

enum ToastVariant { defaultVariant, success, error, warning, info }

class RcnToast {
  static void show(BuildContext context, {
    required String title,
    String? description,
    ToastVariant variant = ToastVariant.defaultVariant,
    Widget? action,
    Duration duration = const Duration(seconds: 4),
  }) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(title, style: const TextStyle(fontWeight: FontWeight.w600)),
            if (description != null) Text(description, style: const TextStyle(fontSize: 12)),
          ],
        ),
        action: action != null ? SnackBarAction(label: '', onPressed: () {}) : null,
        duration: duration,
        behavior: SnackBarBehavior.floating,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      ),
    );
  }
}

Version 0.1.0 · feedback category