Flutter推送通知插件 airship_flutter 的使用

资源

• 入门指南
• API 文档

问题反馈

如果您在集成或使用此模块时遇到任何问题，请访问 Airship 支持页面。

示例 Demo

下面是一个完整的示例，展示了如何在 Flutter 应用中使用 airship_flutter 插件来处理推送通知。

主文件 main.dart

import 'package:flutter/material.dart' hide Notification;
import 'package:airship_flutter/airship_flutter.dart';
import 'package:flutter/services.dart' show DeviceOrientation, SystemChrome;

// 导入其他页面和样式
import 'styles.dart';
import 'screens/home.dart';
import 'screens/message_center.dart';
import 'screens/preference_center.dart';
import 'screens/settings.dart';

// Supported deep links
const String home_deep_link = "home";
const String message_center_deep_link = "message_center";
const String settings_deep_link = "settings";

@pragma('vm:entry-point')
Future<void> backgroundMessageHandler(PushReceivedEvent event) async {
  debugPrint("Background Push Received $event");
}

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);

  var config = AirshipConfig(
    androidConfig: AndroidConfig(
        notificationConfig: AndroidNotificationConfig(
      icon: "ic_notification",
    )),
    defaultEnvironment: ConfigEnvironment(
        appKey: "APP_KEY",
        appSecret: "APP_SECRET",
        logLevel: LogLevel.verbose,
        ios: IOSEnvironment(logPrivacyLevel: AirshipLogPrivacyLevel.public)),
  );

  Airship.takeOff(config);
  Airship.push.android.setBackgroundPushReceivedHandler(backgroundMessageHandler);

  Airship.push.iOS.setForegroundPresentationOptions([
    IOSForegroundPresentationOption.banner,
    IOSForegroundPresentationOption.list
  ]);
  Airship.contact.identify("FlutterUser");

  Airship.messageCenter.setAutoLaunchDefaultMessageCenter(false);
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late TabController controller;
  final GlobalKey<NavigatorState> key = GlobalKey();

  @override
  void initState() {
    super.initState();
    controller = TabController(length: 4, vsync: this);
    initPlatformState();
    addFlutterTag();
    trackFeatureFlagInteraction();
  }

  static void trackFeatureFlagInteraction() {
    Airship.featureFlagManager.flag("rad_flag").then((flag) {
      Airship.featureFlagManager.trackInteraction(flag);
    }).catchError((e) {
      debugPrint('Error: $e');
    });
  }

  static void addFlutterTag() {
    Airship.channel.addTags(["flutter"]);
  }

  Future<void> initPlatformState() async {
    Airship.push.onPushReceived.listen((event) {
      debugPrint('Push Received $event');
    });

    Airship.push.onNotificationResponse.listen((event) {
      debugPrint('Notification Response $event');
    });

    Airship.push.onPushTokenReceived.listen((event) {
      debugPrint('Push token received $event');
    });

    Airship.push.onNotificationStatusChanged.listen((event) {
      debugPrint('Notification status changed $event');
    });

    Airship.push.iOS.onAuthorizedSettingsChanged.listen((event) {
      debugPrint('Authorized settings changed $event');
    });

    Airship.push.iOS.authorizedNotificationSettings.then((value) =>
        debugPrint("authorizedNotificationSettings $value"));
    Airship.push.iOS.authorizedNotificationStatus.then((value) =>
        debugPrint("authorizedNotificationStatus $value"));

    Airship.onDeepLink.listen((event) {
      const home_tab = 0;
      const message_tab = 1;
      const settings_tab = 2;

      switch (event.deepLink) {
        case home_deep_link:
          controller.animateTo(home_tab);
          break;
        case message_center_deep_link:
          controller.animateTo(message_tab);
          break;
        case settings_deep_link:
          controller.animateTo(settings_tab);
          break;
      }
    });

    Airship.inApp.onEmbeddedInfoUpdated
        .listen((event) => debugPrint('Embedded info updated $event'));

    Airship.messageCenter.onInboxUpdated
        .listen((event) => debugPrint('Inbox updated $event'));

    Airship.messageCenter.onDisplay.listen((event) {
      key.currentState?.push(MaterialPageRoute<void>(builder: (BuildContext context) {
        return event.messageId != null
            ? MessageView(messageId: event.messageId ?? "")
            : SizedBox();
      }));
    });

    Airship.channel.onChannelCreated.listen((event) {
      debugPrint('Channel created $event');
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      navigatorKey: key,
      title: "Airship Sample App",
      theme: ThemeData(
        primaryColor: Styles.borders,
        colorScheme: ColorScheme.fromSwatch().copyWith(
          secondary: Styles.airshipBlue,
        ),
        switchTheme: SwitchThemeData(
          trackColor: WidgetStateProperty.all(Styles.airshipBlue),
        ),
      ),
      initialRoute: "/",
      routes: {
        '/': (context) => tabBarView(),
      },
    );
  }

  Widget bottomNavigationBar() {
    return Container(
      color: Styles.borders,
      child: SafeArea(
        bottom: true,
        child: Material(
          color: Colors.transparent,
          child: Container(
            color: Styles.borders,
            child: TabBar(
              indicatorColor: Styles.airshipRed,
              unselectedLabelColor: Colors.grey,
              labelColor: Styles.airshipBlue,
              tabs: const <Tab>[
                Tab(icon: Icon(Icons.home)),
                Tab(icon: Icon(Icons.inbox)),
                Tab(icon: Icon(Icons.menu)),
                Tab(icon: Icon(Icons.settings)),
              ],
              controller: controller,
            ),
          ),
        ),
      ),
    );
  }

  Widget tabBarView() {
    return PopScope(
      onPopInvoked: null,
      child: Scaffold(
        backgroundColor: Styles.borders,
        body: TabBarView(
          controller: controller,
          children: const <Widget>[
            Home(),
            MessageCenter(),
            PreferenceCenter(),
            Settings()
          ],
        ),
        bottomNavigationBar: bottomNavigationBar(),
      ),
    );
  }
}

样式文件 styles.dart

class Styles {
  static const Color borders = Color(0xFFECECEC);
  static const Color airshipBlue = Color(0xFF007AFF);
  static const Color airshipRed = Color(0xFFD32F2F);
}

其他页面

你需要创建以下页面：

• home.dart
• message_center.dart
• preference_center.dart
• settings.dart

这些页面可以根据你的应用需求进行定制。上面的代码已经包含了对这些页面的基本引用。

配置

确保你已经在 AndroidManifest.xml 和 Info.plist 中正确配置了推送通知权限，并且在 Airship 控制台中设置了正确的应用密钥和密钥。

通过以上步骤，你应该能够在 Flutter 应用中成功集成并使用 airship_flutter 插件来处理推送通知。