flutter如何显示横幅通知

在Flutter中如何实现横幅通知的显示？我正在开发一个应用，需要在用户收到消息时在屏幕顶部显示一个横幅通知，类似于iOS的系统通知样式。请问有没有推荐的插件或实现方案？最好能支持自定义样式和点击事件处理。

2 回复

在Flutter中显示横幅通知，推荐使用 flutter_local_notifications 插件。以下是基本步骤：

  1. 添加依赖：在 pubspec.yaml 中添加：

    dependencies:
  flutter_local_notifications: ^latest_version

  2. 初始化（在 main.dart 中）：

    final FlutterLocalNotificationsPlugin notificationsPlugin = FlutterLocalNotificationsPlugin();

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 配置Android和iOS设置
  const AndroidInitializationSettings androidSettings = AndroidInitializationSettings('@mipmap/ic_launcher');
  const DarwinInitializationSettings iosSettings = DarwinInitializationSettings();
  
  await notificationsPlugin.initialize(
    const InitializationSettings(android: androidSettings, iOS: iosSettings),
  );
  runApp(MyApp());
}

  3. 显示横幅：

    await notificationsPlugin.show(
  0,
  '通知标题',
  '通知内容',
  const NotificationDetails(
    android: AndroidNotificationDetails(
      'channel_id',
      '频道名称',
      importance: Importance.high,
      priority: Priority.high,
    ),
    iOS: DarwinNotificationDetails(
      presentAlert: true,
      presentBadge: true,
      presentSound: true,
    ),
  ),
);

注意：iOS需在 Info.plist 中请求通知权限，Android 8.0+需要创建通知渠道。

更多关于flutter如何显示横幅通知的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中显示横幅通知（通常指应用内通知或系统级通知）可以使用 flutter_local_notifications 插件。以下是具体步骤：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  flutter_local_notifications: ^16.3.0

运行 flutter pub get。

2. 配置权限（仅 Android）

  • 在 android/app/src/main/AndroidManifest.xml 中添加权限：
<uses-permission android:name="android.permission.VIBRATE"/>
<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>

3. 初始化插件

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

final FlutterLocalNotificationsPlugin notificationsPlugin =
    FlutterLocalNotificationsPlugin();

void initializeNotifications() async {
  const AndroidInitializationSettings androidSettings =
      AndroidInitializationSettings('@mipmap/ic_launcher');
  
  const DarwinInitializationSettings iosSettings =
      DarwinInitializationSettings(
        requestAlertPermission: true,
        requestBadgePermission: true,
        requestSoundPermission: true,
      );

  const InitializationSettings settings = InitializationSettings(
    android: androidSettings,
    iOS: iosSettings,
  );

  await notificationsPlugin.initialize(settings);
}

4. 显示横幅通知

Future<void> showBannerNotification() async {
  const AndroidNotificationDetails androidDetails = AndroidNotificationDetails(
    'channel_id',
    'Channel Name',
    channelDescription: 'Channel Description',
    importance: Importance.max,
    priority: Priority.high,
    showWhen: false,
  );

  const DarwinNotificationDetails iosDetails = DarwinNotificationDetails(
    presentAlert: true,
    presentBadge: true,
    presentSound: true,
  );

  const NotificationDetails details = NotificationDetails(
    android: androidDetails,
    iOS: iosDetails,
  );

  await notificationsPlugin.show(
    0, // 通知ID
    '通知标题',
    '通知内容',
    details,
  );
}

使用示例

在 initState 中初始化并触发通知：

@override
void initState() {
  super.initState();
  initializeNotifications();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    showBannerNotification();
  });
}

注意事项

  • iOS：需要配置通知权限，首次使用时会自动请求用户授权。
  • Android 13+：需要动态申请 POST_NOTIFICATIONS 权限。
  • 横幅样式可能因系统版本和设备而异。

通过以上代码即可在 Flutter 应用中显示横幅式通知。

回到顶部