[Flutter] DatePicker (iOS style)

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  intl:
  flutter_localizations:
    sdk: flutter

 

 

 

Locale 설정

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Picker Demo',
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate
      ],
      supportedLocales: [
        Locale('ko', ''),
        Locale('en', ''),
      ],
    );
  }
}

 

 

 

utils/birthdate_picker.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class BirthDatePicker extends StatelessWidget {
  final void Function(DateTime) onDateTimeChanged;
  final String initDateStr;

  BirthDatePicker({
    required this.onDateTimeChanged,
    required this.initDateStr,
  });

  @override
  Widget build(BuildContext context) {
    final initDate = DateFormat('yyyy-MM-dd').parse(initDateStr ?? '2000-01-01');
    return SizedBox(
      height: 300,
      child: CupertinoDatePicker(
        minimumYear: 1900,
        initialDateTime: initDate,
        onDateTimeChanged: onDateTimeChanged,
        mode: CupertinoDatePickerMode.date,
      ),
    );
  }
}

 

 

 

DatePicker onDateTimeChanged 정의

DateTime _dateTime = DateTime.now();

void onDateTimeChanged(dateTime) {
   setState(() {
      _dateTime = dateTime;
   });
}

 

 

 

DatePicker

Column(
   children: <Widget>[
      BirthDatePicker(
         onDateTimeChanged: onDateTimeChanged,
         initDateStr: _dateTime.toString()
      ),
      RaisedButton(
         child: Text('Click!'),
         onPressed: () {
            setState(() {
               _dateStr = '${_dateTime.year}년  ${_dateTime.month}월  ${_dateTime.day}일';
            });
         },
      ),
      Container(
         padding: EdgeInsets.only(top: 20),
         child: Text(_dateStr),
      ),
   ],
)

 

 

 

결과

 

 

 

참고 : velog.io/@adbr/flutter-Cupertino-iOS-style-datepicker-%EC%BF%A0%ED%8D%BC%ED%8B%B0%EB%85%B8-%EB%94%94%EC%9E%90%EC%9D%B8-datepicker-%EC%84%A4%EC%A0%95

[flutter] Cupertino (iOS-style) datepicker 쿠퍼티노 디자인 datepicker 설정