본문 바로가기
Flutter

[Flutter] App Badge 사용하는 방법. (flutter_new_badger)

by 개발_블로그 2025. 2. 10.
반응형

 

오늘은 Flutter 에서 flutter_new_badger 를 사용하여 App Badge 를 사용하는 방법을 포스팅하겠습니다. 

 

 

1. 최신버전을 pubspec.yaml 파일에 추가 현재는 1.1.0 입니다.

flutter_new_badger: ^1.1.0

 

https://pub.dev/packages/flutter_new_badger

 

flutter_new_badger | Flutter package

A flutter project to handle app icon badges for iOS, macOS and android

pub.dev

 

 

2.기본사용법은 다음과 같습니다. 

 

1. Set 하는 방법 

FlutterNewBadger.setBadge(5);

 

2. Reset 하는 법 

FlutterNewBadger.removeBadge();

 

3. get 하는 법 

int? badge = await FlutterNewBadger.getBadge();

 

4. Incremet 하는 법 

int? int = await FlutterNewBadger.incrementBadgeCount();

 

5. Decrement 하는 법 

int? int = await FlutterNewBadger.decrementBadgeCount();

 

 

3.아래는 공식문서에 있는 코드입니다.

아래를 보면서 정적으로 코드를 작성할 수 있습니다. 

// Copyright 2024 Simon Braillard
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import 'dart:developer' as developer;

import 'package:flutter/material.dart';
import 'package:flutter_new_badger/flutter_new_badger.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int? badgeCount;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text('New badger plugin'),
              const SizedBox(height: 16),
              Text('Badge count: $badgeCount'),
              const SizedBox(height: 16),
              ElevatedButton(
                onPressed: () async {
                  await FlutterNewBadger.setBadge(5);
                  setState(() {
                    badgeCount = 5;
                  });
                  developer.log('Badge set', name: 'FlutterNewBadger');
                },
                child: const Text('Set 5 badges'),
              ),
              const SizedBox(height: 16),
              ElevatedButton(
                onPressed: () async {
                  await FlutterNewBadger.removeBadge();
                  setState(() {
                    badgeCount = null;
                  });
                  developer.log('Badge removed', name: 'FlutterNewBadger');
                },
                child: const Text('Remove badge'),
              ),
              const SizedBox(height: 16),
              ElevatedButton(
                onPressed: () async {
                  badgeCount = await FlutterNewBadger.incrementBadgeCount();
                  setState(() {});
                  developer.log('Badge count incremented: $badgeCount',
                      name: 'FlutterNewBadger');
                },
                child: const Text('Increment badge count'),
              ),
              const SizedBox(height: 16),
              ElevatedButton(
                onPressed: () async {
                  badgeCount = await FlutterNewBadger.decrementBadgeCount();
                  setState(() {});
                  developer.log('Badge count decremented: $badgeCount',
                      name: 'FlutterNewBadger');
                },
                child: const Text('Decrement badge count'),
              ),
              const SizedBox(height: 16),
              ElevatedButton(
                onPressed: () async {
                  badgeCount = await FlutterNewBadger.getBadge();
                  setState(() {});
                  developer.log('Badge count : $badgeCount',
                      name: 'FlutterNewBadger');
                },
                child: const Text('Get badge count'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

 

다음 포스팅에서는 SharedPreferences 를 사용하여서 동적으로 앱 아이콘 뱃지 기능이 작동하도록 설정해보겠습니다. 

반응형