SnackBar in Flutter does not like 'SnackBarBehavior.floating' on iOS

1

I run into a problem I got this Snackbar (Code below) and it works fine in android. But not in an IOS emulator (I didn't try it on a real device yet). The problem is that when I open the Snackbar it lags like hell.

What causes this is the: behavior: SnackbarBehavior.floating, when I remove it from the code everything starts to work fine again.

But I really need this part it is essential.

So my question is: Do anyone know maybe a workaround to this or know how to fix this?

Because the Snackbar is completely unusable with so much lagging.

This is the code of the Snackbar:

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
asked on Stack Overflow Feb 3, 2021 by user14850460 • edited Feb 3, 2021 by user14850460

1 Answer

1

Just 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