[flutter] 플러터(expandable)을 활용한 푸시 알림 서비스 개발

04 Dec 2023

flutter

푸시 알림은 모바일 애플리케이션에서 중요하고 유용한 기능 중 하나입니다. 사용자에게 중요한 업데이트나 이벤트 정보를 실시간으로 전달할 수 있어 앱의 사용성을 향상시킬 수 있습니다. 이번 블로그 포스트에서는 Flutter의 expandable 위젯을 활용하여 푸시 알림 서비스를 개발하는 방법에 대해 알아보겠습니다.

1. 푸시 알림 서비스 개발을 위한 패키지 추가

푸시 알림 서비스를 개발하기 위해서는 firebase_messaging 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요.

dependencies:
  firebase_messaging: ^10.0.0

패키지 추가 후에는 flutter pub get 명령어를 실행하여 패키지를 다운로드 받아주세요.

2. 푸시 알림 수신 설정

푸시 알림을 받기 위해서는 Firebase 프로젝트를 설정해야 합니다. Firebase 콘솔에서 앱을 생성하고, Firebase 설정 파일을 다운로드하여 프로젝트에 추가해야 합니다.

설정 파일 추가 후에는 main.dart 파일에 다음과 같은 코드를 추가해주세요.

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

  runApp(MyApp());
}

위 코드는 앱이 초기화될 때 Firebase를 초기화하고 백그라운드에서 수신된 푸시 알림을 처리하는 함수를 등록합니다.

3. 푸시 알림 구현

푸시 알림을 화면에 표시하기 위해서는 firebase_messaging 패키지를 활용해야 합니다. 앱의 메인 위젯에서 FirebaseMessaging 인스턴스를 생성하고, configure 함수로 푸시 알림을 처리할 수 있도록 설정해주세요. 이후 onMessage 콜백에서 알림을 처리하고, firebase_messaging 패키지의 UI를 통해 알림을 화면에 보여줄 수 있습니다.

class MyApp extends StatelessWidget {
  final Future<FirebaseApp> _initialization = Firebase.initializeApp();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Push Notification Demo',
      home: FutureBuilder(
        future: _initialization,
        builder: (BuildContext context, AsyncSnapshot<FirebaseApp> snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return PushNotificationWidget();
          }
          return SplashScreen();
        },
      ),
    );
  }
}

class PushNotificationWidget extends StatefulWidget {
  @override
  _PushNotificationWidgetState createState() => _PushNotificationWidgetState();
}

class _PushNotificationWidgetState extends State<PushNotificationWidget> {
  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;

  @override
  void initState() {
    super.initState();

    _firebaseMessaging.configure(
      onMessage: (Map<String, dynamic> message) async {
        // 알림 메시지 처리
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    // 푸시 알림 UI 구현
  }
}

onMessage 콜백에서는 푸시 알림을 수신하고 처리하는 로직을 추가할 수 있습니다. 이 콜백은 앱이 실행 중인 상태에서 푸시 알림을 수신할 때 호출되며, 앱이 포그라운드에 있는 경우에도 실행됩니다.

4. 푸시 알림 UI 개선하기

Flutter에서 푸시 알림을 사용자 친화적인 방식으로 표시하기 위해 expandable 위젯을 사용할 수 있습니다. expandable 패키지는 푸시 알림을 확장하여 더 많은 정보를 표현할 수 있도록 합니다.

pubspec.yaml 파일에 expandable 패키지를 추가해주세요.

dependencies:
  expandable: ^5.0.0

위젯의 코드에 expandable을 적용해주세요.

import 'package:expandable/expandable.dart';

// ...

class _PushNotificationWidgetState extends State<PushNotificationWidget> {
  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;
  final _expandableController = ExpandableController();
  
  @override
  void initState() {
    super.initState();

    _firebaseMessaging.configure(
      // ...
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        return ExpandableNotifier(
          key: Key('notification_$index'),
          controller: _expandableController,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Card(
              child: ExpandablePanel(
                header: Text(
                  '푸시 알림 $index',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                collapsed: Text('알림 내용을 간단하게 보여줍니다.'),
                expanded: Column(
                  children: [
                    Text('이미지나 자세한 정보를 펼쳐서 보여줄 수 있습니다.'),
                    // 추가적인 정보를 표시할 수 있는 위젯을 추가하세요.
                  ],
                ),
              ),
            ),
          ),
        );
      },
      itemCount: 10,
    );
  }
}

위 예제에서는 ExpandableNotifier, ExpandablePanel 위젯을 사용하여 푸시 알림을 확장 가능한 카드 형태로 표현했습니다. 사용자가 카드를 터치하면 푸시 알림의 내용이 확장되어 더 많은 정보를 표시할 수 있습니다.

결론

Flutter의 firebase_messaging 패키지와 expandable 패키지를 활용하여 푸시 알림 서비스를 개발하는 방법에 대해 알아보았습니다. 푸시 알림은 앱의 사용성을 높이고 사용자 경험을 향상시킬 수 있는 강력한 기능입니다. 이를 활용하여 앱을 개발하면 사용자에게 좋은 경험을 전달할 수 있을 것입니다.

더 자세한 내용은 아래 참고자료를 참고해주세요.