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.
   
 
 In this example, we have used the out of the box showDatePicker function. Here is the full code from main.dart file.

import 'package:flutter/material.dart'; import 'dart:async'; void main() => 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<MyHomePage> { var finaldate; void callDatePicker() async { var order = await getDate(); setState(() { finaldate = order; }); } Future<DateTime> 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: <Widget>[ 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)), ), ], ), ), ); } }
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