Flutter show toast above keyboard on IOS

Question

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

score 6 · Answer 1 · answered Sep 30 '20 at 19:22

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();

Not the best option, but a nice trick. Thanks a lot :D – Mad World Mar 09 '23 at 07:33 — Mad World, Mar 09 '23 at 07:33

score 2 · Answer 2 · answered Jun 21 '23 at 12:02

Other option would be to display the Toast just after the keyboard.

The important thing is to use

MediaQuery.of(context).viewInsets.bottom

when displaying the Fluttertoast using the option "Toast with BuildContext (All Platforms)" (more info in https://pub.dev/packages/fluttertoast)
This will get you the size of the keyboard, with that then you can manually put an offset and won't be occluded by the keyboard.

A pseudo code would be:

import 'package:fluttertoast/fluttertoast.dart';

FToast()
  ..init(context)
  ..showToast(
    child: <YOUR WIDGET>,
    positionedToastBuilder: (context, child) {
      return Positioned(
        bottom: MediaQuery.of(context).viewInsets.bottom,
        top: 16.0,
        left: 16.0,
        child: child,
      );
    },
  );

Thank you it is a good idea – Abdulmalek Dery Jun 21 '23 at 22:02 — Abdulmalek Dery, Jun 21 '23 at 22:02

Flutter show toast above keyboard on IOS

2 Answers2