Flutter showDatePicker 함수 : 날짜 선택하기

https://docs.flutter.dev/development/accessibility-and-localization/internationalization 에서 localizations 관련 사항을 추가한다.

 

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # Add this line
    sdk: flutter         # Add this line
  get: ^4.6.5
  intl: ^0.17.0

 

 

import 'package:flutter/material.dart';
import 'dialog/datepicker_page.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
 
void main() {
  runApp(
   const MyApp(),
  );
}
 
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  State<MyApp> createState() => _MyAppState();
}
 
class _MyAppState extends State<MyApp> {
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', 'US'),
        const Locale('ko', 'KO'),
      ],
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DatePickerPage(),
    );
  }
}

 

 

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
 
class DatePickerPage extends StatefulWidget {
  const DatePickerPage({Key? key}) : super(key: key);
 
  @override
  State<DatePickerPage> createState() => _DatePickerPageState();
}
 
class _DatePickerPageState extends State<DatePickerPage> {
  DateTime? _selectedDate;
 
  String getText() {
    if (_selectedDate == null) {
      return 'No date chosen!';
    } else {
      return DateFormat('yyyy-MM-dd').format(_selectedDate!);
    }
  }
 
  Future _pickDateDialog(BuildContext context) async {
    final initialDate = DateTime.now();
    final pickedDate = await showDatePicker(
      context: context,
      initialDate: initialDate,
      firstDate: DateTime(DateTime.now().year - 3),
      lastDate: DateTime(DateTime.now().year + 3),
    );
 
    if (pickedDate == null) return;
 
    setState(() => _selectedDate = pickedDate);
  }
 
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DatePicker'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: Text('Date Picker'),
              onPressed: () => _pickDateDialog(context),
            ),
            SizedBox(width: 10.0, height: 10.0,),
            Text(getText()),
          ],
        ),
      ),
    );
  }
 
}

 

참고 :

https://github.com/JohannesMilke/date_picker_example/blob/master/lib/widget/date_picker_widget.dart

https://stackoverflow.com/questions/58066675/getting-value-from-form-with-date-picker

 

showDatePicker with GetX

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'dialog/datepicker_page.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
 
void main() {
  runApp(
    const MyApp(),
  );
}
 
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  State<MyApp> createState() => _MyAppState();
}
 
class _MyAppState extends State<MyApp> {
 
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', 'US'),
        const Locale('ko', 'KO'),
      ],
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DatePickerPage(),
    );
  }
}

 

import 'package:flutter/material.dart';
import 'package:get/get.dart';
 
class DatePickerController extends GetxController {
  var selectedDate = DateTime.now().obs;
 
  @override
  void onInit() {
    super.onInit();
  }
 
  @override
  void onReady() {
    super.onReady();
  }
 
  @override
  void onClose() {
    super.onClose();
  }
 
  chooseDate() async {
    DateTime? pickedDate = await showDatePicker(
      context: Get.context!,
      initialDate: selectedDate.value,
      firstDate: DateTime(DateTime.now().year - 3),
      lastDate: DateTime(DateTime.now().year + 3),
      //initialEntryMode: DatePickerEntryMode.input,
      cancelText: 'Close',
    );
 
    if(pickedDate != null && pickedDate != selectedDate.value){
      selectedDate.value = pickedDate;
    }
  }
 
}

 

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart';
import '../controllers/datepicker_controller.dart';
 
class DatePickerPage extends StatefulWidget {
  const DatePickerPage({Key? key}) : super(key: key);
 
  @override
  State<DatePickerPage> createState() => _DatePickerPageState();
}
 
class _DatePickerPageState extends State<DatePickerPage> {
  @override
  Widget build(BuildContext context) {
    Get.put(DatePickerController());
    return Scaffold(
      appBar: AppBar(
        title: Text('DatePicker'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: Text('Date Picker'),
              onPressed: () => Get.find<DatePickerController>().chooseDate(),
            ),
            SizedBox(
              width: 10.0,
              height: 10.0,
            ),
            Obx(
              () => Text(
                DateFormat('yyyy-MM-dd')
                    .format(Get.find<DatePickerController>().selectedDate.value)
                    .toString(),
                style: TextStyle(fontSize: 20),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 

참고 : https://github.com/RipplesCode/DatePickerFlutterGetX?ref=morioh.com&utm_source=morioh.com

GitHub - RipplesCode/DatePickerFlutterGetX