<p>In this post, I'm going to share the code which will help you to pick date-time from Flutter showDatePicker function. Below is a reference to what we are going to build in this example.</p> <p>![](https://fluttercentral.com/Uploads/746a2f61-8fee-4dee-b9fd-5eff11ca9601.gifwidth="35%height="auto](</p> <p>In this example, we have used the out of the box showDatePicker function.</p> <p>Here is the full code from main.dart file.</p> <p>runApp(new MyApp());</p> <p>class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'Flutter Date Picker Example'), ); } }</p> <p>class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); }</p> <p>class _MyHomePageState extends State { var finaldate;</p> <pre>void callDatePicker() async { var order = await getDate(); setState(() ); }
Future getDate() { // Imagine that this function is // more complex and slow. return showDatePicker( context: context, initialDate: DateTime.now(), firstDate: DateTime(2018), lastDate: DateTime(2030), builder: (BuildContext context, Widget child) { return Theme( data: ThemeData.light(), child: child, ); }, ); }
@override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( decoration: BoxDecoration(color: Colors.grey[200]), padding: EdgeInsets.symmetric(horizontal: 30.0), child: finaldate == null ? Text( "Use below button to Select a Date", textScaleFactor: 2.0, ) : Text( "$finaldate", textScaleFactor: 2.0, ), ), new RaisedButton( onPressed: callDatePicker, color: Colors.blueAccent, child: new Text('Click here', style: TextStyle(color: Colors.white)), ), ], ), ), ); } </pre> <p>}</p> <p>color: white !important; font-size: 14px;](</p> <p>` Hope this will be helpful to you.</p> <p>Thanks, Srikanth</p>