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

Question

我想以某种方式将我的网站tawk.to聊天按钮集成到我的Flutter应用程序中。也许在任何时候加载一个只显示图标的网页视图？但是当它被点击时，我想让它在当前内容上最大化，并让用户在聊天中收到消息时收到振动或通知。

以下是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，因为这就是我现在在我的网站上使用的，同时，有两个不同的聊天系统会让一切变得更加困难。对于这个问题的解决方案，也欢迎任何其他的建议。

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

我的home小部件目前看起来如下所示：

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


}

Answer 1

我解决了。我发现最好的方法是在webview中使用javascript，然后你可以通过webview控制器在webview中计算javascript。

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

为webview声明一个控制器。在课程开始时添加：

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

最后，您可以在appbar中创建一个按钮，运行javascript代码打开tawk：

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

Answer 2

使用这个包flutter_tawk。

import 'package:flutter_tawk/flutter_tawk.dart';

Tawk(
    directChatLink: 'YOUR_DIRECT_CHAT_LINK',
    visitor: TawkVisitor(
        name: 'Ayoub AMINE',
        email: 'ayoubamine2a@gmail.com',
    ),
)