Flutter DatePicker Example

This Article is posted by seven.srikanth at 10/31/2019 6:48:06 PM

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. ![](https://fluttercentral.com/Uploads/746a2f61-8fee-4dee-b9fd-5eff11ca9601.gifwidth="35%height="auto]( In this example, we have used the out of the box showDatePicker function. Here is the full code from main.dart file. runApp(new MyApp()); 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'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State { var finaldate; void callDatePicker() async { var order = await getDate(); setState(() { finaldate = order; }); } 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)), ), ], ), ), ); } } color: white !important; font-size: 14px;]( ` Hope this will be helpful to you. Thanks, Srikanth

Tags: Calander; DateTime;



0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.




© 2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com