flutter에서 notification을 통해 navigating해보기

flunge·2021년 12월 29일
0

Flutter

목록 보기
5/13

notification을 눌렀을 때 화면 이동을 하는 방법

flutter는 Navigator객체를 이용해 화면이동을 하게 되는데 화면을 이동하기 위해 호출하는 메소드의 인자 중 하나가 BuildContext가 있다. 그런데 BuildContext는 Widget객체가 가지고 있는데 Widget이 아닌 경우 예를 들어 이번 글의 목표처럼 notification을 select했을 경우엔 BuildContext가 없기 때문에 매개 변수를 통해 거쳐거쳐 넘기게 되면 코드가 어지러워진다.

flutter_local_notification

Future<void> init() async{
  print('NotificationController.init');
  FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();

  const AndroidInitializationSettings androidInitializationSettings = AndroidInitializationSettings('@mipmap/ic_launcher');
  final IOSInitializationSettings iosInitializationSettings = IOSInitializationSettings(
    onDidReceiveLocalNotification: onDidReceiveLocalNotification,
  );

  final InitializationSettings initializationSettings = InitializationSettings(
    android: androidInitializationSettings,
    iOS: iosInitializationSettings,
  );

  await flutterLocalNotificationsPlugin.initialize(
    initializationSettings,
    onSelectNotification: selectNotification
  );

  _instance.addListener(() {
    print('hihihihihi');
    
  });
}

flutter_local_notification를 이용하게 되면 위의 초기화 과정을 거쳐야 하는데 그 때 거치는 과정중 하나가 onSelectNotification를 등록하는 과정이다. 이름처럼 notification을 클릭 했을 때 호출된다.

void selectNotification(String? payload) {

}

이 곳에 화면 이동을 위한 로직을 구현하면 된다.

NavigatorKey

Key는 간단하게 flutter에서 각각 위젯을 구분?식별?하기 쓰이는 클래스이고 NavigatorKey가 있다. Navigator에 해당하는 Key객체일 것이다.

주요 기능 중 하나인 알람 기능을 위한 방법으로 생각한게 notification을 반복적으로 띄우고 클릭 시 미션 화면으로 이동하는 방식이다.
이 기능을 구현하기 위해서는
1. fcm메시지의 background 수신
2. notification을 반복적으로 띄우기
3. notification을 클릭 했을 때 미션 화면으로 navigating
이 세가지를 구현 해야한다.
1번은 넘어가고 2, 3번을 구현할 것이다.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static final GlobalKey<NavigatorState> navigatorKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      title: 'A watch is a watch',
      theme: ThemeData(
        primarySwatch: AppColor.cottonCandy,
        backgroundColor: AppColor.white,
        

앱의 가장 상위에 위치한 MaterialApp이 navigatorKey필드를 가지고 있다.
해당 값에 build메소드 위에 선언한 navigatorKey변수를 준다. 이러면 static변수인 navigatorKey변수를 이용해 다른 곳에서 화면이동을 할 수 있다.

void selectNotification(String? payload) {
  MyApp.navigatorKey.currentState!.pushNamed('/mission', arguments:'temp');
}

MyApp.navigatorKey의 최근 상태를 이용해 화면 이동을 한다.

0개의 댓글