Flutter---Notification(1.基础通知)

效果图

关键问题

1.为什么IOS使用默认配置

Dart 复制代码
1.iOS系统的通知行为相对Android更加统一和标准化
2. iOS开发规范限,苹果对通知有更严格的审核要求

实现步骤

1.下载插件

Dart 复制代码
  flutter_local_notifications: ^19.5.0

2.引入插件

Dart 复制代码
import 'package:flutter_local_notifications/flutter_local_notifications.dart';

3.初始化通知插件和定义一个通知ID计数器

Dart 复制代码
  late FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
  int _notificationId = 0;

4.构建一个通用的通知按钮组件

Dart 复制代码
 //===============================构建通知按钮====================================
  Widget _buildNotificationButton(
      String text,
      IconData icon,
      VoidCallback onPressed, {
        required Color color,
      }) {
    return ElevatedButton.icon(
      icon: Icon(icon, size: 24),
      label: Padding(
        padding: const EdgeInsets.symmetric(vertical: 16),
        child: Text(
          text,
          style: const TextStyle(fontSize: 16),
        ),
      ),
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        backgroundColor: color,
        foregroundColor: Colors.white,
        elevation: 3,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        ),
      ),
    );
  }

5.构建基础通知*****

Dart 复制代码
  Future<void> _showBasicNotification() async {

    _notificationId++; //递增通知的ID:每个通知需要一个唯一ID

    const AndroidNotificationDetails androidDetails =
    AndroidNotificationDetails(
      'normal_channel', //通道ID
      '普通通知', //通道名称
      importance: Importance.high, //重要性级别:max:浮动通知(直接弹出来);high:通知会出现在通知栏,但是不会弹出来。
      priority: Priority.high, //优先级
    );

    const NotificationDetails details = NotificationDetails(
      android: androidDetails, //安卓配置
      iOS: DarwinNotificationDetails(), //IOS配置:使用默认
    );

    await flutterLocalNotificationsPlugin.show(
      _notificationId, //通知ID
      '基础通知', //通知标题
      '这是一个简单的通知示例', //通知内容
      details, //通知详细配置
      payload: 'basic_notification', //自定义数据
    );
  }

6.设计UI页面

Dart 复制代码
 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        padding: const EdgeInsets.all(20),
        children: [
          // 基础通知
          _buildNotificationButton(
            '基础通知',
            Icons.notifications,
            _showBasicNotification,
            color: Colors.blue,
          ),
        ],
      ),
    );
  }
相关推荐
浮江雾10 小时前
Flutter第三节----Dart中的数据类型
android·开发语言·学习·flutter·入门·函数
又菜又爱coding10 小时前
Flutter Android 无线调试No supported devices connected
flutter
心中有国也有家12 小时前
AtomGit Flutter 鸿蒙客户端:初始化流水线
学习·flutter·华为·harmonyos
ZZZMMM.zip1 天前
基于鸿蒙HarmonyOS NEXT开发AI英语口语应用:智能口语练习新体验与鸿蒙Flutter框架跨端实
人工智能·flutter·华为·harmonyos·鸿蒙·鸿蒙系统
心中有国也有家1 天前
AtomGit Flutter 鸿蒙客户端:白噪音场景的视觉设计
学习·flutter·华为·harmonyos
心中有国也有家1 天前
AtomGit Flutter 鸿蒙客户端:呼吸练习的完整生命周期
学习·flutter·华为·harmonyos
心中有国也有家1 天前
AtomGit Flutter 鸿蒙客户端:呼吸球动画
学习·flutter·华为·harmonyos
心中有国也有家1 天前
AtomGit Flutter 鸿蒙客户端:呼吸练习的三种科学模式
学习·flutter·华为·harmonyos
yuanlaile1 天前
前端转 Flutter 自学完整规划,避开跨栈思维转换误区
前端·flutter·flutter跨平台开发
姑苏倾城客1 天前
Flutter中,html 与 dart 桥接沟通
javascript·flutter·html