Flutter Tutorial - Date Picker in Flutter

this is flutter Basics from the flutter Guys YouTube channel date picker is one of the most used widgets in mobile applications and also in web apps too in this video we are going to create a simple working example of how to create a date picker and get the day we first need to have a text field when clicking a text field the date picker dialog is open where we choose the day so first we create a text field in the center then we set the label using decoration and label property we also set the field value to true and we set the calendar icon in the prefix icon then we set the Border Side in enabled border to none and also set the Border color in Focus border to Blue and finally we set the read-only value to true so that the user cannot edit the text now when the user clicks on the text field we need to show the date picker dialog for this we first create a future method called select day to display the date picker we must use the show date picker method now here we have to set an initial date first which we can set to the current date using date time.now then we have to set a first date which asset to the year 2000 and finally we have to set a last date which I set to the year 21l now using the ontap method in the text field we can call the select date method now if we click on the text field we will see that the date picker will be displayed now in order to be able to show the date we choose in the text field we must first Define a controller for the text field and then set the controller if we click on OK we save this date inside of this new date field and this return date time is nullable which means if you click OK a date time is returned and if you click on cancel button then the null value is returned now it is enough to check if the date is selected and the picked value is not null we will put the date value in the text controller using set State now if we restart the app and test we will see that what we expected is happening and make the sure hit the Subscribe button to get next video [Music]

Channel: Flutter Guys

Views: 11,000

Keywords: flutter tutorial, flutter, flutter course, flutter course full tutorial for beginners, flutter course for beginners, flutter learning app, flutter learning roadmap, flutter learning for beginners, flutter date picker, flutter date picker text field, flutter date picker format, flutter time picker, flutter show date picker, showdatepicker flutter, flutter tutorial for beginners, flutter roadmap, flutter roadmap 2023, flutter widgets, flutter widgets tutorial, flutter basics

Id: UrZL8-DrtHM

Length: 1min 53sec (113 seconds)

Published: Fri May 12 2023