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,
          ),
        ],
      ),
    );
  }
相关推荐
shankss4 小时前
Flutter 下拉刷新库 pull_to_refresh_plus 设计与实现分析
flutter
忆江南20 小时前
iOS 深度解析
flutter·ios
明君8799721 小时前
Flutter 实现 AI 聊天页面 —— 记一次 Markdown 数学公式显示的踩坑之旅
前端·flutter
恋猫de小郭1 天前
移动端开发稳了?AI 目前还无法取代客户端开发,小红书的论文告诉你数据
前端·flutter·ai编程
MakeZero1 天前
Flutter那些事-交互式组件
flutter
shankss1 天前
pull_to_refresh_simple
flutter
shankss1 天前
Flutter 下拉刷新库新特性:智能预加载 (enableSmartPreload) 详解
flutter
SoaringHeart3 天前
Flutter调试组件:打印任意组件尺寸位置信息 NRenderBox
前端·flutter
九狼3 天前
Flutter URL Scheme 跨平台跳转
人工智能·flutter·github
_squirrel3 天前
记录一次 Flutter 升级遇到的问题
flutter