SnackBar in Flutter doesn't become transparent on iOS

1

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,
          ),
        ),
      ),
    );
  }

}
ios
flutter
asked on Stack Overflow Feb 3, 2021 by user14850460 • edited Feb 3, 2021 by user14850460

1 Answer

1

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

answered on Stack Overflow Feb 6, 2021 by tims

User contributions licensed under CC BY-SA 3.0