在 Flutter PWA 中显示安装本机应用程序提示答案

【问题标题】：Show install native app prompt in Flutter PWA在 Flutter PWA 中显示安装本机应用程序提示
【发布时间】：2022-08-24 00:24:30
【问题描述】：

在 Flutter PWA 上显示安装本机应用程序提示的最佳方式是什么？

我找到了本指南https://developer.chrome.com/blog/app-install-banners-native/，但我不确定 Javascript 应该放在哪里，或者是否需要在 Flutter 代码中以某种方式对其进行编码。

我也想过自己构建一个对话框，但我没有找到一种简单的方法来在整个应用程序上生成一个可以被用户关闭的持久对话框

标签： flutter progressive-web-apps

【解决方案1】：

它可以在 Javascript 和 Flutter 中完成。 Native App Install Prompt 链接提供了必须满足的标准以及如何提示的说明。

这是在 Flutter 中实现它的一种方法。

BeforeInstallPrompt(
  child: HomeScreen(),
),

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

class BeforeInstallPrompt extends StatefulWidget {
  final Widget child;

  const BeforeInstallPrompt({Key? key, required this.child}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _BeforeInstallPrompt();
}

class _BeforeInstallPrompt extends State<BeforeInstallPrompt> {
  BeforeInstallPromptEvent? deferredPrompt;

  @override
  void initState() {
    window.addEventListener('beforeinstallprompt', (e) {
      e.preventDefault();
      setState(() {
        deferredPrompt = e as BeforeInstallPromptEvent;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      widget.child,
      if (deferredPrompt != null)
        Positioned(
          left: 8,
          bottom: 8,
          child: ElevatedButton(
            onPressed: () async {
              await _showPrompt();
            },
            child: const Text('Install'),
          ),
        )
    ]);
  }

  _showPrompt() async {
    await deferredPrompt?.prompt();
    await deferredPrompt?.userChoice;
    setState(() {
      deferredPrompt = null;
    });
  }
}

【讨论】：