如何在flutter web应用安装为PWA时更改菜单栏的颜色？
在Flutter Web应用中将应用安装为PWA（Progressive Web App）时，可以通过更改菜单栏的颜色来定制应用的外观。以下是一种实现方式：
- 在Flutter Web应用的
web/index.html文件中，找到<head>标签，并添加以下代码：
<meta name="theme-color" content="#FF0000">其中，#FF0000是你想要设置的菜单栏颜色的十六进制表示。
- 在Flutter Web应用的
web/manifest.json文件中，找到"theme_color"字段，并将其值设置为你想要的菜单栏颜色的十六进制表示，例如：
"theme_color": "#FF0000"- 重新构建并部署你的Flutter Web应用。
这样，当用户将你的Flutter Web应用安装为PWA时，菜单栏的颜色将会被更改为你所设置的颜色。
推荐的腾讯云相关产品：腾讯云云开发（Tencent Cloud CloudBase），它是一款支持Flutter Web应用部署的云开发平台。通过腾讯云云开发，你可以方便地将Flutter Web应用部署到云端，并进行PWA安装等相关操作。了解更多关于腾讯云云开发的信息，请访问：腾讯云云开发产品介绍。
相关·内容
我已经创建了一个flutter web应用程序。当我从URL安装该应用程序作为渐进式web应用程序时，菜单栏颜色不是清单文件中指定的颜色。 这是manifest.json文件： {
"short_name": "Lorem",
"name": "Lorem Ipsum",
"description": "Neque porro quisquam est qui dolorem ipsum",
"icons": [
{
浏览 22提问于2020-04-14得票数 4
我需要将Flutter应用程序转换为PWA，我正在尝试了解在不用AngularDart重写代码的情况下是否可能做到这一点。
我做了一些研究，我发现首先我需要我的Flutter应用程序成为Flutter Web应用程序，但仅此而已。
还有一个关于这个问题的StackOverflow问题，但答案并不完整
如何将Flutter web应用程序转换为PWA？
我找到了一些使用AngularDart、JS等的PWA示例。但不是关于颤动的PWA。
*在Flutter for Web主页上，他们提到了PWAs，但我不知道它是否已经是一个功能。
浏览 0提问于2019-08-13得票数 5
是否有可能将PWA应用程序集成到flutter应用程序中，如在flutter中通过webview显示web应用程序。我们可以在flutter应用程序中显示完整的PWA应用程序吗？
浏览 21提问于2021-07-20得票数 0
我想在flutter web中将我的PWA UI与我的桌面UI分开。如何知道用户是来自移动浏览器还是桌面浏览器？
浏览 0提问于2021-03-21得票数 1
1回答
我们已经创建了web应用程序的PWA，现在希望将状态栏字体颜色设置为白色。
关于如何在Chrome中设置桌面PWA的状态栏的背景色，有很多信息，例如：
<meta name="theme-color" content="#f44336">
这为PWA提供了带有黑色字体的红色背景颜色。如何将字体颜色设置为白色？
提前谢谢。
浏览 38提问于2020-02-12得票数 0
4回答
我想改变网页上的Android导航栏的颜色，当我在Android主屏幕(进步web应用程序)上添加页面时，但当我打开PWA时，Android导航栏的颜色是黑色，我想将颜色更改为白色。在清单中，您可以更改主题的颜色，我也可以这样做，但仍然使用黑色。 有可能做到这一点吗？ 我指的是Android导航栏，不是通知栏。 ?
浏览 159提问于2019-10-06得票数 4
回答已采纳
我正在用Flutter web制作一个新的Web应用程序。我想将服务人员添加到我的应用程序中，以便使其成为PWA。
我需要使用什么来实现我的目标？
我曾尝试使用dart包(service_worker或pwa)来完成此任务，但Dart 2不推荐使用它们。
浏览 0提问于2019-06-19得票数 3
1回答
我想创建一个PWA使用颤振网站，但在iPhone X模型，顶级被切断。
预期：
实际：
我使用的代码：
import 'package:flutter/cupertino.dart';
void main() {
runApp(CupertinoApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: CupertinoPageScaffold(child: Center(child: Text("PWA"
浏览 4提问于2021-07-07得票数 0
1回答
我想建立一个非常简单的画廊，如应用程序(它使用电报机器人API从某些电报通道获取图像)。我想有这个应用程序的安卓和iOS设备。我猜渐进式web应用程序或flutter都可以实现这一点。我已经开发了本地android应用程序之前，并希望学习PWA或flutter随着这个项目。 所以我的问题是，我可以在不注册苹果开发者计划的情况下将这款应用程序部署到我的iOS设备上吗？由于这只是个人使用，我不希望在任何应用程序商店发布此应用程序。另外，我需要一台装有Xcode的Mac才能做到这一点吗？！ 提前感谢！
浏览 12提问于2019-04-05得票数 0
回答已采纳
这是一个类似的问题(标题错误)：
作为PWA运行Flutter web应用程序，我需要允许用户启动刷新，从而更新(web)应用程序。
不幸的是，当web和移动原生应用具有相同的代码库时，不再允许使用import 'dart:html' as html;。所以下面的代码不是最好的选择：
RaisedButton(
child: Text("Update me"),
onPressed: () {
if (kIsWeb) html.window.location.reload();
},
),
正确的方法是什么？
编辑:我
浏览 1提问于2020-05-26得票数 7
我已经开发了一个进步的web应用程序，它可以在用户的安卓桌面上以kiosk模式/独立方式运行。
在网站上，Chrome的自动播放策略阻止我通过播放媒体，如果没有事先与该网站的用户交互，可以编程地播放。但这也适用于PWA。在kiosk模式下，是否有清单标志或的其他解决方案允许在没有用户手势的情况下播放？
(我不明白为什么有人想禁止用户在桌面上显式安装的PWA中的媒体自动播放。)
浏览 2提问于2019-06-19得票数 2
回答已采纳
我想在我的应用中使用flutter web插件。然而，当我将它添加到我的YAML文件中时，我得到了以下SDK错误。我刚刚升级到1.20.4 如何修复此错误？ 当前Flutter SDK版本为1.20.4。 由于app依赖webview_flutter >=1.0.0，需要Flutter SDK版本>=1.22.0 <2.0.0，版本解析失败。发布获取失败(1；由于app依赖webview_flutter >=1.0.0，需要Flutter SDK版本>=1.22.0 <2.0.0，版本解析失败。) Doctor摘要(要查看所有详细信息，请运行flutter
浏览 14提问于2020-10-06得票数 1
回答已采纳
1回答
我想知道是否可以将我的PWA添加到移动设备的共享表中。 ? Web Share API似乎与我需要的东西“相反”。 有没有办法将PWA添加到iOS或安卓的共享表中？
浏览 30提问于2020-08-10得票数 2
回答已采纳
我正在使用VuetifyJS预定义的PWA模板，我想更改/设置当PWA安装到我的安卓手机上时将使用的安卓状态栏BackgroundColor。
浏览 0提问于2018-10-31得票数 3
我目前正在尝试将JS代码连接到我的flutter web应用程序。然后在JS中调用flutter应用程序中的函数。 我认为问题是，flutter PWA被编译为js (main.dart.js)，因此它的函数名和函数体都丢失了。关于这一点我说得对吗？有没有办法解决这个问题？ 谢谢!
浏览 16提问于2021-09-12得票数 0
我有一个Android应用程序，允许用户改变背景的颜色根据他们选择的选择。
这是更改颜色的代码行：
appBackground.setBackgroundColor(Color.rgb(inRed, inGreen, inBlue));
如何将菜单栏和通知栏的颜色更改为用户选择的颜色？
我知道只有在KitKat里才有可能，但是谁能告诉我怎么走……
浏览 0提问于2014-05-18得票数 0
1回答
我正在开发一个，并希望添加一些特定于web的PWA资源，例如图标、、、.
我试图将这些文件放在/web文件夹中，但是在使用flutter build web执行发行版构建时，它们没有被复制到build/web/中。
部署这些资源的正确方法是什么？
浏览 4提问于2020-01-07得票数 1
回答已采纳
1回答
我用Flutter 制作了一个Pwa，并将整个项目的颜色设置为# 8C3144。在Index.html上，我有黑色半透明，所以ios中的状态栏变成# 8C3144，但它仍然是黑色的。，我不明白我需要改变什么，我不认为问题在颤振项目中。
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="theme-color" content="#8C3144&
浏览 2提问于2021-06-11得票数 0
回答已采纳
4回答
iOS 12 Safari不支持某些PWAs (渐进Web )的脱机功能。似乎Safari在这些web应用程序中没有正确地缓存资源。
例如，在iOS 12和12.1中，以下PWAs无法脱机工作，但它们在安卓或Windows上的Chrome中都能很好地工作：
google使用的Air Horner PWA演示服务工作人员：
这两个：
复制步骤(100%可复制)：
与Safari一起访问PWA (iOS 12或12.1)
关闭Safari中的PWA选项卡
按iPhone上的主页按钮将Safari设置为背景
按iPhone电源按钮关闭屏幕
再次按下iPhone电源按钮，唤醒
浏览 0提问于2018-11-23得票数 3
回答已采纳
颤动版本：<code>D0</code>
我正在尝试使用Flutter web生成一个PWA应用程序，但是当我打开这个web应用程序时，它的表现并不像PWA应该的那样，在我的android设备上也没有显示<code>D1</code>横幅。
这是我的<code>D2</code>文件：
<code>A3</code>
我在<code>D4</code>和<code>D5</code>上试过了，但不起作用。它在设备或桌面chrome浏览器上不显示<
浏览 15提问于2020-06-09得票数 1
所以，我是flutter的新手，我想知道如何改变文本的颜色。
import 'package:flutter/material.dart';
void main() => runApp(new Hello());
class Hello extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Material(
child: new Center(
浏览 8提问于2020-02-17得票数 0
1回答
我可以像人们预期的那样，用iOS /安卓仿真器启动我的应用程序，但不能用Chrome。
下面是我的运行配置：
出于某种原因，我得到了“没有找到连接设备”错误：
怎么解决这个问题呢？
我尝试过flutter config --enable-web，但问题仍然存在。
flutter doctor输出：
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.0, on macOS 12.1 21C52 darwin-arm, locale en-U
浏览 3提问于2021-12-15得票数 1
[√] Flutter (Channel beta, 1.22.0-12.4.pre, on Microsoft Windows [Versión 10.0.17763.1], locale es-US)
• Flutter version 1.22.0-12.4.pre at C:\flutter
• Framework revision f30b7f4db9 (4 weeks ago), 2020-10-08 10:06:30 -0700
• Engine revision 75bef9f6c8
• Dart version 2.10.1 好了！安卓工具链-为安卓设备开发(安卓SDK版
浏览 155提问于2020-11-07得票数 1
我用flutter编写了一个简单的应用程序，在安卓、iOS和Chrome上一切都很好。(我也在Firefox & Brave浏览器上进行了测试，一切都很好)。
然而，在Safari (Mac & iOS)上，颤振应用程序会卡在index.html文件上，不会加载PWA。
Safari检查控制台中的错误
我如何知道js_helper中的匿名函数是什么，或者main.dart.js:57063所指的是什么？
有没有一种不用缩小就为web构建的方法？有没有人遇到过这样的情况:除了Safari?之外，所有的平台都能正常工作。
颤振博士
在本地服务器上运行时从控制台登录
浏览 7提问于2020-10-14得票数 12
我可能听起来很傻，但这是我的一个真正的问题。大约一个月前，我开始扑腾，每当我在android设备上上传我的应用程序时，我从来没有在模拟器上运行过它，它似乎记得它的状态，而不是状态管理的状态。我会解释我的意思。 假设我有一个带有文本和appbar的flutter。所以我在我的设备上运行我的应用程序，它运行得很好。然后我添加了一个浮动的操作按钮，然后我热重新加载了我的应用程序，一切都很好，浮动的操作按钮在我的应用程序中。所以我关闭了我的pc，然后我想再次查看我的应用程序，所以我从手机上打开它，浮动的操作按钮消失了，只有文本和应用程序栏。 我甚至卸载了我的应用程序，并使用flutter run重新
浏览 12提问于2020-06-15得票数 1
1回答
如果我分享一张从Google到我的PWA的图片(在安卓上安装Chrome并使用这个代码)，我会到达我的PWA页面。如何自动返回谷歌图片？
如果这很重要，后端就在PHP中。
谢谢!
浏览 3提问于2020-05-15得票数 1
回答已采纳
我正在尝试通过webpack-服务器-设备预览一个vue web应用程序。我正在遵循这个指南
该指南解释说，该插件用于删除dist目录中的旧文件和未使用的文件。我已经尝试过用const { CleanWebpackPlugin } = require('clean-webpack-plugin')替换const CleanWebpackPlugin = require('clean-webpack-plugin')，一些帖子建议这样做。我也尝试过查看上的文档，但没有成功，因为我对此还很陌生。
当我尝试npm run dev时，我得到了这个错误
new C
浏览 0提问于2019-06-13得票数 76
嘿，伙计们，我刚刚在android studio里创建了一个应用程序。在菜单栏中有我创建的“更多选项”，但它不是清晰可见的，它的颜色是白色，我想要黑色。如何更改颜色检出屏幕截图。
浏览 0提问于2021-05-25得票数 0
3回答
我已经搜索了很多次来寻找这个问题的明确答案，但不幸的是，由于我对这两种技术都是新手，我找不到明确的答案。
我将使用PWA技术开发一个跨平台的移动应用程序，我知道我可以使用react，但我想知道是否也可以使用react native，因为它是为移动应用程序设计的，而react是为web应用程序设计的。
我发现这个问题描述了React和react native之间的区别:"React native是react顶部的一个额外的库，用来为iOS和安卓设备制作原生应用。“
使用react native和PWA有冲突吗？
任何建议都将不胜感激。
浏览 0提问于2019-01-26得票数 19
回答已采纳
我有运行PWA (web)，iOS和Android的Ionic应用程序。我尝试通过设置web版本禁用黑暗模式
<meta name="color-scheme" content="light" />
但没起作用。
在我的variables.css：
@media (prefers-color-scheme: dark) {
body {
...
}
.ios body {
...
}
.md body {
...
}
}
我的网页和安卓版本指的是.md标签，所以
浏览 16提问于2022-01-20得票数 1
我已经构建了一个带有棱角前端的ASP.NET核心应用程序。该角度应用程序有@angular/pwa节点包设置，因此它是一个进步的网络应用程序，可以安装在安卓/windows上，行为像一个本地应用程序。
我已经设置了外部登录(微软，谷歌，脸谱，推特)与Microsoft.AspNetCore.Identity。从我的角度应用程序中，我打开了一个弹出到外部登录页面：
this.authWindow = window.open(`${this.baseUrl}/web/v2/Account/${this.action}/${medium}/${this.platform}`, null,
浏览 4提问于2020-03-05得票数 2
回答已采纳
1回答
我使用黑暗的主题，从上面的图片中看到，但我不能改变菜单栏和标题栏的颜色。他们在烦我。任何帮助都是非常感谢的。谢谢。
浏览 2提问于2016-12-12得票数 1
回答已采纳
我正在尝试在我的网络应用程序( Flutter )中实现条带支付，但我在https://pub.dev/中找不到任何包来满足我的愿望。对于我的iOS和安卓应用程序，我使用的是https://pub.dev/packages/stripe_payment，但我在Flutter中看到了一个关于使用JS的条纹结账的教程。我的问题是，除了如何在Flutter web中实现条带支付之外，这不是不安全的吗？我的意思是我在HTML文件中声明了密钥，如果任何人右键单击-> Inspect，是否能够看到我的密钥？ 你能推荐一个好方法在我的Flutter Web App中实现条带支付吗？
浏览 6提问于2020-10-18得票数 3
回答已采纳
7回答
我的要求是使用移动浏览器在iOS和安卓系统中访问移动摄像头。
使用爱奥尼亚PWA应用程序可以在iOS和安卓设备浏览器中访问移动摄像头吗？寻找使用Cordova的PWA解决方案(不是本地解决方案)。
浏览 1提问于2017-07-06得票数 23
1回答
PWA作为共享选项不可见
、、、、
我想让用户分享照片到我的渐进式web应用程序。
我已经遵循了教程来实现它，但是我的pwa仍然看不到作为共享选项。
我使用的测试设备是安卓，我相信我的PWA符合所有的条件，因为我可以成功地将它下载到我的屏幕上。
当我把它下载到屏幕上时，它本身以及所有其他功能都工作得很好，但我仍然不能让它显示为一个共享选项。
manifest.json
{
"name" : "appname",
"short_name": "shortname",
"theme_color": "#333333"
浏览 3提问于2019-12-10得票数 0
我试图让我的dart devtools运行，但是当我想接受android许可时，我会得到以下错误：
$颤振医生-安卓-许可
Straub\AppData\Local\Android\Sdk\cmdline-tools\latest\bin.. Fehlerkonnte nicht gefunden oder geladen werden Ursache: java.lang.ClassNotFoundException: java.lang.ClassNotFoundException
有人知道怎么解决这个问题吗？
颤振博士
$ flutter doctor
Doctor summary
浏览 4提问于2021-07-25得票数 0
我已经创建了一个PWA，我正在安卓应用程序的WebView中打开它。PWA在WebView中打开，当应用程序在在线模式下打开时，服务工作者也会注册。但是，当我在脱机模式下打开应用程序时，我无法看到之前注册的ServiceWorker js文件。如何持久化ServiceWorker js文件？ 我浏览了安卓的WebKit，上面指定要在WebView中支持服务工作者，我们需要使用ServiceWorkerClient和ServiceWorkerController，但还不清楚如何在WebView中使用它们。
浏览 34提问于2020-04-28得票数 8
2回答
我按照这里的步骤打包我的PWA以提交给Play Store -
在Android中，在菜单栏中选择Build > Build。
我知道错误：
分级版本2.2是必需的。当前版本为4.4
我已经检查了gradle-wrapper.properties，并使用了正确的发行版URL: distributionUrl=
我绝不是一个developer，对Android Studio完全陌生，所以我希望得到任何帮助(尽可能地描述)。
浏览 0提问于2018-09-11得票数 2
我正在将Flutter web集成到现有的应用程序中。现有的应用程序在iOS和安卓上的功能与预期一致。这个应用程序利用了FlutterFire。如下所示，当我在Chrome设备上运行时，我得到一个空白的白屏。 pubspec.yaml environment:
sdk: '>=2.6.0 <3.0.0'
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
firebase: ^7.3.0
firebase_core: ^0.5.0
cloud_fires
浏览 9提问于2020-09-17得票数 0
回答已采纳
1回答
我想在flutter中跟踪默认PWA安装对话框的安装事件。所以，如果你有关于它的想法，如何通过服务人员或其他方式跟踪，那么请评论你的答案。 ? 提前感谢:)
浏览 35提问于2021-07-20得票数 0
如何为Vue.JS PWA应用程序设置Android底部导航栏的颜色？当我设置themeColor时，顶部的地址栏会正确地改变颜色，但导航区域仍然是全白的(#fff)。
我已经试过了：
在manifest.json中：
{
"start_url": "/.",
"display": "standalone",
"background_color": "#000000",
"theme_color": "#000000"
}
在
浏览 5提问于2020-08-07得票数 2
我在linux上安装了docker，并安装了nginx容器，如下所示：
docker pull nginx
docker run -it -d -p 8081:80 --name web -v /mnt/Project/Flutter/Projects/app_web2/build/web:/usr/share/nginx/html nginx
现在，我想更改nginx容器上的Cache-Control。因为我用颤音写了一个pwa，所以每次我更改我的页面时，当我启动页面时，我仍然会看到旧版本的页面，现在我想要更改nginx缓存。我怎样才能改变它的缺省值？
浏览 2提问于2021-03-14得票数 0
回答已采纳
2回答
我正在尝试构建一个使用GitHub动作的网络应用程序。在jobs上有一个步骤
- run: flutter build web --release --web-renderer html
这将在<base href="/">内部生成index.html。
当我打开部署页面时，它完全是空白的。
在花了几天时间之后，我找到了一些解决方案，比如从index.html中删除index.html或提供<base href="./">。但是这是一个手动过程，另一方面，构建和部署是由GitHub Action处理的。
Flutter添加了base-
浏览 1提问于2021-11-09得票数 1
回答已采纳
1回答
如何在颤动中更改系统导航栏的颜色
、、、、
我想更改系统导航栏的颜色，但我做不到。 我得到了这个： import 'package:flutter/services.dart'
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light); 但它对我不起作用。 我使用下面的代码来改变状态栏的颜色。 import 'package:flutter/services.dart'
systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.white),
浏览 16提问于2021-04-04得票数 0
我是flutter的新手，我想在其他小部件之间放置一个web视图，为此我使用了InAppWebView Flutter，但我想防止用户在单击web视图中的按钮时导航到其他页面。我是否必须为iOS和安卓编写一些本机代码来阻止导航？
谢谢
浏览 105提问于2021-01-04得票数 1
我是个新手，我正试图在我的项目中使用flutter_tts，但酒吧的get并不能解决这个问题。我已经在其他应用程序中使用了这个API，但是我不能再在那里使用它了。其他软件包也很好，就像flutter_tts和firebase_auth一样。任何帮助都将不胜感激。
pubspec:
name: aa
description: aa
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1
environment:
sdk: ">=2.1
浏览 4提问于2022-03-20得票数 1
用户选择了一个图像(结果是PickedFile -web上支持的一个类)，我想在屏幕(另一个屏幕)上显示该图像。 对于安卓和iOS来说，这很简单： Image.file(
File(widget.pickedFile.path),
fit: BoxFit.scaleDown,
) (另请参阅How to Save set image of PickedFile type to a image in Flutter?)。 但是，对于Web，不支持File类。如何在Web上向用户显示图像？
浏览 19提问于2021-08-21得票数 1
回答已采纳
我有自定义图标，可以在IOS和Android上正常工作。当我在Web上部署时，我的图标应该出现在应用程序中的每个地方都会出现一个划过的框。
控制台中出现的错误如下：
找不到一组Noto字体来显示所有缺失的字符。请为缺少的字符添加字体资产。
当我检查上的文档时，我看到我已经遵循了这些步骤。
我的自定义图标(fishfarm.ttf)位于资产文件夹。在pubspec.yaml中，我有以下内容：
fonts:
- family: FishFarm
fonts:
- asset: assets/fishfarm.ttf
我可以用Icon(FishFarm.nom
浏览 4提问于2022-03-10得票数 1
回答已采纳
1回答
对于显示像银行账户余额一样频繁变化的数据的应用程序，渐进Web应用程序脱机功能是一个好主意吗？
如果用户正在使用其PWA脱机模式，并且例如导航到银行产品余额部分，则实际上他正在查看有关其余额的任何更新数据，并允许基于可能未更新的数据进行操作。
我是否忽略了这种方法(PWA)中频繁变化的数据？
浏览 0提问于2018-06-09得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
