SnackBar in Flutter doesn't become transparent on iOS

user_14850460 0
Viewed 613

I run into a problem I got this Snackbar and I want it to look like pciture1, it works fine in android but not in iOS.

In iOS, it looks like picture2.

I couldn't find out what causes this weird difference in iOS.

So my question is: How can I achieve the Design of picture1 in iOS?

Note: I don't want to use FlutterToast or Flushbar if possible.

Picture 1: enter image description here

Picture 2: enter image description here

The Snackbar Code:

import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class SnackBarCustom {

  SnackBar snackBarCustom(final String title, final double height, final double width, final int maxLines) {
    return SnackBar(
      elevation: 1000,
      duration: Duration(seconds: 2),
      behavior: SnackBarBehavior.floating,
      backgroundColor: Colors.transparent,
      content: Padding(
        padding: EdgeInsets.symmetric(
          horizontal: width * 0.11,
          vertical: height * 0.06,
        ),
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: width * 0.0075),
          height: height * 0.06,
          width: width,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(height * 0.0374),
            color: const Color(0xFF555555).withOpacity(0.75),
          ),
          child: AutoSizeText(
            title,
            textAlign: TextAlign.center,
            style: GoogleFonts.montserrat(
              fontWeight: FontWeight.w700,
              fontSize: width * 0.32,
              color: const Color(0xFFFFFFFF),
              letterSpacing: 0.8,
            ),
            minFontSize: 5,
            maxFontSize: 14,
            maxLines: maxLines,
          ),
        ),
      ),
    );
  }

}
flutter ios
1 Answers

As you sad, you don't want to use fluttertoast if possible, but I think, their is no easy way to achieve what you trying without it.

So I advise you to use fluttertoast, it works on IOS and Android and its easy to use.

For your desired Design you need to use the Toast which requires context.

The Code:

showToast(final FToast fToast, final String title, final double height, final double width, final int maxLines) {
    Widget toast = Container(
      padding: EdgeInsets.symmetric(horizontal: width * 0.015),
      height: height * 0.06,
      width: width * 0.55,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(height * 0.0374),
        color: const Color(0xFF555555).withOpacity(0.75),
      ),
      child: AutoSizeText(
        title,
        textAlign: TextAlign.center,
        style: GoogleFonts.montserrat(
          fontWeight: FontWeight.w700,
          fontSize: width * 0.32,
          color: const Color(0xFFFFFFFF),
          letterSpacing: 0.8,
          fontStyle: FontStyle.italic,
        ),
        minFontSize: 5,
        maxFontSize: 14,
        maxLines: maxLines,
      ),
    );


    fToast.showToast(
      child: toast,
      gravity: ToastGravity.BOTTOM,
      toastDuration: Duration(seconds: 2),
    );

  }

You also need to have a FToast instance, which has to be used this way:

 FToast fToast;

  @override
  void initState() {
    super.initState();
    fToast = FToast();
    fToast.init(context);
  }

For more Information, have a look at: fluttertoast

user_141776800
Related