[flutter] 플러터 Stepper를 사용하여 사용자가 선택한 기간만큼의 시간 간격으로 알림을 설정하는 기간 설정 애플리케이션을 만들어보자.

07 Dec 2023

flutter

이번 튜토리얼에서는 플러터의 Stepper 위젯을 사용하여 사용자가 원하는 기간만큼의 시간 간격으로 알림을 설정하는 애플리케이션을 만들어보려고 합니다. 애플리케이션은 사용자가 시작일과 종료일을 선택하고, 선택한 기간만큼의 알림을 설정할 수 있습니다.

필요한 패키지 가져오기

프로젝트를 시작하기 전에, 플러터에서 제공하는 flutter_local_notifications 패키지를 설치해야 합니다. 알림 기능을 사용하기 위해 이 패키지가 필요합니다. 다음 명령어를 사용하여 패키지를 설치하세요.

flutter pub add flutter_local_notifications

애플리케이션 구조 설정

먼저, 애플리케이션의 구조를 설정해보겠습니다. 다음과 같이 폴더를 생성하고 파일을 추가하세요.

lib/
  |- main.dart
  |- screens/
      |- home_screen.dart

main.dart 파일은 애플리케이션을 실행하는 진입점이 되는 파일이고, home_screen.dart 파일은 애플리케이션의 주 화면을 담당합니다.

홈 화면 구현하기

home_screen.dart 파일을 열고, 다음과 같이 코드를 작성하세요.

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _currentStep = 0;
  String _startDate = '';
  String _endDate = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('기간 설정'),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            Stepper(
              currentStep: _currentStep,
              onStepTapped: (step) {
                setState(() {
                  _currentStep = step;
                });
              },
              onStepContinue: () {
                setState(() {
                  if (_currentStep < 2) {
                    _currentStep++;
                  }
                });
              },
              onStepCancel: () {
                setState(() {
                  if (_currentStep > 0) {
                    _currentStep--;
                  }
                });
              },
              steps: [
                Step(
                  title: Text('시작일'),
                  content: TextFormField(
                    onChanged: (value) {
                      setState(() {
                        _startDate = value;
                      });
                    },
                  ),
                ),
                Step(
                  title: Text('종료일'),
                  content: TextFormField(
                    onChanged: (value) {
                      setState(() {
                        _endDate = value;
                      });
                    },
                  ),
                ),
              ],
            ),
            ElevatedButton(
              onPressed: () {
                // 알림 설정 로직 추가
              },
              child: Text('알림 설정'),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드는 HomeScreen 클래스를 정의하고, Stepper 위젯을 사용하여 단계별로 시작일과 종료일을 입력받는 화면을 구성합니다. 사용자가 각 단계를 완료하면, _startDate와 _endDate 변수에 사용자의 입력값이 저장됩니다.

애플리케이션 실행하기

이제 애플리케이션을 실행해보도록 합니다. main.dart 파일을 열고, 다음과 같이 코드를 작성하세요.

import 'package:flutter/material.dart';
import 'package:your_app/screens/home_screen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '알림 설정',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomeScreen(),
    );
  }
}

위 코드는 애플리케이션의 진입점인 main() 함수를 정의하고, MyApp 클래스에서 HomeScreen을 실행하도록 구성합니다.

이제 애플리케이션을 실행해보세요! 시작일과 종료일을 선택하고, 알림 설정 버튼을 눌러서 알림을 설정할 수 있습니다.

결론

이번 튜토리얼에서는 플러터의 Stepper 위젯을 사용하여 사용자가 선택한 기간만큼의 시간 간격으로 알림을 설정하는 애플리케이션을 만들어보았습니다. 이 애플리케이션을 통해 플러터에서 Stepper 위젯을 다루는 방법과 알림 설정 기능을 구현하는 방법을 배울 수 있습니다.

더 많은 정보를 원하실 경우 플러터 공식 문서를 참고하세요.