From 13b400bce0ccaf852b6d3647c8edcca63c47176e Mon Sep 17 00:00:00 2001
From: Indumathi1195R <54974849+Indumathi1195R@users.noreply.github.com>
Date: Tue, 5 May 2020 13:14:35 +0530
Subject: [PATCH] Update README.md

---
 README.md | 70 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 68 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index f7efc2b..329e78c 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,68 @@
-# dialog-date-range-picker-flutter
-How to add a date range picker (SfDateRangePicker) in the Flutter dialog window?
+# How to add a date range picker (SfDateRangePicker) in the Flutter dialog window
+
+In an application, the date range picker can be displayed in a dialog window by using the `onPressed` event of the button.
+
+## Step 1:
+To host a date range picker in a pop-up, you can use the 'AlertDialog' window to achieve this add the date range picker inside the alert dialog and open the dialog on the 'onpressed' event of a button. Here, a flat button is used.
+
+```xml
+body: Column(
+  mainAxisAlignment: MainAxisAlignment.center,
+  crossAxisAlignment: CrossAxisAlignment.stretch,
+  children: <Widget>[
+    FlatButton(
+      child: Container(
+        child: _selectedDate ==null
+            ? Text('Select a date'):Text(_selectedDate),
+      ),
+      onPressed: () {
+        showDialog(
+            context: context,
+            builder: (BuildContext context) {
+              return AlertDialog(
+                  title: Text(''),
+                  content: Container(
+                    height: 350,
+                    child: Column(
+                      children: <Widget>[
+                        getDateRangePicker(),
+                        FlatButton(
+                          child: Text("OK"),
+                          onPressed: () {
+                            Navigator.pop(context);
+                          },
+                        )
+                      ],
+                    ),
+                  ));
+            });
+      },
+    ),
+  ],
+));
+ 
+Widget getDateRangePicker() {
+  return Container(
+      height: 250,
+      child: Card(
+          child: SfDateRangePicker(
+        view: DateRangePickerView.month,
+        selectionMode: DateRangePickerSelectionMode.single,
+        onSelectionChanged: selectionChanged,
+      )));
+}
+```
+ 
+
+## Step 2:
+Using the `onSelectionChanged` event, you can show the selected date of the picker.
+
+```xml
+void selectionChanged(DateRangePickerSelectionChangedArgs args) {
+  _selectedDate = DateFormat('dd MMMM, yyyy').format(args.value);
+ 
+  SchedulerBinding.instance.addPostFrameCallback((duration) {
+    setState(() {});
+  });
+}
+```