[flutter] 플러터 커퍼티노 스테퍼를 이용한 알림 지속 시간 조절 기능 구현하기

05 Dec 2023

flutter

플러터는 다양한 UI 요소를 제공하는데, 그 중 하나인 커퍼티노 스테퍼를 이용하여 알림의 지속 시간을 조절하는 기능을 구현해보겠습니다.

스테퍼 위젯 설치하기

먼저, 커퍼티노 스테퍼 위젯을 사용하기 위해 cupertino_icons 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요.

dependencies:
  cupertino_icons: ^1.0.2

그리고 패키지를 업데이트해줍니다.

flutter pub get

알림 지속 시간 조절 기능 구현하기

main.dart 파일을 열고 import 'package:flutter/cupertino.dart'; 를 추가해주세요.
main 함수 내부에서 runApp 메서드를 호출하는 코드 위에, 다음과 같이 CupertinoApp을 사용한 앱을 구성해주세요.

void main() {
  runApp(CupertinoApp(
    home: NotificationScreen(),
  ));
}

lib 폴더에 notification_screen.dart 파일을 생성하고, 아래 코드를 추가해주세요.

import 'package:flutter/cupertino.dart';

class NotificationScreen extends StatefulWidget {
  @override
  _NotificationScreenState createState() => _NotificationScreenState();
}

class _NotificationScreenState extends State<NotificationScreen> {
  double _duration = 0;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('알림 지속 시간 조절'),
      ),
      child: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Text(
                '알림 지속 시간: ${_duration.toInt()}초',
                style: TextStyle(fontSize: 20),
                textAlign: TextAlign.center,
              ),
              SizedBox(height: 16),
              CupertinoSlider(
                value: _duration,
                onChanged: (value) {
                  setState(() {
                    _duration = value;
                  });
                },
                min: 0,
                max: 60,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드는 _NotificationScreenState 클래스에 duration 변수를 정의하고, 커퍼티노 슬라이더를 사용하여 값을 변경할 수 있는 UI를 구성한 것입니다. 설정한 값은 _duration 변수에 저장되며, 알림 지속 시간을 나타내는 텍스트 위젯과 슬라이더를 함께 화면에 표시됩니다.

main.dart 파일에서 home 프로퍼티를 NotificationScreen으로 변경해주세요.

void main() {
  runApp(CupertinoApp(
    home: NotificationScreen(),
  ));
}

앱을 실행하고 커퍼티노 스테퍼를 움직여 알림의 지속 시간을 조절해보세요. 알림 지속 시간이 변경됨에 따라 텍스트 위젯의 내용도 동적으로 업데이트 됨을 확인할 수 있습니다.

이제 플러터 커퍼티노 스테퍼를 이용하여 알림의 지속 시간을 조절하는 기능을 구현하는 방법을 알게 되었습니다. 이 기능을 활용하여 알림 관련 애플리케이션을 개발할 수 있을 것입니다.

더 자세한 사항은 Flutter 공식 문서를 참조해주세요.