본문 바로가기
Flutter/Flutter FAQ

Flutter 플러터 앱에 날짜 선택기를 추가하는 올바른 방법은 무엇인가요?, What is the correct way to add date picker in flutter app?

by 베타코드 2023. 5. 30.
반응형

질문


내 앱에서는 회원 가입 페이지를 만들고 있습니다. 그곳에는 생년월일을 추가해야 합니다. 그러나 이를 위한 올바른 방법을 찾지 못하고 있습니다.


답변


사용 방법을 보여주는 간단한 앱:

import 'dart:async';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> 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(2015, 8),
        lastDate: DateTime(2101));
    if (picked != null && picked != selectedDate) {
      setState(() {
        selectedDate = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("${selectedDate.toLocal()}".split(' ')[0]),
            const SizedBox(height: 20.0,),
            ElevatedButton(
              onPressed: () => _selectDate(context),
              child: const Text('날짜 선택'),
            ),
          ],
        ),
      ),
    );
  }
}

그리고 해당 코드를 가진 Dartpad:

https://dartpad.dev/e5a99a851ae747e517b75ac221b73529

반응형

댓글