android - 我可以将tawk.to集成到Flutter应用程序的导航栏中吗？

我想以某种方式将我的网站tawk.to聊天按钮集成到我的Flutter应用中。也许一直加载仅显示图标的Web View ？但是，当我单击它时，我希望它最大化当前内容，并且还希望用户在聊天中收到消息时能收到振动或通知。

这是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-->

我想使用tawk.to，因为这也是我现在在我的网站上所使用的，拥有2个不同的聊天系统会使一切变得更加困难。
也欢迎提出其他解决问题的建议。

Main.dart在这里:

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, //
      ),
    );
  }
}

我的家庭小部件当前如下所示:

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


}

最佳答案

我解决了我发现的最好方法是在Webview中使用javascript，然后可以通过Webview Controller 在Webview中评估javascript。

我将Tawk。默认设置为隐藏在我的网站上，并且要显示它，您只需执行以下操作:

声明一个用于webview的 Controller 。在类(class)开始时，添加:

  WebViewController _controller;

然后在您的WebView()小部件内:

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
          },
),

最后，您可以在应用栏中创建一个按钮，运行javascript代码以打开tawk:

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