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,
          ),
        ],
      ),
    );
  }
相关推荐
程序员老刘2 天前
跨平台开发地图 | 2026年6月
flutter·ai编程·客户端
悟空瞎说2 天前
Flutter 架构详解:新手必懂底层原理
flutter
SoaringHeart3 天前
Flutter最佳实践:IM聊天文字链接自动识别跳转
前端·flutter
恋猫de小郭3 天前
KMP / CMP 鸿蒙版本 Beta 发布,他有什么特别之处?
android·前端·flutter
风华圆舞4 天前
Flutter + 鸿蒙 Intents Kit:页面直达能力的完整接入方案
flutter·ui·华为·harmonyos
韩曙亮4 天前
【Flutter】Flutter 组件 ④ ( 组件渲染 的 三棵树理论 | Widget 树 → Element 树 → RenderObject 树 )
flutter·element·widget·renderobject
恋猫de小郭4 天前
Android 17 正式版发布,全新 AI 和各种破坏性更新
android·前端·flutter
kingbal4 天前
Windows:flutter环境搭建
windows·flutter
911hzh4 天前
Flutter MethodChannel 跨端通信框架 zh_native_channel:快速入门、优势分析与 Pigeon 对比
flutter
911hzh4 天前
Flutter 快速搭建新项目:用 Flutter Foundation Kit 一条命令生成带基础架构的 App 模板
flutter