flutter date picker 소스코드 (2023.09.)

이번 시간에는 flutter date picker를 구현해 보도록 하겠습니다.

flutter date picker

date picker는 위젯은 flutter에서 기본으로 제공하는 위젯으로 날짜를 선택할 때 주로 사용됩니다. 유려한 인터페이스와 함께 캘린더 선택과 직접입력의 두가지 방법을 동시에 지원하고 있습니다. 만들고자 하는 기능은 아래와 같습니다.

코드 설명

MaterialApp 위젯의 테마 프로퍼티 중 brightness를 Brightness.dark로 설정하여 깔끔한 분위기의 다크모드를 바로 적용시킬 수 있습니다.

DateTime 형식의 date 변수를 설정하고 현재날짜를 적용합니다. 이 변수는 이후에 date_picker를 이용하여 날짜를 선택하면 선택한 날짜를 입력하는 변수로 활용합니다.

화면에는 앞서 현재 날짜로 설정한 date 변수의 연, 달, 일에 해당하는 값을 각각 받아서 텍스트로 입력합니다.

날짜를 표시한 텍스트 아래에 EleavtedButton 위젯을 생성합니다. 클릭하였을 때 DatePicker가 뜨도록 설정합니다. DatePicker에는 초기값(initialDate), 시작연도(firstDate), 마지막연도(lastDate)값을 설정할 수 있습니다.

DatePicker는 선택하고 난 뒤 OK 버튼을 누르거나 Cancel 버튼을 눌러서 취소할 수 있는데 Cancel 버튼을 누를 시에 Null값이 리턴됩니다. 이를 대비해서 if 문을 만들어 Null이 리턴되는 상황을 대비합니다.

소스코드 전체 보기

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(brightness: Brightness.dark),
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  DateTime date = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('date Picker')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('${date.year}/${date.month}/${date.day}',
                style: const TextStyle(fontSize: 32)),
            const SizedBox(height: 16),
            ElevatedButton(
              child: const Text(
                'Select Date',
              ),
              onPressed: () async {
                DateTime? newDate = await showDatePicker(
                  context: context,
                  initialDate: date,
                  firstDate: DateTime(1900),
                  lastDate: DateTime(2100),
                );

                // if 'CANCEL' => null
                if (newDate == null) return;

                // if 'OK' => DateTime
                setState(() => date = newDate);
              },
            ),
          ],
        ),
      ),
    );
  }
}