Can I integrate tawk.to into the nav bar of my Flutter app?

I'd like to integrate my websites tawk.to chat button into my Flutter app in some way. Maybe loading a webview at all times only showing the icon? But then when it's clicked I want it to maximize over the current content, and also for the user to receive a vibration or notification when a message is received in the chat.

Here's the widget code for tawk.to:

<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5c8306ab101df77a8be1a645/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->

I want to use tawk.to as that's what I'm using on my website right now aswell, having 2 different chat systems would make everything a lot harder. Any other suggestions for solutions to the problem are also welcome.

Main.dart here:

import 'package:flutter/material.dart';
import 'home_widget.dart';

import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_analytics/observer.dart';


void main() => runApp(App());


class App extends StatelessWidget {
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  static FirebaseAnalyticsObserver observer =
  FirebaseAnalyticsObserver(analytics: analytics);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Flutter App',
      navigatorObservers: <NavigatorObserver>[observer],
      home: Home(
        analytics: analytics, //
        observer: observer, //
      ),
    );
  }
}

My home widget currently looks like this:

import 'package:flutter/material.dart';
import 'placeholder_widget.dart';
import 'homepage.dart';
import 'reader.dart';
import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_analytics/observer.dart';


class Home extends StatefulWidget {
  Home({Key key, this.title, this.analytics, this.observer}) //
      : super(key: key); //

  final String title; //
  final FirebaseAnalytics analytics; //
  final FirebaseAnalyticsObserver observer; //


  @override

  State<StatefulWidget> createState() {
    return _HomeState(analytics, observer);
  }
}
class _HomeState extends State<Home> {
  _HomeState(this.analytics, this.observer); //

  final FirebaseAnalyticsObserver observer; //
  final FirebaseAnalytics analytics; //

  int _currentIndex = 0;
  final List<Widget> _children = [
    Homepage(),
    MyApp(),
    PlaceholderWidget(Colors.green) // TODO: I want my chat button here
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex], // new
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped, // new
        currentIndex: _currentIndex, // new
        items: [
          new BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          new BottomNavigationBarItem(
            icon: Icon(Icons.photo_camera),
            title: Text('blah'),
          ),
          new BottomNavigationBarItem(
              icon: Icon(Icons.person),
              title: Text('Chat')
          )
        ],
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }


}

I solved it. The best way I found was using javascript inside of the webview, and then you can evaluate javascript in the webview through the webview controller.

I made Tawk.to default to hiding on my website, and to show it you simply do the following:

Declare a controller for the webview. At the start of your class add:

  WebViewController _controller;

Then inside of your WebView() widget:

new WebView(
          initialUrl: 'google.com',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) async {
            _controller = webViewController;

          //I've left out some of the code needed for a webview to work here, fyi
          },
),

And finally you can make a button in your appbar run the javascript code to open tawk:

              IconButton(
            icon: Icon(Icons.message),
            onPressed: () {
                _controller.evaluateJavascript('Tawk_API.showWidget();');
                _controller.evaluateJavascript('Tawk_API.maximize();');
            },
          ),