首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter: Android:如何创建不可移动的本地通知工具栏,上面有一些操作按钮,如截图所示

Flutter 是一种跨平台的移动应用开发框架,可以同时为 Android 和 iOS 平台开发应用程序。要创建一个不可移动的本地通知工具栏并添加一些操作按钮,可以使用 Flutter 提供的 flutter_local_notifications 插件。

以下是一些步骤可以实现这个功能:

  1. pubspec.yaml 文件中添加 flutter_local_notifications 插件的依赖:
代码语言:txt
复制
dependencies:
  flutter_local_notifications: ^5.3.0
  1. 运行 flutter pub get 命令来获取依赖包。
  2. 在需要使用通知工具栏的页面中导入相关库:
代码语言:txt
复制
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
  1. 在页面的 initState() 方法中初始化通知插件:
代码语言:txt
复制
FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
    FlutterLocalNotificationsPlugin();

@override
void initState() {
  super.initState();

  var initializationSettingsAndroid =
      AndroidInitializationSettings('app_icon');
  var initializationSettings =
      InitializationSettings(android: initializationSettingsAndroid);

  flutterLocalNotificationsPlugin.initialize(initializationSettings);
}

这里的 'app_icon' 是应用程序中作为通知图标显示的图标资源。需要将该图标资源放置在 android/app/src/main/res/drawable 目录下。

  1. 创建一个方法来展示通知工具栏:
代码语言:txt
复制
Future<void> showNotificationToolbar() async {
  var androidPlatformChannelSpecifics = AndroidNotificationDetails(
    'channel_id',
    'channel_name',
    'channel_description',
    importance: Importance.defaultImportance,
    priority: Priority.defaultPriority,
    showProgress: false,
    ongoing: true,
    styleInformation: DefaultStyleInformation(true, true),
    channelAction: AndroidNotificationChannelAction.createIfNotExists,
    importance: Importance.max,
  );

  var platformChannelSpecifics =
      NotificationDetails(android: androidPlatformChannelSpecifics);

  await flutterLocalNotificationsPlugin.show(
    0,
    '通知标题',
    '通知内容',
    platformChannelSpecifics,
    payload: 'notification_payload',
  );
}

这里需要注意设置 ongoing: true 来确保通知工具栏不可移动。

  1. 在需要展示通知工具栏的地方调用 showNotificationToolbar() 方法:
代码语言:txt
复制
FlatButton(
  onPressed: () {
    showNotificationToolbar();
  },
  child: Text('展示通知工具栏'),
),

在按钮的 onPressed 回调函数中调用 showNotificationToolbar() 方法。

通过以上步骤,你可以创建一个不可移动的本地通知工具栏,上面有一些操作按钮。当用户点击按钮时,你可以通过相应的回调函数执行相应的操作。

腾讯云相关产品中,云函数 SCF 提供了可用于创建本地通知的后端服务。你可以使用 云函数 SCF 配合 flutter_local_notifications 插件来实现一个完整的解决方案。你可以了解更多关于 云函数 SCF 的信息和相关文档:云函数 SCF

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用 Android Studio 进行 Flutter 开发

本文将与你一起回顾如何在 Android Studio 里进行 Flutter 工具的配置。 创建项目 你可以通过多种方式来创建新项目。 ?...⚠️ 关于设置公司域名 “在创建新应用时,一些 Flutter IDE 插件需要一个逆序的域名,比如 com.example。...在主工具栏,可以运行和调试代码: ? IntelliJ 的主工具栏 选择目标设备 在 IDE 中打开 Flutter 项目时,你会在工具栏的右侧看到一组 Flutter 的特定按钮。...“如果 Run 和 Debug 按钮不可用且未显示目标设备,则意味着 Flutter 未发现任何已连接的 iOS 、Android 设备或模拟器。你需要连接设备或启动模拟器才能继续。...确保选择和 Flutter 使用相匹配的 Android SDK(如 flutter doctor 中所示)。 点击 OK。

6.4K30

老司机带你快速上手调试Flutter项目

下面就详细的讲解一下如何使用Flutter的调试工具。...Run控制台在工程创建的时候是没有的,当我们运行项目的时候,Run控制台就会出现在底部菜单栏,如图所示: ?...这里面有几个工具,我简单的描述一下每个工具的作用: 首先我们看左边第一列的4个工具的作用,如图所示: ? 左边第一列的4个工具的作用 然后再看看第二列的2个工具的作用,如图所示: ?...具体功能如图2.6.3.1所示: ? 具体截图 这里主要讲一下上方并排的7个工具的功能,以及右边那个漏斗形状的蓝色图标的作用。 图标 描述 添加一个Center组件。...将组件向上移动。 将组件向下移动。 移除组件。 点击它,就会只显示组件,再次点击就显示完整的代码结构。

3.1K30
  • 如何使用 Flutter 创建桌面应用程序

    如何使用 Flutter 创建桌面应用程序 介绍 开发人员可以选择编写多种类型的应用程序:控制台应用程序、移动应用程序、Web 应用程序和桌面应用程序。...Flutter 设备命令的屏幕截图 Flutter 设备命令的屏幕截图 创建一个新的 Flutter 应用 像任何其他典型的 CLI 一样,我们可以使用create如下所示的命令创建一个新应用程序:...TextPad 有一个大的多行文本字段,我们可以在其中输入我们的笔记。它还有一个操作按钮,可以将当前笔记保存到文件中。TextPad 的屏幕截图如下所示。...示例应用程序的屏幕截图 如上所述,右上角的保存按钮会将当前笔记写入文本文件。保存文件后,TextPad 将显示有关任务完成的通知消息。...Flutter 的性能比 Electron 好,因为它不在 Web 浏览器上执行应用程序的 GUI 逻辑。 Flutter 确实给开发者带来了一些痛点。

    4.6K20

    Flutter从配置安装到填坑指南详解

    在 Google I/O ’17 上,Google 向我们介绍了 Flutter —— 一款新的用于创建移动应用的开源库。 Flutter是什么呢?...(具体这里面有标记[X]的那些项如何安装后文有详细讲解,这里简单提一下。) 这里面有四项内容: (1)Flutter 这是Flutter工具,就是刚才git下载的那个。...screenshot 从一个连接的设备截图。 stop 停止在附加设备上的Flutter应用。 test 对当前项目的Flutter单元测试。...后来我想是不是BITS传输服务未开启,于是我一顿操作猛如虎,操作如下,打开BITS: 计算机 --> 右键 “管理” --> 服务和应用程序里面,点击“服务”,然后如下图所示:...有3点需要特别注意的: 1) Flutter,这里面有4个工具,缺一不可:Flutter本身的安装包,Framework(这是flutter的核心代码部分),Engine(flutter的引擎

    8K50

    Flutter从配置安装到填坑指南详解

    在 Google I/O ’17 上,Google 向我们介绍了 Flutter —— 一款新的用于创建移动应用的开源库。 Flutter是什么呢?...(具体这里面有标记[X]的那些项如何安装后文有详细讲解,这里简单提一下。) 这里面有四项内容: (1)Flutter 这是Flutter工具,就是刚才git下载的那个。...screenshot 从一个连接的设备截图。 stop 停止在附加设备上的Flutter应用。 test 对当前项目的Flutter单元测试。...后来我想是不是BITS传输服务未开启,于是我一顿操作猛如虎,操作如下,打开BITS: 计算机 --> 右键 “管理” --> 服务和应用程序里面,点击“服务”,然后如下图所示: 然后选中图中标记的这个...有3点需要特别注意的: Flutter,这里面有4个工具,缺一不可:Flutter本身的安装包,Framework(这是flutter的核心代码部分),Engine(flutter的引擎),Dart sdk

    3.6K40

    开发工具总结(10)之Flutter从配置安装到填坑指南详解

    ---- 在 Google I/O ’17 上,Google 向我们介绍了 Flutter —— 一款新的用于创建移动应用的开源库。...(具体这里面有标记[X]的那些项如何安装后文有详细讲解,这里简单提一下。) 这里面有四项内容: (1)Flutter 这是Flutter工具,就是刚才git下载的那个。...screenshot 从一个连接的设备截图。 stop 停止在附加设备上的Flutter应用。 test 对当前项目的Flutter单元测试。...后来我想是不是BITS传输服务未开启,于是我一顿操作猛如虎,操作如下,打开BITS: 计算机 --> 右键 “管理” --> 服务和应用程序里面,点击“服务”,然后如下图所示:...有3点需要特别注意的: Flutter,这里面有4个工具,缺一不可:Flutter本身的安装包,Framework(这是flutter的核心代码部分),Engine(flutter的引擎)

    2K10

    浅谈跨平台框架Flutter的搭建与运行

    作者:个推iOS开发工程师 伊泽瑞尔 Flutter是Google推出的跨平台的解决方案,用以帮助开发者在 Android 和 iOS 两个平台开发高质量原生应用的全新移动 UI 框架。...如 myapp),点击 Next; 点击 Finish; 等待Android Studio安装SDK并创建项目。...如果没有列出可用,请选择 Tools>Android>AVD Manager 创建; 在工具栏中点击 Run图标; 如果一切正常,在设备或模拟器上会看到启动的应用程序 4.体验热重载:Flutter可以通过热重载实现快速的开发周期...下面将分别介绍如何连接Android和iOS设备来运行flutter应用。...一、连接Android模拟器 在Android模拟器上运行并测试Flutter应用,请按照以下步骤操作: 启动 Android Studio>Tools>Android>AVD Manager 并选择

    3.4K20

    吐血教程:搭建Flutter开发环境

    不要将Flutter安装到需要一些高权限的路径,如C:\Program Files\。...2)打开终端并运行一些命令,安装工具,用于将Flutter应用安装到iOS设备上,命令如下所示: brew update brew install --HEAD libimobiledevice...登录界面如图1-18所示。 步骤5 当你第一次添加真机设备进行iOS开发时,需要设置同时信任你的Mac和该设备上的开发证书。点击Trust按钮即可,如图1-19所示。...图1-23 设置包名界面 步骤4 点击Finish按钮开始创建第一个工程,等待几分钟,会创建如图1-24所示的工程。...步骤5 工程创建好后,可以先运行一下官方创建的示例,看一看运行效果,点击Open iOS Simulator打开iOS模拟器,具体操作如图1-25所示。

    5.8K20

    浅谈跨平台框架 Flutter 的搭建与运行

    [封面.png] 作者:个推iOS开发工程师 伊泽瑞尔 Flutter是Google推出的跨平台的解决方案,用以帮助开发者在 Android 和 iOS 两个平台开发高质量原生应用的全新移动 UI 框架...如 myapp),点击 Next; 点击 Finish; 等待Android Studio安装SDK并创建项目。...如果没有列出可用,请选择 Tools>Android>AVD Manager 创建; 在工具栏中点击 Run图标; 如果一切正常,在设备或模拟器上会看到启动的应用程序,如下图所示: [kny4ty1ip8...下面将分别介绍如何连接Android和iOS设备来运行flutter应用。...一、连接Android模拟器 在Android模拟器上运行并测试Flutter应用,请按照以下步骤操作: 启动 Android Studio>Tools>Android>AVD Manager 并选择

    3.7K40

    让 Flutter 在鸿蒙系统上跑起来

    鸿蒙系统 (HarmonyOS)是华为推出的一款分布式操作系统,那么如何在保证开发迭代效率的前提下,以相对低的成本将移动应用快速移植到鸿蒙平台上呢?...由于鸿蒙的业务开发语言仍然可用 Java,在很多基础概念上与 Android 也有相似之处(如下表所示),我们可以从 Android 的实现入手,完成对鸿蒙的移植。 ?...这个流程的大部分工作都由框架层和引擎层完成,对于鸿蒙的适配,我们主要关注的是与设备自身能力相关的问题,即: (1)如何监听设备的 VSync 信号并通知 Flutter 引擎?...抛开复杂的注册及调用细节,本质上整个流程主要做了三件事: 创建了一个视图对象,提供可用于直接绘制的 Surface,将它通过 JNI 传递给原生侧; 在原生侧获取 Surface 关联的本地窗口对象,并交给...以下是通过 DevEco Studio 运行官方 Flutter Gallery 应用的截图,截图中 Flutter 引擎已经使用鸿蒙系统的平台能力进行了重写: ?

    2.5K41

    关于Flutter 2.5稳定版你知道多少?

    该版本进行了一些性能上的改进:首先是一项用于从离线训练运行中连接 Metal 着色器预编译的 PR (#25644),这将最坏情况下的光栅化时间减少了 2/3 (如我们的基准测试所示),将第 99 百分位的帧时间减少了一半...如果你想让 Ctrl - A 做一些自定义操作,而不是选择所有文本,你可以自行定义。...如上图所示,你可以看到以下变化: 更好地传达调试切换按钮的作用 —— 这些按钮有新的图标、面向任务的标签,以及丰富的工具提示 (用于描述它们的功能和何时使用它们)。...您可以通过「debug」按钮旁边的工具栏按钮来访问这个信息: 覆盖率信息将以红色和绿色的矩形显示在编辑窗口左侧的空隙中。...在插件的设置 / 偏好页面有一个新的文本字段。 注意,这对定义为类中静态常量的图标有效,如屏幕截图中的示例代码所示。

    3.7K20

    Flutter简介

    Flutter是Google开源的移动应用框架,一套代码能完成跨平台(Android和IOS)移动应用的开发,对于Flutter而言,其有以下特点: 现代响应式框架 高速的2D渲染引擎 方便快捷的开发工具...在Android Studio中新建一个Flutter项目并运行,运行完成后我们会发现在Android Studio右侧工具栏出现了Flutter Inspector选项,在该选项卡内,我们可以更深层级的理解上面这段话...上图为Flutter Inspector中的Widgets面板中的内容(左侧为当前页面的截图),在这里我们可以看到页面上的所有元素都是Widget。...Widget的边界),同时也会在面板上显示当前Widget的属性信息,这里就印证了我们前面说的在Flutter中,几乎都是用Dart编写的Widget组件,在界面发生变化时,我们可以通过图中的刷新按钮,...Flutter应用目录结构 我们在Android studio或者cmd( 通过flutter create方式)创建的Flutter应用一般会生成四个目录 android Android平台的原生代码目录

    49910

    Flutter 开发实战与前景展望 - RTC Dev Meetup

    四大版本,目前总 star 在 17 k+ 左右,主要活跃在掘金社区,id 是恋猫的小郭,主要专栏有《Flutter完整开发实战详解》系列等,平时工作负责移动端项目的开发,工作经历从 Android...宇宙中万物皆 Widget ,它们都是不可变一帧,同时也是被人吐槽很多的嵌套模式,当然换个角度,事实上你把他当作 Widget 配置文件来写或者就好理解了。...image 那如果 Flutter 的项目插件带有本地代码呢?...4.1 AndroidView AndroidView -> TextureLayer,利用Android 上的副屏显示与虚拟内存显示原理。 共享内存,实时截图渲染技术。...(我在开发过程中几乎无知觉) 在 flutter_web 中 UI 层面与渲染逻辑和 Flutter 几乎没有什么区别,底层的一些区别如: flutter_web 中的 Canvas 是 EngineCanvas

    1.9K20

    Widget中的state到底是什么

    下述代码分别展示了在Android、iOS和原生JavaScript中,如何将一个文本控件的展示文案更改为Hello World: // Android 设置某文本控件展示文案为 Hello World...下面有两个简单的小例子,来帮助理解这个判断规则。 第一个例子是,我需要创建一个自定义的弹窗控件,把使用App过程中出现的一些错误信息提示给用户。...(比如,用户点击按钮)或者其内部数据的变化(比如,网络数据回包),并体现在UI上。...这里有一张StatefulWidget的示意图,如下所示: ? 看到这里你可能有点困惑了。因为,之前我们提到,Widget是不可变的,发生变化时需要销毁重建,所以谈不上状态。...如果某个子Widget的重建涉及到一些耗时操作,那页面的渲染性能将会急剧下降。

    2.9K20

    Flutter应用集成极光推送

    概述 在移动应用开发中,消息推送可以说是一项非常重要的功能,它能够起到提醒或者唤醒用户的作用,同时也是产品运营人员更高效地实现运营目标的重要手段,比如将新上架一个商品或者最新的一条新闻推送给用户。...事实上,消息推送是一个横跨业务服务器、第三方推送服务托管厂商、操作系统长连接推送服务、用户终端以及移动手机应用等五方面的复杂业务应用场景。...在极光开发者平台中创建推送应用程序,然后填写build.gradle脚本所需的参数,如下图所示。 然后,在Android手机上运行项目,会有 Running Gradle task ......,选择需要推送的平台,然后点击【立即发送】按钮,如下图所示。...等待消息推送成功后,就可以在对应的移动设备上看到推送的消息,如下图所示。

    34110

    Flutter 1.22 正式发布

    由于这是新的移动操作系统版本的发布季节,因此此发行版侧重于确保Android 11和iOS 14与Flutter兼容。...除了对新的移动操作系统版本的支持外,还有很多其他要分享的新闻,包括预览Android最重要的功能之一:状态恢复,新的“Material 风格按钮“,新的国际化和本地化支持(与热重载一起使用),一个新的Navigator...您可以将旧按钮与新按钮混合使用。 新的国际化和本地化支持 自Flutter创立以来,Flutter已提供您的应用程序国际化(i18n)和本地化(l10n)所需的核心功能。...该软件包有助于解决诸如如何正确地将字符串(如“ A in text in English”)缩写为前15个字符的问题。使用String类,该缩写为“ A??...Flutter的惊人发展速度意味着我们能够为iOS和Android实施屡获殊荣的设计,并且还可以发布到Web上—及时锁定!通常,这实际上是不可能的。

    7.5K20

    TensorFlow Lite,ML Kit 和 Flutter 移动深度学习:1~5

    这对用户和开发人员都是有利的。 让我们简要概述一下移动设备上的 AI 如何影响我们与智能手机交互的方式。 在移动设备上使用 AI 改善用户体验 人工智能的使用极大地增强了移动设备上的用户体验。...在本节中,我们将简要讨论移动应用领域中一些最大的参与者如何利用 AI 的优势来促进其业务发展。 Netflix Netflix 是移动应用中机器学习的最佳和最受欢迎的例子。...深度学习的基本知识以及如何将其与移动应用集成对于接下来的章节非常重要,在这些章节中,我们将广泛使用该知识来创建一些实际应用。 在下一章中,我们将学习使用设备上模型进行面部检测的知识。...处理图像 在本节中,我们将讨论如何对图像进行一些常见的操作以帮助图像处理。 通常,对图像进行一些简单的操作可以导致更快,更好的预测。 旋转 假设我们希望将示例中的图像旋转 90 度。...该文件将包含用于创建应用第一个屏幕的代码,其中包含带有一些文本和两个凸起按钮的列,如以下屏幕截图所示: 创建应用的第一个屏幕的步骤如下: 首先,我们将定义一些全局字符串变量,这些变量稍后将在创建用于选择模型的按钮以及保存用户选择的模型时使用

    18.7K10

    Flutter 第一个程序Hello World!

    变量名:FLUTTER_STORAGE_BASE_URL 变量值:https://storage.flutter-io.cn 如下图所示操作。   ...四、运行hello_world项目   我们之前下载的Flutter SDK里面有一个examples文件夹,里面是一些flutter项目,这些项目有什么作用呢?...Android Studio中配置Flutter的SDK,如图所示。   ...通过运行sdk中自带的项目我们解决了一些问题,同时还发现这个项目比较老旧了,没有做更新,它里面还是基于Android 10去写的,Android11上运行应该没有问题,而到了Android12上就不行了...项目创建完成,如下图所示: 创建完成之后我们直接运行这个项目在模拟器或者真机上。 这是一个计数器,点击右下角的浮动按钮,屏幕中间的数字会加1。

    1.2K20

    Flutter的文本、图片和按钮使用

    来实现 Flutter也有类似概念TextSpan TextSpan定义一个字符串片段该如何控制其展示样式,而将这些有独立展示样式的字符串组装在一起,则能支持混合样式的富文本展示。...图片显示方式很多,如资源图片、网络图片、文件图片等,图片格式各不相同,在Flutter也有多种方式加载不同形式、支持不同格式图片: 加载本地资源图片,如Image.asset(‘images/logo.png...’) 加载本地(File文件)图片,如Image.file(new File(’/storage/xxx/xxx/test.jpg’)) 加载网络图片,如Image.network( 'http://xxx...这就对应按钮控件中的两个最重要参数: onPressed参数用于设置点击回调,告诉Flutter在按钮被点击时通知我们。...与Text类似,按钮内部也有丰富UI定制接口。 UI基本信息表达,Flutter经典控件与原生Android、iOS系统提供的控件无本质区别。

    58920
    领券