[flutter] 플러터 커퍼티노 스테퍼를 이용한 날짜 선택 기능 구현하기

05 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 프레임워크로, 크로스 플랫폼 모바일 앱을 빌드할 수 있습니다. 이번 글에서는 플러터의 커퍼티노 스테퍼(Cupertino Stepper)를 이용하여 간단한 날짜 선택 기능을 구현하는 방법을 알아보겠습니다.

커퍼티노 스테퍼란?

커퍼티노 스테퍼는 iOS 스타일의 응용 프로그램 스텝을 나타내는 위젯입니다. 사용자가 값을 증가 또는 감소시킬 수 있는 UI 요소를 제공합니다.

날짜 선택 기능 구현하기

우선 플러터 프로젝트를 생성하고, cupertino_icons 패키지를 pubspec.yaml 파일에 추가해주세요. 그리고 다음과 같은 코드로 날짜 선택 기능을 구현할 수 있습니다.

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

class DatePickerScreen extends StatefulWidget {
  @override
  _DatePickerScreenState createState() => _DatePickerScreenState();
}

class _DatePickerScreenState extends State<DatePickerScreen> {
  DateTime _selectedDate;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('날짜 선택'),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '날짜를 선택하세요:',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 16),
            CupertinoDatePicker(
              mode: CupertinoDatePickerMode.date,
              initialDateTime: DateTime.now(),
              onDateTimeChanged: (DateTime newDate) {
                setState(() {
                  _selectedDate = newDate;
                });
              },
            ),
            SizedBox(height: 16),
            Text(
              '선택한 날짜: ${_selectedDate != null ? _selectedDate.toString().split(' ')[0] : "날짜가 선택되지 않았습니다."}',
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 DatePickerScreen 클래스가 StatefulWidget을 상속하고 있습니다. CupertinoDatePicker 위젯을 사용하여 날짜를 선택할 수 있는 컴포넌트를 생성하고, 선택한 날짜는 _selectedDate 변수에 저장됩니다. 선택한 날짜는 화면에 출력됩니다.

이제 위젯을 앱의 메인 화면에서 호출하기 위해 다음 코드를 main.dart 파일에 추가해주세요.

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import './date_picker_screen.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DatePicker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('메인 화면'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('날짜 선택 페이지로 이동'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => DatePickerScreen()),
            );
          },
        ),
      ),
    );
  }
}

이제 앱을 실행하고 “날짜 선택 페이지로 이동” 버튼을 누르면 날짜를 선택할 수 있는 페이지로 이동합니다.

마무리

위의 예제 코드를 통해 플러터의 커퍼티노 스테퍼를 이용한 간단한 날짜 선택 기능의 구현 방법을 확인하였습니다. 이를 활용하여 더 다양한 기능을 추가하거나 디자인을 커스터마이징할 수 있습니다. 추가로 필요한 기능을 구현하고자 할 경우, 플러터 공식 문서나 커뮤니티에서 참고 자료를 찾아보는 것을 추천합니다.