Flutter Snackbar: Show Temporary Messages with Style

<div style="text-align: center;"> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDMwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPCEtLSBTbmFja2JhciBleGFtcGxlIC0tPgogIDxyZWN0IHdpZHRoPSIzMDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjRkZGIiBzdHJva2U9IiMwMDAiLz4KICA8dGV4dCB4PSIxNTAiIHk9IjEwMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMjEyMTIxIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5TbmFja2JhcjwvdGV4dD4KPC9zdmc+" alt="Snackbar Example" width="300" /> </div>

Snackbars are temporary messages that appear at the bottom of the screen to provide feedback about an operation. This guide will show you how to implement and customize Snackbars in Flutter.

Basic Snackbar Implementation

1. Simple Snackbar

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Simple Snackbar')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(
                content: Text('This is a simple Snackbar'),
              ),
            );
          },
          child: const Text('Show Snackbar'),
        ),
      ),
    );
  }
}

2. Snackbar with Action

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Snackbar with Action')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: const Text('Message deleted'),
                action: SnackBarAction(
                  label: 'Undo',
                  onPressed: () {
                    // Handle undo action
                  },
                ),
              ),
            );
          },
          child: const Text('Show Snackbar with Action'),
        ),
      ),
    );
  }
}

Advanced Snackbar Features

1. Custom Styled Snackbar

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Custom Styled Snackbar')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: const Text('Custom styled Snackbar'),
                backgroundColor: Colors.blue,
                behavior: SnackBarBehavior.floating,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
                margin: const EdgeInsets.all(10),
                padding: const EdgeInsets.symmetric(
                  horizontal: 20,
                  vertical: 10,
                ),
              ),
            );
          },
          child: const Text('Show Custom Snackbar'),
        ),
      ),
    );
  }
}

2. Snackbar with Duration

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Snackbar with Duration')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(
                content: Text('This Snackbar will show for 5 seconds'),
                duration: Duration(seconds: 5),
              ),
            );
          },
          child: const Text('Show Snackbar with Duration'),
        ),
      ),
    );
  }
}

3. Snackbar with Icon

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Snackbar with Icon')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Row(
                  children: const [
                    Icon(Icons.check_circle, color: Colors.white),
                    SizedBox(width: 8),
                    Text('Operation completed successfully'),
                  ],
                ),
              ),
            );
          },
          child: const Text('Show Snackbar with Icon'),
        ),
      ),
    );
  }
}

Best Practices

1. Content Guidelines

   • Keep messages concise
   • Use clear language
   • Include actions when appropriate
   • Consider accessibility

2. Timing and Duration

   • Use appropriate duration
   • Consider user reading time
   • Handle multiple Snackbars
   • Clear previous Snackbars when needed

3. Styling

   • Follow material design guidelines
   • Use consistent styling
   • Consider dark/light theme
   • Ensure readability

4. User Experience

   • Don't block important UI elements
   • Provide undo actions when possible
   • Handle edge cases
   • Test on different screen sizes

Common Issues and Solutions

1. Multiple Snackbars

   // Clear previous Snackbar before showing new one
   ScaffoldMessenger.of(context).hideCurrentSnackBar();
   ScaffoldMessenger.of(context).showSnackBar(
     const SnackBar(content: Text('New message')),
   );

2. Custom Positioning

   SnackBar(
     content: const Text('Custom positioned Snackbar'),
     behavior: SnackBarBehavior.floating,
     margin: const EdgeInsets.all(10),
   )

3. Error Handling

   try {
     // Operation that might fail
   } catch (e) {
     ScaffoldMessenger.of(context).showSnackBar(
       SnackBar(
         content: Text('Error: ${e.toString()}'),
         backgroundColor: Colors.red,
       ),
     );
   }

Conclusion

Snackbars are a powerful tool for providing user feedback in Flutter applications. Remember to:

• Keep messages clear and concise
• Use appropriate styling
• Consider user experience
• Handle edge cases

Happy coding!