How To Create A Flutter Date Picker in Just 4 Minutes !

in this video I will show you how to create date picker as shown in the emulator where you can select a date for example I selected 2nd of April and when I click on okay I can retrieve the selected date and display in the app now let's dive into the code so here I have created a string variable to store the selected date and by default it's empty string now in my body widget I have created an elevated button to open the date pier and a text vidget to display the selected date so now let's create the show date Pier function show date Pier function in flutter is an asynchronized operation so it will return a future type since we don't have to return anything I will set it to Future void the date return from the date Pier is in datetime format which I will create a datetime type variable to store The Returned value next is executing show date picker function this function requires a build context first date and last date both first date and last date are in datetime types so I will set the first date to year 2000 and the last date to year 2050 next we have to set the initial date to datetime do now so that when you open the date picker it's focused on today's date now we have completed the show date picker function as of now whenever select date function fun is executed it will call the show date picker function and store the selected date into the underscore selected variable the next thing that we have to do is to update the selected date to the string variable that we have created earlier so firstly we have to check if the underscore selected variable is not null then I will call the set State method to update the string variable value now we have completed the select date function let's add this function into the elevated button on press now let's try it out in the emulator so as you can see when I click on the elevated button a date Pier is displayed and the initial date is focused this date picker provides flexibility on changing different months and year easily and you can see that the first date available is from year 2000 and the last date available to pick is to year 2050 as we said it in the function code just now so now I will randomly pick a date for example I select 5th of June and when I click on okay my selected date is retrieved and display in the app in conclusion this is how you create date picker in your flutter app if you have any question feel free to comment below don't forget to like the video and subscribe to our Channel see you in the next tutorial

Channel: AI with Flutter

Views: 538

Keywords: datepicker in flutter, flutter datepicker, date picker flutter, flutter widget, flutter showDatePicker

Id: MRzk0unu3gQ

Length: 4min 3sec (243 seconds)

Published: Wed Apr 24 2024