[Flutter] Flutter Local Notification 활용기 (Android HTML Format notification)

Flutter Local Notification을 응용하여 PUSH 알림을 표출하던중, 문득 그런 생각이 들더군요.

PUSH를 좀 더 이쁘게 꾸밀 수는 없을까?

그래서 관련 문서를 찾아보니, HTML 마크업을 사용 가능하다는 글을 보게 되었고,

Flutter Local Notification 개발문서에도 해당기능이 구현이 되어있다는 글을 보게되었습니다.

기본적인 코드는 생략하고 아래 예시로 보겠습니다.

String title = 'PUSH 제목';
  String subTitle = 'PUSH 부제목 및 요약내용';
  String body = """<div>
<h2>What is Lorem Ipsum?</h2>
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>""";

  flutterLocalNotificationsPlugin.show(
    0x70000009,
    title,
    subTitle,
    NotificationDetails(
      android: AndroidNotificationDetails(
          channel.id,
          channel.name,
          channelDescription: channel.description,
          importance: Importance.max,
          priority: Priority.high,
          styleInformation: BigTextStyleInformation(
              body,
              htmlFormatBigText: true,
              contentTitle: subTitle,
              summaryText: title
          )
      ),
    ),
  );

 

위의 예시를 보시면, FlutterLocalNotification.show() 에는 styleInformation 이라는 인자가 존재합니다.

해당 인자에 BigTextStyleInformation을 적용시키게 되면, 푸시를 확장할시, 

위의, 이미지처럼 Markup이 적용된 내용을 확인해볼 수 있습니다.

이때 중요한건 htmlFormat 관련 옵션을 확인하여 true값을 세팅해주는것입니다.

그 외에도 styleInformation을 이용하면 큰 이미지 등등 여러가지 구현할 수 있습니다.