flutter中实现调用原生js

---

title: flutter中实现调用原生js
date: 2023-01-25 18:00:34.085
updated: 2023-01-25 18:50:38.381
url: https://hexo.start237.top/archives/flutter中实现调用原生js
categories:

• IT技术
  tags:

---

问题

在开发项目的时候遇到了，需要按着页面设置不同标题的需求。并且一个页面中有不同的元素，点击后需要设置标题为元素的名称。因为需要用到数据统计，所以需要设置网页标题

使用GetPage中设置了标题，不知道为什么不管事儿，网上搜索一下有没有flutter原生的实现api也没有找到。

所以就想到了调用原生js来实现这个需求的思路。

可能随着对flutter的深入了解，日后会有更加优雅的解决方案吧！

解决方案

import 'dart:js' as js;
import './utils.dart';
void setTitle(String title) {
  if(PlatformUtils.isWeb) {
    js.context.callMethod('setTitle',[title]);
  }
}

<script>
 function setTitle(name){
      document.title = name;
    }
</script>

如果是多平台编辑，在安卓和IOS中是不存在 dart:js的包的。所以需要在导包的时候进行判断

import 'package:Shine_like_a_star/utils/setPlatfromTitle.dart' if(dart.library.html) 'package:Shine_like_a_star/utils/setWebTitle.dart';

void setTitle(String title) {
	print("默认的设置title"); // 这里什么都不要执行
}