Flutter Custom Snackbar

Here, we will see how to create a custom snackbar using Getx.

To achieve this result we will use Get.snackbar(). If you see

SnackbarController snackbar(
   String title,
   String message, {
   Color? colorText,
   Duration? duration = const Duration(seconds: 3),
   bool instantInit = true,
   SnackPosition? snackPosition,
   Widget? titleText,
   Widget? messageText,
   Widget? icon,
   bool? shouldIconPulse,
   double? maxWidth,
   EdgeInsets? margin,
   EdgeInsets? padding,
   double? borderRadius,
   Color? borderColor,
   double? borderWidth,
   Color? backgroundColor,
   Color? leftBarIndicatorColor,
   List ? boxShadows,
   Gradient? backgroundGradient,
   TextButton? mainButton,
   void Function(GetSnackBar)? onTap,
   bool? isDismissible,
   bool? showProgressIndicator,
   DismissDirection? dismissDirection,
   AnimationController? progressIndicatorController,
   Color? progressIndicatorBackgroundColor,
   Animation ? progressIndicatorValueColor,
   SnackStyle? snackStyle,
   Curve? forwardAnimationCurve,
   Curve? reverseAnimationCurve,
   Duration? animationDuration,
   double? barBlur,
   double? overlayBlur,
   void Function(SnackbarStatus?)? snackbarStatus,
   Color? overlayColor,
   Form? userInputForm, })

If you see snackbar() function you will notice that you can do tons of things with it. So to create a custom snackbar we will customize it.

First we will create a function here

void showCustomSnackBar(String message, {bool isError = true, String title="Errors"}) {

}

As we call this function, we will pass arguments to it. then inside the function we will use Get.snackbar().

void showCustomSnackBar(String message, {bool isError = true, String title="Errors"}) {

  Get.snackbar(
      title,
      message,
      titleText: BigText(text: title, color: Colors.white),
      messageText: Text(message, style: TextStyle(
          color: Colors.white
      ),),
      colorText: Colors.white,
      snackPosition: SnackPosition.TOP,
      backgroundColor: isError?Colors.redAccent:AppColors.mainColor
  );

}

Now you would be called showCustomSnackBar() from your UI. But for this we need to save this function is a class. We will create a class name custom_snackbar.dart and save the function showCustomSnackBar() in it.