import 'dart:io';
import 'package:keyboard_utils/keyboard_listener.dart';
import 'package:keyboard_utils/keyboard_utils.dart';
import 'package:flutter/material.dart' hide KeyboardListener;

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => const MaterialApp(home: MyHomePage());
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Title')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[const Text('You have pushed the button this many times:'),
            Text('$_counter', style: Theme.of(context).textTheme.headline4),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(PageRouteBuilder(
                  opaque: false, // push route with transparency
                  pageBuilder: (context, animation, secondaryAnimation) => const Screen2(),
                ));
              },
              child: const Text('navigate'),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _counter++),
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class Screen2 extends StatefulWidget {
  const Screen2({Key? key}) : super(key: key);

  @override
  State<Screen2> createState() => _Screen2State();
}

class _Screen2State extends State<Screen2> {
  final _keyboardUtils = KeyboardUtils();
  late int _idKeyboardListener;
  final focusNode = FocusNode();

  bool isEmojiKeyboardVisible = false;
  bool isKeyboardVisible = false;
  double _keyboardHeight = 300;

  @override
  void initState() {
    super.initState();
    _idKeyboardListener = _keyboardUtils.add(
        listener: KeyboardListener(
          willHideKeyboard: () {
            if (isKeyboardVisible) {
              isKeyboardVisible = false;
              isEmojiKeyboardVisible = false;
            }

            setState(() {}); // show correct Icon in IconButton
          },
          willShowKeyboard: (double keyboardHeight) async {
            if (Platform.isAndroid) {
              _keyboardHeight = keyboardHeight + WidgetsBinding.instance.window.viewPadding.top / WidgetsBinding.instance.window.devicePixelRatio;
            } else {
              _keyboardHeight = keyboardHeight;
            }

            isKeyboardVisible = true;
            isEmojiKeyboardVisible = true;
            setState(() {});
          },
        )
    );
  }

  @override
  void dispose() {
    _keyboardUtils.unsubscribeListener(subscribingId: _idKeyboardListener);

    if (_keyboardUtils.canCallDispose()) {
      _keyboardUtils.dispose();
    }

    focusNode.dispose();
    super.dispose();
  }

  Future<void> onEmojiButtonPressed() async {
    if(isEmojiKeyboardVisible){
      if(isKeyboardVisible){
        FocusManager.instance.primaryFocus?.unfocus();
        isKeyboardVisible = false;
      } else {
        focusNode.unfocus();
        await Future<void>.delayed(const Duration(milliseconds: 1));
        if(!mounted) return;
        FocusScope.of(context).requestFocus(focusNode);
      }
    } else {
      assert(!isKeyboardVisible);
      setState(() {
        isEmojiKeyboardVisible = true;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold( // wrapping with ScaffoldMessenger does NOT fix this bug
      backgroundColor: Colors.white.withOpacity(0.5),
      resizeToAvoidBottomInset: false,
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Expanded(child: SizedBox(
              height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
              child: Column(
                children: [
                  Expanded(
                    child: Container(
                      height: 200,
                    ),
                  ),
                  Row(
                    children: [
                      IconButton(
                        icon: Icon(isKeyboardVisible || !isEmojiKeyboardVisible ? Icons.emoji_emotions_outlined : Icons.keyboard_rounded),
                        onPressed: onEmojiButtonPressed,
                      ),
                      Expanded(
                        child: TextField(
                          focusNode: focusNode,
                        ),
                      ),
                      IconButton(
                        icon: const Icon(Icons.send),
                        onPressed: () => ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('A snack!'))),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            ),
            Offstage(
              offstage: !isEmojiKeyboardVisible,
              child: SizedBox(
                height: _keyboardHeight,
                child: Container(color: Colors.red),
              ),
            ),
          ],
        ),
      ),
    );
  }
}