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.
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,
),
),
),
);
}
}
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 contributions licensed under CC BY-SA 3.0