플러터 날짜 선택기 구현

날짜 선택기란 무엇입니까?

날짜 선택기 위젯을 사용하면 지정된 형식으로 날짜를 쉽게 선택할 수 있습니다. Date Picker은 원하는 날짜로 빠르게 이동할 수 있는 일, 월 및 연도 보기 옵션을 제공합니다. 날짜 선택 컨트롤은 많은 데이터 유효성 검사를 자동으로 처리하기 때문에 날짜 작업을 쉽게 해줍니다.

프로젝트 요구 사항에 기반한 개발자로서 프로젝트에 날짜 선택기 위젯을 추가해야 할 수 있습니다.

전제 조건

이 자습서를 완료하려면 다음이 필요합니다.

다운로드 및 설치Flutter .

Android Studio 또는 Visual Studio Code을 다운로드하고 설치하려면 . Android Studio는 Flutter를 지원하는 기능이 풍부한 통합 IDE를 제공합니다. Visual Studio Code는 더 가볍지만 기능적인 지원을 제공합니다.

코드 편집기에 다음 플러그인을 설치하는 것이 좋습니다.

Android Studio용 Flutter 및 Dart 플러그인이 설치되었습니다.

Visual Studio Code용 Flutter 확장이 설치되었습니다.

1단계 - 프로젝트 설정

설정을 따르기 위해 새로운 Flutter 앱 프로젝트를 생성하게 됩니다.

Flutter에 대한 환경을 설정했으면 다음을 실행하여 새 애플리케이션을 만들 수 있습니다.

C:\Users\PC>flutter create flutter_date_picker

새 프로젝트 디렉토리로 이동하고 vscode로 엽니다.
lib/main.dart를 열고 lib/main.dart의 내용을 다음 코드 조각으로 바꿉니다.

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


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Flutter APP",
      theme: ThemeData(primarySwatch: Colors.blue),
      home:Homepage() ,
    );
  }
}

2단계 - TextField 위젯 추가

ui_home.dart 디렉토리에 새 다트 파일lib을 만들고 lib/ui_home.dart의 내용을 다음 코드 스니펫으로 바꿉니다.

import 'package:flutter/material.dart';

class Homepage extends StatefulWidget {
  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  TextEditingController textController;

  @override
  void initState() {
    super.initState();
    textController = TextEditingController();
  }

  @override
  void dispose() {
    super.dispose();
    textController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flutter APP")),
      body: Container(
        padding: EdgeInsets.all(10),
        child: TextFormField(
          controller: textController,
          onTap: () {},
          decoration: const InputDecoration(
            border: OutlineInputBorder(),
            labelText:'Start Date',
            hintText:"Start Date",
          ),
        ),
      ),
    );
  }

}

3단계 - 캘린더 기능 만들기

여기에서 원하는 날짜 형식으로 달력 위젯을 표시하는 함수pickDate를 만들었습니다.

Future pickDate(BuildContext context) async{
    final initialDate = DateTime.now();
    final newDate = await showDatePicker(
        context: context,
        initialDate: initialDate,
        firstDate: DateTime(DateTime.now().year -5),
        lastDate: DateTime(DateTime.now().year + 5)
    );
    if (newDate == null) return;
    setState(() {
      textController.text = '${newDate.day}/${newDate.month}/${newDate.year}';
    });
  }

4단계 - 표시

다음으로 앞서 생성한 textfield 위젯의 onclick 이벤트에 pickdate 함수를 추가했습니다.

import 'package:flutter/material.dart';

class Homepage extends StatefulWidget {
  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  TextEditingController textController;

  @override
  void initState() {
    super.initState();
    textController = TextEditingController();
  }

  @override
  void dispose() {
    super.dispose();
    textController.dispose();
  }

  Future pickDate(BuildContext context) async{
    final initialDate = DateTime.now();
    final newDate = await showDatePicker(
        context: context,
        initialDate: initialDate,
        firstDate: DateTime(DateTime.now().year -5),
        lastDate: DateTime(DateTime.now().year + 5)
    );
    if (newDate == null) return;
    setState(() {
      textController.text = '${newDate.day}/${newDate.month}/${newDate.year}';
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flutter APP")),
      body: Container(
        padding: EdgeInsets.all(10),
        child: TextFormField(
          controller: textController,
          onTap: () {
            pickDate(context);
          },
          decoration: const InputDecoration(
            border: OutlineInputBorder(),
            labelText:'Start Date',
            hintText:"Start Date",
          ),
        ),
      ),
    );
  }

}

코드를 컴파일하고 에뮬레이터에서 실행합니다.

결론

이 튜토리얼에서 우리는 flutter에서 날짜 선택기 위젯을 구현하는 방법을 보여줄 수 있었습니다. 도움이 되었기를 바랍니다.