[052] 플러터 (Flutter) 배우기 - showDatePicker 사용하여 날짜 선택하기

안녕하세요~ totally 개발자입니다.

 

showDatePicker

 

어플을 개발할 때 날짜를 입력 받아야 하는 경우가 종종 있는데 플러터에서는 showDatePicker을 통해 간단하게 구현할 수 있습니다. 바로 실습을 통해 살펴보도록 하겠습니다.

 

Step 1: 라이브러리 설치 필요 없이 바로 구현 가능합니다. DateTime? _selectedDate; 처럼 변수를 미리 선언해줍니다.

 

 

Step 2: showDatePicker 부분을 구현합니다 initialDate는 초기 날짜 세팅, firstDate와 lastDate는 선택 가능한 날짜의 범위를 정하는 것입니다. 그리고 then을 통해 위에 선언된 _selectedDate 변수에 상태를 업데이트해주면 됩니다.

 

 

Step 3: 날짜를 선택한 후 선택한 날짜를 보여줄 수 있도록 아래처럼 구현하시면 됩니다. 저는 split(" ")[0] 방식으로 시간은 제외하고 날짜만 출력했는데 다른 방법으로도 구현할 수 있으니 참고만 하시기 바랍니다. 

 

 

 

Step 4: 결과는 아래와 같습니다.

 

 

 

[전체 소스 코드]

 

	import 'package:flutter/material.dart';
	void main() {
	runApp(const MyApp());
	}
	class MyApp extends StatelessWidget {
	const MyApp({Key? key}) : super(key: key);
	@override
	Widget build(BuildContext context) {
	return const MaterialApp(title: 'Flutter App', home: HomePage());
	}
	}
	class HomePage extends StatefulWidget {
	const HomePage({Key? key}) : super(key: key);
	@override
	State<HomePage> createState() => _HomePageState();
	}
	class _HomePageState extends State<HomePage> {
	DateTime? _selectedDate;
	@override
	void initState() {
	super.initState();
	}
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: const Text('Flutter App'),
	),
	body: Center(
	child: Column(
	mainAxisSize: MainAxisSize.min,
	children: [
	ElevatedButton(
	onPressed: () {
	showDatePicker(
	context: context,
	initialDate: DateTime.now(),
	firstDate: DateTime(1900),
	lastDate: DateTime.now(),
	).then((selectedDate) {
	setState(() {
	_selectedDate = selectedDate;
	});
	});
	},
	child: const Text("날짜 선택"),
	),
	const SizedBox(height: 30),
	Text(
	_selectedDate != null
	? _selectedDate.toString().split(" ")[0]
	: "날짜가 아직 선택되지 않음",
	style: const TextStyle(fontSize: 22)),
	],
	),
	),
	);
	}
	}

view raw 052_main.dart hosted with ❤ by GitHub