dahsboard #24

ibstelix · Apr 10, 2020 · 9ee8f0f · 9ee8f0f
1 parent 1dd5a6e
commit 9ee8f0f
Show file tree

Hide file tree

Showing 4 changed files with 264 additions and 16 deletions.
diff --git a/lib/screens/dashboard.dart b/lib/screens/dashboard.dart
@@ -6,6 +6,7 @@ import 'package:codedecoders/strings/const.dart';
 import 'package:codedecoders/utils/general.dart';
 import 'package:codedecoders/utils/style.dart';
 import 'package:codedecoders/widgets/loading_spinner.dart';
+import 'package:codedecoders/widgets/transaction_filter.dart';
 import 'package:flutter/material.dart';
 import 'package:location/location.dart';
 import 'package:shared_preferences/shared_preferences.dart';
@@ -208,13 +209,7 @@ class _DashboardState extends State<Dashboard>
                         crossAxisAlignment: CrossAxisAlignment.start,
                         mainAxisSize: MainAxisSize.max,
                         children: <Widget>[
-                          Text(
-                            "TRANSACTIONS RECENTES",
-                            style: TextStyle(
-                              color: Theme.of(context).primaryColor,
-                              fontSize: 17.0,
-                            ),
-                          ),
+                          _trans_titke(context),
                           Expanded(
                             child: ListView(
                               physics: BouncingScrollPhysics(),
@@ -266,6 +261,38 @@ class _DashboardState extends State<Dashboard>
     );
   }
 
+  Widget _trans_titke(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: <Widget>[
+        Text(
+          "TRANSACTIONS RECENTES",
+          style: TextStyle(
+            color: Theme.of(context).primaryColor,
+            fontSize: 15.0,
+          ),
+        ),
+        IconButton(
+          onPressed: () async {
+            var dialog_result = await showDialog<dynamic>(
+              context: context,
+              barrierDismissible: false,
+              builder: (BuildContext context) {
+                return TransactionFilter();
+              },
+            );
+
+            print('dialog result is $dialog_result');
+          },
+          icon: Icon(
+            Icons.filter_list,
+            color: Colors.grey,
+          ),
+        )
+      ],
+    );
+  }
+
   BottomNavigationBar buildBottomNavigationBar(BuildContext context) {
     return BottomNavigationBar(
       unselectedItemColor: Theme.of(context).primaryColor,

diff --git a/lib/widgets/transaction_filter.dart b/lib/widgets/transaction_filter.dart
@@ -1,6 +1,28 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:intl/intl.dart';
+import 'package:date_range_picker/date_range_picker.dart' as DateRangePicker;
+
+class TransactionFilter extends StatefulWidget {
+  @override
+  _TransactionFilterState createState() => _TransactionFilterState();
+}
+
+class _TransactionFilterState extends State<TransactionFilter> {
+  double _padding = 16.0;
+
+  double _avatarRadius = 66.0;
+
+  Map _result;
+
+  var _phoneController = new TextEditingController();
+
+  List<DropdownMenuItem<String>> _typeMenuItems;
+
+  String _currentType;
+
+  DateTime _datePickerValue = new DateTime.now();
 
-class TransactionFilter extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Dialog(
@@ -14,22 +36,212 @@ class TransactionFilter extends StatelessWidget {
   }
 
   Widget dialogContent(BuildContext context) {
-    return Column(
-      children: <Widget>[
-        _title(),
-        SizedBox(
-          height: 10,
-        )
-      ],
+    return Container(
+//      height: 200,
+      padding: EdgeInsets.only(
+        top: _padding,
+        bottom: _padding,
+        left: _padding,
+        right: _padding,
+      ),
+      margin: EdgeInsets.only(top: _avatarRadius),
+      decoration: new BoxDecoration(
+        color: Colors.white,
+        shape: BoxShape.rectangle,
+        borderRadius: BorderRadius.circular(_padding),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black26,
+            blurRadius: 10.0,
+            offset: const Offset(0.0, 10.0),
+          ),
+        ],
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          _title(),
+          SizedBox(
+            height: 40,
+          ),
+          _datePickerField(context),
+          SizedBox(height: 24.0),
+          Container(
+            padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 10),
+            margin: EdgeInsets.symmetric(horizontal: 10),
+            child: _typesDropDown(),
+          ),
+          SizedBox(height: 24.0),
+          _phoneInput(),
+          SizedBox(height: 24.0),
+          _actionButtons(context)
+        ],
+      ),
     );
   }
 
   Widget _title() {
-    return Padding(
+    return Container(
+        alignment: Alignment.center,
         padding: EdgeInsets.symmetric(horizontal: 10),
         child: Text(
           "Filtre",
           style: TextStyle(color: Colors.blue),
         ));
   }
+
+  Future _showDatePicker(context) async {
+    final List<DateTime> picked = await DateRangePicker.showDatePicker(
+        context: context,
+        initialFirstDate: new DateTime.now(),
+        initialLastDate: new DateTime.now(),
+        firstDate: new DateTime(2015),
+        lastDate: DateTime.now().add(Duration(days: 360)));
+    if (picked != null && picked.length == 2) {
+      print(picked);
+//      setState(() {
+//        _datePickerValue=picked;
+//      });
+    }
+
+    /*DateTime picked = await showDatePicker(
+      context: context,
+      initialDate: _datePickerValue,
+      firstDate: DateTime.now().subtract(Duration(days: 30 * 12 * 100)),
+      lastDate: DateTime.now().add(Duration(days: 30)),
+    );
+    if (picked != null)
+      setState(() {
+        var newFormat = new DateFormat("ddMMyyyy").format(picked);
+        print('datetime picked is ${newFormat}');
+        _datePickerValue = picked;
+//        _datePickerValue = picked.toString();
+//        _datePickerValue = new DateFormat("dd-MM-yyyy").format(picked);
+      });*/
+  }
+
+  Widget _datePickerField(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: <Widget>[
+        Container(
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(10.0),
+          ),
+          padding: EdgeInsets.all(5),
+          margin: const EdgeInsets.symmetric(vertical: 0.0, horizontal: 20.0),
+          child: Row(
+            children: <Widget>[
+              new Expanded(
+                child: GestureDetector(
+                  onTap: () {
+                    _showDatePicker(context);
+                  },
+                  child: AbsorbPointer(
+                    child: TextFormField(
+                      decoration: InputDecoration(
+                        errorStyle: TextStyle(fontSize: 8),
+                        hintText: 'Choisir une date',
+                        labelText: 'Date',
+                        hintStyle: TextStyle(color: Colors.grey),
+                      ),
+                    ),
+                  ),
+                ),
+              )
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _typesDropDown() {
+    return Row(
+      children: <Widget>[
+        Expanded(
+          child: Container(
+            decoration: BoxDecoration(
+                /*border: Border.all(
+                color: Colors.grey.withOpacity(0.5),
+                width: 1.0,
+              ),
+              borderRadius: BorderRadius.circular(10.0),*/
+                ),
+            child: SizedBox(
+              child: ButtonTheme(
+                alignedDropdown: true,
+                child: new DropdownButton(
+                  isExpanded: true,
+                  hint: new Text("Status"),
+                  value: _currentType,
+                  items: _typeMenuItems,
+                  onChanged: _typeChangeListener,
+                ),
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _phoneInput() {
+    return Padding(
+      padding: EdgeInsets.symmetric(horizontal: 10),
+      child: TextFormField(
+        controller: _phoneController,
+        inputFormatters: [
+          WhitelistingTextInputFormatter.digitsOnly,
+        ],
+        decoration: new InputDecoration(
+          enabledBorder: UnderlineInputBorder(
+            borderSide: BorderSide(color: Colors.blue.withOpacity(0.4)),
+          ),
+          focusedBorder: UnderlineInputBorder(
+            borderSide: BorderSide(color: Colors.blue.withOpacity(0.4)),
+          ),
+          border: InputBorder.none,
+          filled: true,
+          fillColor: Colors.grey.withOpacity(0.05),
+//        icon: Icon(Icons.phone),
+          hintText: 'Numero de telephone',
+          labelText: 'Telephone',
+        ),
+        keyboardType: TextInputType.number,
+      ),
+    );
+  }
+
+  Widget _actionButtons(BuildContext context) {
+    return Align(
+      alignment: Alignment.bottomCenter,
+      child: Container(
+        child: Row(
+          children: <Widget>[
+            Expanded(
+                child: MaterialButton(
+              onPressed: () {
+                Navigator.of(context).pop(null);
+              },
+              child: Text('Fermer'),
+            )),
+            Expanded(
+                child: MaterialButton(
+              onPressed: () {
+                Navigator.of(context).pop(_result);
+              },
+              child: Text('Soumettre'),
+            ))
+          ],
+        ),
+      ),
+    );
+  }
+
+  void _typeChangeListener(String selected) {
+    _currentType = selected;
+  }
 }
diff --git a/pubspec.lock b/pubspec.lock
@@ -92,6 +92,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.1.2"
+  date_range_picker:
+    dependency: "direct main"
+    description:
+      name: date_range_picker
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.6"
   device_info:
     dependency: "direct main"
     description:

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -38,6 +38,8 @@ dependencies:
   flutter_svg: ^0.17.3+1
   after_layout: ^1.0.7+2
   charts_flutter: ^0.9.0
+  date_range_picker: ^1.0.6
+
 
 dev_dependencies:
   flutter_test: