Flutter show toast above keyboard on IOS - android

I'm using fluttertoast 7.0.4 package to show toasts in my App but on IOS that toast isn't showed when the key board is opened "it actually appears behind the keyboard" this is my code
Fluttertoast.showToast(
msg: message,
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
timeInSecForIosWeb: 1,
backgroundColor: AppColors.strongOrange,
textColor: Colors.white,
fontSize: 16.0
);
is there any way to change the z-index and making it bigger than keyboard's z-index in flutter

You cannot show Fluttertoast above the keyboard in ios.
There are two options:
1.Change the gravity of toast to center
Fluttertoast.showToast(
msg: message,
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0
);
Hide keyboard when showing toast at the bottom.
FocusManager.instance.primaryFocus.unfocus();

Related

White circle in notification Samsung s22 ultra, android 13. (Flutter, awesome_notifications)

After the update to android 13, the background color for notifications is not working, the color is always white.
await AwesomeNotifications().createNotification(
content: NotificationContent(
id: 100,
channelKey: 'scheduled_channel',
title: 'Hello',
body: 'This is a sample notification.',
notificationLayout: NotificationLayout.Default,
icon: icon,
backgroundColor: Colors.red,
color: Colors.red,
),
);
This happens only in this version and this device. Android 13 in the emulator works.
There are some posts on other forums where people talk about some apps modifying the default theme, but this is not the case.
https://www.reddit.com/r/GalaxyS22/comments/yczni0/anyone_else_getting_blank_icons_for_notifications/
https://www.reddit.com/r/GalaxyS21/comments/yrgabv/notification_bug_after_oneui_update_all/

Unknown black rectangle on top of keyboard in Flutter app

What is this black rectangle space that pops on top of the keyboard when clicking on a text form field? The issue only occurs when on an Android device using the web browser. It also seems very inconsistent as you can see on the GIF, sometimes it occurs, sometimes it does not. I could not figure what it is because there were no error logs occurring when doing remote debugging. In the remote debugging, the keyboard displays on the middle(the black thing) and there is some white space on the bottom (see second picture below). Would you know what could be causing this? This app is running on an older version of Flutter by the way which is 2.10.5 so was this a known issue? I've added the Scaffold code below and TextFormField for reference. If someone can point me to the right direction, it would be much appreciated!
This is the code for the main Scaffolding:
return Scaffold(
backgroundColor: Colors.black87,
body: SafeArea(
bottom: false,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(Images.backgroundImg),
fit: BoxFit.fitHeight)),
child: PageLayout(
header: NotAuthorizedHeader(
isBackPress: false,
),
child: LoginLayout(
onLogin: props.login,
loading: props.isAuthenticating,
authMessageError: props.authMessageError),
getMoreList: () {},
loadingMore: false,
),
),
),
);
Then this is the text form field snippet:
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
placeholder,
style: GoogleFonts.poppins(
fontSize: 14,
fontWeight: FontWeight.w500,
color: AppColors.gray3),
),
const SizedBox(height: 10),
TextFormField(
validator: validator,
onChanged: onChanged,
keyboardType: keyboardType,
obscureText: obscureText,
style: GoogleFonts.poppins(
color: AppColors.gray10,
fontSize: 13,
fontWeight: FontWeight.w400),
decoration: InputDecoration(
filled: true,
fillColor: AppColors.gray9,
hoverColor: AppColors.gray9,
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(4),
),
),
onEditingComplete: () {},
onFieldSubmitted: (value) {
onSubmit();
},
)
],
);
I have solved this problem after further testing. Apparently the black rectangle was being caused by the resizeToAvoidBottomInset: true property of the Scaffold on mobile web browsers. So the fix was to set the Scaffold property resizeToAvoidBottomInset: false when the platform is on web.

Close the application on back press

I am using flutter for development and I want to send app to background or close it when user clicks on back icon on appbar
I have used this answer for reference but apart from exit(0) is nothing working, which is not recommended in iOS.
I have tried following recommendations from other answers but none of it working on iOS.
Navigator.of(context).pop();
Navigator.of(context).maybePop();
Navigator.of(context, rootNavigator: true).pop(context);
Navigator.pushReplacementNamed(context, '/route');
SystemNavigator.pop();
Navigator.pop(context,true);
SystemChannels.platform.invokeMethod('SystemNavigator.pop');
for android following is working properly.
SystemNavigator.pop();
What should I use to close the app within apple guidelines.
EDIT
SystemNavigator.pop(); gives black screen in iOS.
Try this
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.of(context).pop(),
),
title: Text("Sample"),
centerTitle: true,
),

I am facing arabic text issue in flutter can any one solve it?

Text(
'ٱقۡرَأۡ بِٱسۡمِ رَبِّكَ ٱلَّذِى خَلَقَ ',
style: TextStyle(
fontWeight: FontWeight.bold,
color: CustomColors.orange,
),
),
In this word is رَبِّكَ but it appears different on a mobile screen
like رَبِّكَ appears different you can see in the picture

Going Back is showing Black Screen in Flutter

I am trying to use Navigator.pop(context); in an appbar but the problem is that it shows a black screen and then you have to press the back button on android then it pops current black screen, so where is this black screen coming from that I don't know and in iPhone there is no back button so that why it is stuck in that screen. Please do help me
This is the code where I am using this Navigator code.
#override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Color.fromRGBO(30, 30, 30, 1.0),
appBar: new AppBar(
elevation: 0.0,
backgroundColor: Color.fromRGBO(30, 30, 30, 1.0),
actions: <Widget>[
new IconButton(
icon: Icon(Icons.settings_power),
onPressed: () {
Navigator.pop(context);
}),
],
title: new Text(
"PROLOG",
style: new TextStyle(color: Colors.white),
),
centerTitle: true,
),
);
}
and the most strange thing is that I am using this piece of code in another class its working fine. So where is the problem...
The reason why you're getting a black/blank screen after calling Navigator.pop(context) is because there's no widget/screen beyond the current Navigator stack.
In Flutter, SystemChannels.platform.invokeMethod('SystemNavigator.pop') is used to remove the topmost Flutter instance. As mentioned in the docs, the method should remove the current Activity from the stack in Android. The behavior is a bit different on iOS though.
If you're trying to implement this function to close the app, this is highly discouraged. This is pointed out on Apple's archived doc. I'm trying to search for an updated reference, but navigating through Apple's Developer docs is challenging.
Anyway, I've made some changes to your code snippet if you'd like to try this out.
Add this in your imports
import 'dart:io' show Platform, exit;
As for the code, exit(int) is used for iOS. It's recommended to use an exit code from the range 0...127 as mentioned in the docs. While SystemChannels.platform.invokeMethod('SystemNavigator.pop') is used for other platforms (mainly Android in this case).
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Color.fromRGBO(30, 30, 30, 1.0),
appBar: new AppBar(
elevation: 0.0,
backgroundColor: Color.fromRGBO(30, 30, 30, 1.0),
actions: <Widget>[
new IconButton(
icon: Icon(Icons.settings_power),
// if Platform is iOS call exit(0)
// else call the preferred method
// https://api.flutter.dev/flutter/services/SystemNavigator/pop.html
onPressed: () => Platform.isIOS
? exit(0)
: SystemChannels.platform.invokeMethod('SystemNavigator.pop'),
),
],
title: new Text(
"PROLOG",
style: new TextStyle(color: Colors.white),
),
centerTitle: true,
),
);
}
Demo

Categories

Resources