Flutter Date Picker - How to show Date Picker Dialog in Flutter?
Published June 14, 2021In this flutter example we will learn how to select date from date picker and how to show date picker dialog in flutter application. In any flutter form templates there is a requirement to select the date. To select a date we need to use date picker widget. In this flutter date picker example we will use syncfusion_flutter_datepicker widget. This widget has different features like select a single date, select a date range between two dates, select multiple dates options. So let's start how to display date picker dialog and select date from it.
Step 1: Create a flutter application
Step 2: Add required dependencies in pubspec.yaml file
Step 3: Now we need to create a screen which contains a email, password and date fields. Here we are using the Textfield widgets to enter email, password. To select a date we need to add SfDateRangePicker widget.
SfDateRangePicker({
Key? key,
DateRangePickerView view = DateRangePickerView.month,
this.selectionMode = DateRangePickerSelectionMode.single,
this.headerHeight = 40,
this.todayHighlightColor,
this.backgroundColor,
DateTime? initialSelectedDate,
List<DateTime>? initialSelectedDates,
PickerDateRange? initialSelectedRange,
List<PickerDateRange>? initialSelectedRanges,
this.toggleDaySelection = false,
this.enablePastDates = true,
this.showNavigationArrow = false,
this.confirmText = 'OK',
this.cancelText = 'CANCEL',
this.showActionButtons = false,
this.selectionShape = DateRangePickerSelectionShape.circle,
this.navigationDirection = DateRangePickerNavigationDirection.horizontal,
this.allowViewNavigation = true,
this.navigationMode = DateRangePickerNavigationMode.snap,
this.enableMultiView = false,
this.controller,
this.onViewChanged,
this.onSelectionChanged,
this.onCancel,
this.onSubmit,
this.headerStyle = const DateRangePickerHeaderStyle(),
this.yearCellStyle = const DateRangePickerYearCellStyle(),
this.monthViewSettings = const DateRangePickerMonthViewSettings(),
this.monthCellStyle = const DateRangePickerMonthCellStyle(),
DateTime? minDate,
DateTime? maxDate,
DateTime? initialDisplayDate,
double viewSpacing = 20,
this.selectionRadius = -1,
this.selectionColor,
this.startRangeSelectionColor,
this.endRangeSelectionColor,
this.rangeSelectionColor,
this.selectionTextStyle,
this.rangeTextStyle,
this.monthFormat,
this.cellBuilder,
})
|
This widget has different properties like select single date, select date range , select multiple dates.
To choose a type of we will use selectionMode property.
Single date
selectionMode: DateRangePickerSelectionMode.single
Multiple date selection
selectionMode: DateRangePickerSelectionMode.multiple
Date Range selection
selectionMode: DateRangePickerSelectionMode.range,
d
In this example we are showing date picker dialog with single date selection
Here is the complete code
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_datepicker/datepicker.dart';
void main() {
return runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool showProgress = false;
String email="", password="";
String date_of_birth="";
int year=0;
int day=0;
int month=0;
TextEditingController date_controller=new TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Date Picker"),
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 20.0,
),
Text(
"Registration Page",
style: TextStyle(fontWeight: FontWeight.w800, fontSize: 20.0),
),
SizedBox(
height: 50.0,
),
TextField(
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.next,
textAlign: TextAlign.center,
onChanged: (value) {
email = value; //get the value entered by user.
},
decoration: InputDecoration(
hintText: "Enter your Email",
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0)))),
),
SizedBox(
height: 20.0,
),
TextField(
obscureText: true,
textAlign: TextAlign.center,
onChanged: (value) {
password = value; //get the value entered by user.
},
decoration: InputDecoration(
hintText: "Enter your Password",
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0)))),
),
SizedBox(
height: 20.0,
),
TextButton(
onPressed: () {
var parts = date_of_birth.split('/');
if(parts.length>=2)
{
year = int.parse(parts[2].trim());
month = int.parse(parts[1].trim());
day = int.parse(parts[0].trim());
}
showDialog(
context: context, builder: (context){
return AlertDialog(
backgroundColor: Colors.white,
actions: <Widget>[
Container(
height: 30,
child: MaterialButton(
color: Colors.green,
child: Text('Set',style: TextStyle(color: Colors.white),),
onPressed: () {
setState(() {
date_of_birth=date_controller.text;
});
Navigator.of(context).pop();
},
),
),
TextButton(
child: Text('Cancel'),
onPressed: () {
setState(() {
date_controller.text=date_of_birth;
});
Navigator.of(context).pop();
},
),
],
content: Container(
height: 300,
width:300,
child: SfDateRangePicker(
initialSelectedDate: DateTime(year,month,day),
onSelectionChanged: _onSelectionChanged,
selectionMode: DateRangePickerSelectionMode.single,
),
),
);
});
},
child: Column(
children: [
Text("Select DOB"),
TextField(
textAlign: TextAlign.center,
controller: date_controller,
enableInteractiveSelection: false,
enabled: false,
focusNode: FocusNode(),
decoration: InputDecoration(
hintText: "Date Of Birth",
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0)))),
),
],
),
),
SizedBox(
height: 20.0,
),
Material(
elevation: 5,
color: Colors.lightBlue,
borderRadius: BorderRadius.circular(32.0),
child: MaterialButton(
onPressed: () async {
},
minWidth: 200.0,
height: 45.0,
child: Text(
"Register",
style:
TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0),
),
),
),
SizedBox(
height: 15.0,
),
GestureDetector(
onTap: () {
},
child: Text(
"Already Registred? Login Now",
style: TextStyle(
color: Colors.blue, fontWeight: FontWeight.w900),
),
)
],
),
),
),
);
}
void _onSelectionChanged(DateRangePickerSelectionChangedArgs args) {
/// The argument value will return the changed date as [DateTime] when the
/// widget [SfDateRangeSelectionMode] set as single.
///
/// The argument value will return the changed dates as [List<DateTime>]
/// when the widget [SfDateRangeSelectionMode] set as multiple.
///
/// The argument value will return the changed range as [PickerDateRange]
/// when the widget [SfDateRangeSelectionMode] set as range.
///
/// The argument value will return the changed ranges as
/// [List<PickerDateRange] when the widget [SfDateRangeSelectionMode] set as
/// multi range.
setState(() {
if (args.value is PickerDateRange) {
} else if (args.value is DateTime) {
date_controller.text= DateFormat('dd/MM/yyyy')
.format(args.value)
.toString();;
} else if (args.value is List<DateTime>) {
} else {
}
});
}
}
|
Step 4: Run application
![]() |
Article Contributed By :
|
|
|
|
4881 Views |