[flutter] 플러터 DatePicker에 현재 설정된 날짜 표시하기

08 Dec 2023

flutter

안녕하세요! 플러터를 사용하여 DatePicker에 현재 설정된 날짜를 표시하는 방법에 대해 알아보겠습니다.

DatePicker 위젯

플러터에서 기본 제공되는 DatePicker 위젯을 사용하면 사용자가 캘린더에서 날짜를 선택할 수 있습니다. 이때, 현재 설정된 날짜를 표시하기 위해서는 DatePicker 위젯을 초기화할 때 현재 날짜를 기본값으로 설정해주어야 합니다.

아래는 DatePicker 위젯을 사용하여 현재 설정된 날짜를 표시하는 예제 코드입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime _selectedDate = DateTime.now();

  Future<void> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: _selectedDate,
        firstDate: DateTime(2000),
        lastDate: DateTime(2101));
    if (picked != null && picked != _selectedDate)
      setState(() {
        _selectedDate = picked;
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter DatePicker'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("${_selectedDate.toLocal()}".split(' ')[0]),
            SizedBox(
              height: 20.0,
            ),
            ElevatedButton(
              onPressed: () => _selectDate(context),
              child: Text('Select date'),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서 _selectedDate 변수는 현재 설정된 날짜를 나타내며, showDatePicker 함수에서 initialDate로 이를 설정하고 있습니다.

이렇게 하면 DatePicker가 초기화될 때 기본으로 현재 날짜가 선택되어 표시됩니다.

결론

플러터 DatePicker에 현재 설정된 날짜를 표시하는 방법에 대해 알아보았습니다. 날짜를 선택하는 화면에서 기본값으로 현재 날짜를 표시하고자 한다면, 코드에서 showDatePicker 함수의 initialDate를 이용하여 간단히 설정할 수 있습니다. 추가적으로 다양한 설정이나 기능을 적용할 수 있으니 자신의 앱에 맞게 커스터마이징하여 활용해보시기 바랍니다.

참고자료: Flutter - Date and Time Pickers