ModernSnackbar elevates your user experience by providing sleek, customizable snack bars that seamlessly integrate into any Flutter application. With a focus on flexibility, you can effortlessly adjust colors, icons, and layouts to fit your app’s unique style. Whether you need to notify users of success, warnings, or errors, ModernSnackbar delivers engaging and dynamic feedback without compromising performance. Enhance your app with modern, responsive snack bars that do more than just notify — they impress.
title: The main title text displayed inside the body of the Snackbar.description: The secondary message providing additional information or context in the Snackbar.icon: An icon that visually represents the content of the Snackbar (e.g., checkmark for success, warning sign for error).backgroundColor: Defines the background color of the icon's section in the Snackbar.titleColor: Specifies the color of the title text.descColor: Defines the color of the description text.iconColor: Sets the color of the icon displayed in the Snackbar.width: Customizable width of the Snackbar.height: Customizable height of the Snackbar, affecting both the icon and text areas.
modern_snackbar_package.mp4
To use the package:
- add the dependency to your pubspec.yaml file
dependencies:
flutter:
sdk: flutter
modern_snackbar: <latest-package>Then import it in your flutter project:
import 'package:modern_snackbar/modern_snackbar.dart';
Below are the looks of various types in package used as Snackbar
| Custom Snackbar | Error Snackbar | Success Snackbar |
|---|---|---|
 |
 |
 |
| Versions Name | Version |
|---|---|
| Flutter | 3.13.0 |
| Dart | 3.1.0 |
| Support Name | Version |
|---|---|
| Android | SDK 16+ |
| iOS | 11.0+ |
| Web | Any* |
class ModernSnackbar {
// The icon that will be displayed in the snackbar
final IconData icon;
// The title text of the snackbar
final String title;
// The description text of the snackbar, providing more details
final String description;
// The width of the snackbar container, which can be adjusted for different screen sizes
double width;
// The height of the snackbar container
double height;
// Color of the description text
Color descColor;
// Color of the icon in the snackbar
Color iconColor;
// Background color of the snackbar container on the left side (icon background)
Color backgroundColor;
// Color of the title text
Color titleColor;
// Constructor allows you to pass all customizable properties
ModernSnackbar(
{required this.description,
this.height = 100, // Default height is set to 100
this.width = 100, // Default width is set to 100
this.titleColor = Colors.green, // Default color for title text
this.iconColor = Colors.white, // Default color for the icon
this.descColor = Colors.grey, // Default color for description text
this.backgroundColor = Colors.green, // Default background color for the icon's container
required this.title, // The title must be provided
required this.icon, // The icon must be provided
});Below is a basic example usage of the modern_snackbar
import 'package:flutter/material.dart';
import 'package:modern_snackbar/modern_snackbar.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Modern Snackbar Package',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.purple,
title: const Text(
'Modern Snackbar Package',
style: TextStyle(color: Colors.white),
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
ModernSnackbar(
description: 'Modern Snackbar Custom',
descColor: Colors.black,
titleColor: Colors.purple,
title: 'Snackbar Custom',
icon: Icons.person,
backgroundColor: Colors.purple,
).show(context); // Automatically shows the snackbar
},
child: const Text('Show Modern Snackbar'),
),
const SizedBox(
height: 10,
),
ElevatedButton(
onPressed: () {
ModernSnackbar(
description: 'Modern Snacbar Error',
titleColor: Colors.red,
title: 'Error',
icon: Icons.error,
backgroundColor: Colors.red,
).show(context); // Automatically shows the snackbar
},
child: const Text('Error Snackbar'),
),
const SizedBox(
height: 10,
),
ElevatedButton(
onPressed: () {
ModernSnackbar(
description: 'Modern Cnackbar Success',
titleColor: Colors.green,
title: 'Success',
icon: Icons.check,
backgroundColor: Colors.green,
).show(context); // Automatically shows the snackbar
},
child: const Text('Success Snackbar'),
),
const SizedBox(
height: 10,
),
ElevatedButton(
onPressed: () {
ModernSnackbar(
description: 'Modern Snackbar Warning',
titleColor: Colors.yellow,
title: 'Waring',
icon: Icons.error_rounded,
backgroundColor: Colors.yellow,
).show(context); // Automatically shows the snackbar
},
child: const Text('Warning Snackbar'),
),
SizedBox(
height: 10,
),
ElevatedButton(
onPressed: () {
ModernSnackbar(
description: 'Modern Snackbar Well Done',
titleColor: Colors.orange,
title: 'Well Done',
icon: Icons.check,
backgroundColor: Colors.orange,
).show(context); // Automatically shows the snackbar
},
child: const Text('Well Done Snackbar'),
),
]),
),
);
}
}
Copyright © 2024 Nurhayat Yurtaslan.