Configuration detail page + navigation between list and detail + confirm dialog + color picker + string input container

lib/Components/color_picker.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_colorpicker/flutter_colorpicker.dart';
+import 'package:manager_app/Components/rounded_button.dart';
+
+showColorPicker (Color currentColor, Function onSelect, BuildContext context) {
+
+    Color pickerColor = currentColor;
+
+    void changeColor(Color color) {
+      pickerColor = color;
+    }
+
+    showDialog(
+        builder: (BuildContext context) => AlertDialog(
+      content: SingleChildScrollView(
+        child: ColorPicker(
+          pickerColor: currentColor,
+          onColorChanged: changeColor,
+          colorPickerWidth: 300.0,
+          pickerAreaHeightPercent: 0.7,
+          enableAlpha: true,
+          displayThumbColor: true,
+          showLabel: true,
+          paletteType: PaletteType.hsv,
+          pickerAreaBorderRadius: const BorderRadius
+              .only(
+            topLeft: const Radius.circular(2.0),
+            topRight: const Radius.circular(2.0),
+          ),
+        ),
+      ),
+      actions: <Widget>[
+        Container(
+          width: 180,
+          height: 70,
+          child: RoundedButton(
+            text: "Valider",
+            icon: Icons.check,
+            color: Colors.lightGreen,
+            press: () {
+              onSelect(pickerColor);
+              Navigator.of(context).pop();
+            },
+            fontSize: 20,
+          ),
+        ),
+      ],
+    ), context: context
+    );
+}
+
+

lib/Components/color_picker_input_container.dart

@@ -0,0 +1,69 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:manager_app/Components/color_picker.dart';
+
+class ColorPickerInputContainer extends StatefulWidget {
+  final String color;
+  final String label;
+  final ValueChanged<String> onChanged;
+  const ColorPickerInputContainer({
+    Key key,
+    this.color,
+    this.label,
+    this.onChanged,
+  }) : super(key: key);
+
+  @override
+  _ColorPickerInputContainerState createState() => _ColorPickerInputContainerState();
+}
+
+class _ColorPickerInputContainerState extends State<ColorPickerInputContainer> {
+  Color colorVar;
+
+  @override
+  void initState() {
+    setState(() {
+      colorVar = widget.color == null ? new Color(0x12345678) : new Color(int.parse(widget.color.split('(0x')[1].split(')')[0], radix: 16));
+    });
+    super.initState();
+  }
+  @override
+  Widget build(BuildContext context) {
+
+    return Container(
+      child: Row(
+        children: [
+          Align(
+              alignment: AlignmentDirectional.centerStart,
+              child: Text(widget.label, style: TextStyle(fontSize: 25, fontWeight: FontWeight.w300))
+          ),
+          Padding(
+            padding: const EdgeInsets.all(10.0),
+            child: InkWell(
+              onTap: () {
+                showColorPicker(
+                    colorVar,
+                    (Color color)  {
+                      setState(() {
+                        colorVar = color;
+                      });
+                      widget.onChanged(color.toString());
+                    },
+                    context
+                );
+              },
+              child: Container(
+                width: 50,
+                height: 50,
+                decoration: BoxDecoration(
+                  color: colorVar,
+                  borderRadius: BorderRadius.circular(50),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/Components/confirmation_dialog.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:manager_app/Components/rounded_button.dart';
+import 'package:manager_app/constants.dart';
+
+
+showConfirmationDialog (String question, Function onNo, Function onYes, BuildContext context) {
+  showDialog(
+      builder: (BuildContext context) => AlertDialog(
+        content: SingleChildScrollView(
+          child: Text(
+            question,
+            style: TextStyle(fontSize: 25),
+          ),
+        ),
+        actions: <Widget>[
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            children: [
+              Container(
+                width: 150,
+                height: 70,
+                child: RoundedButton(
+                  text: "Non",
+                  icon: Icons.undo,
+                  color: kSecond,
+                  press: () {
+                    onNo();
+                    Navigator.of(context).pop();
+                  },
+                  fontSize: 20,
+                ),
+              ),
+              Container(
+                width: 150,
+                height: 70,
+                child: RoundedButton(
+                  text: "Oui",
+                  icon: Icons.check,
+                  color: kPrimaryColor,
+                  textColor: kWhite,
+                  press: () {
+                    onYes();
+                    Navigator.of(context).pop();
+                  },
+                  fontSize: 20,
+                ),
+              ),
+            ],
+          ),
+        ],
+      ), context: context
+  );
+}
+
+

lib/Components/message_notification.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+
+class MessageNotification extends StatelessWidget {
+  final VoidCallback onReplay;
+
+  const MessageNotification({Key key, this.onReplay}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      margin: const EdgeInsets.symmetric(horizontal: 4),
+      child: SafeArea(
+        child: ListTile(
+          leading: SizedBox.fromSize(
+              size: const Size(40, 40),
+              child: Text("YOLO")),
+          title: Text('Lily MacDonald'),
+          subtitle: Text('Do you want to see a movie?'),
+          trailing: IconButton(
+              icon: Icon(Icons.reply),
+              onPressed: () {
+                ///TODO i'm not sure it should be use this widget' BuildContext to create a Dialog
+                ///maybe i will give the answer in the future
+                if (onReplay != null) onReplay();
+              }),
+        ),
+      ),
+    );
+  }
+}

lib/Components/rounded_button.dart

@@ -4,6 +4,7 @@ import 'package:manager_app/constants.dart';
 class RoundedButton extends StatelessWidget {
   final String text;
   final Function press;
+  final IconData icon;
   final Color color, textColor;
   final double fontSize;
 
@@ -11,6 +12,7 @@ class RoundedButton extends StatelessWidget {
     Key key,
     this.text,
     this.press,
+    this.icon,
     this.color = kPrimaryColor,
     this.textColor = kWhite,
     this.fontSize
@@ -21,7 +23,7 @@ class RoundedButton extends StatelessWidget {
     Size size = MediaQuery.of(context).size;
     return TextButton(
         style: ButtonStyle(
-          padding: MaterialStateProperty.resolveWith((states) => EdgeInsets.symmetric(vertical: 25, horizontal: 85)),
+          padding: MaterialStateProperty.resolveWith((states) => EdgeInsets.symmetric(vertical: 25, horizontal: icon == null ? 85 : 40)),
           backgroundColor: MaterialStateColor.resolveWith((states) => color),
           shape: MaterialStateProperty.all<RoundedRectangleBorder>(
               RoundedRectangleBorder(
@@ -33,10 +35,36 @@ class RoundedButton extends StatelessWidget {
       onPressed: () => {
         press()
       },
+      child: getValue(icon)
+    );
+  }
+
+  getValue(icon) {
+    if (icon != null) {
+      return Row(
+        mainAxisAlignment: MainAxisAlignment.spaceAround,
+        children: [
+          Center(
             child: Text(
               text,
               style: new TextStyle(color: textColor, fontSize: fontSize, fontWeight: FontWeight.w400),
             ),
+          ),
+          SizedBox(
+              width: 10
+          ),
+          Icon(
+            icon,
+            color: textColor,
+            size: fontSize + 8,
+          )
+        ],
+      );
+    } else {
+      return Text(
+          text,
+          style: new TextStyle(color: textColor, fontSize: fontSize, fontWeight: FontWeight.w400),
           );
     }
   }
+}

lib/Components/rounded_input_field.dart

@@ -6,29 +6,37 @@ class RoundedInputField extends StatelessWidget {
   final String hintText;
   final IconData icon;
   final ValueChanged<String> onChanged;
+  final String initialValue;
+  final Color color, textColor, iconColor;
   const RoundedInputField({
     Key key,
     this.hintText,
-    this.icon = Icons.person,
+    this.initialValue,
+    this.icon,
+    this.color = kSecond,
+    this.textColor = kBlack,
+    this.iconColor = kPrimaryColor,
     this.onChanged,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return TextFieldContainer(
-      child: TextField(
+      color: color,
+      child: TextFormField (
         onChanged: onChanged,
-        cursorColor: kPrimaryColor,
+        initialValue: initialValue,
-        style: TextStyle(fontSize: 20, color: kBlack),
+        cursorColor: textColor,
+        style: TextStyle(fontSize: 20, color: textColor),
         decoration: InputDecoration(
-          icon: Icon(
+          icon: icon != null ? Icon(
             icon,
-            color: kPrimaryColor,
+            color: iconColor,
-          ),
+          ): null,
           hintText: hintText,
-          hintStyle: TextStyle(fontSize: 20.0, color: kBlack),
+          hintStyle: TextStyle(fontSize: 20.0, color: textColor),
           border: InputBorder.none,
-        ),
+        )
       ),
     );
   }

lib/Components/string_input_container.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:manager_app/Components/rounded_input_field.dart';
+import 'package:manager_app/constants.dart';
+
+class StringContainer extends StatelessWidget {
+  final Color color;
+  final String label;
+  final String initialValue;
+  final ValueChanged<String> onChanged;
+  const StringContainer({
+    Key key,
+    this.color = kSecond,
+    this.label,
+    this.initialValue,
+    this.onChanged,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    Size size = MediaQuery.of(context).size;
+    return Container(
+     child: Row(
+        children: [
+          Align(
+              alignment: AlignmentDirectional.centerStart,
+              child: Text(label, style: TextStyle(fontSize: 25, fontWeight: FontWeight.w300))
+          ),
+          Padding(
+            padding: const EdgeInsets.all(10.0),
+            child: Container(
+              width: size.width *0.2,
+              child: RoundedInputField(
+                color: kSecond,
+                textColor: kBlack,
+                initialValue: initialValue,
+                onChanged: onChanged,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/Components/text_field_container.dart

@@ -3,9 +3,11 @@ import 'package:manager_app/constants.dart';
 
 class TextFieldContainer extends StatelessWidget {
   final Widget child;
+  final Color color;
   const TextFieldContainer({
     Key key,
     this.child,
+    this.color = kSecond,
   }) : super(key: key);
 
   @override
@@ -16,7 +18,7 @@ class TextFieldContainer extends StatelessWidget {
       padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
       width: size.width * 0.8,
       decoration: BoxDecoration(
-        color: kSecond,
+        color: color,
         borderRadius: BorderRadius.circular(29),
       ),
       child: child,

lib/Models/managerContext.dart

@@ -1,19 +1,21 @@
 import 'dart:convert';
 import 'package:flutter/material.dart';
+import 'package:manager_app/client.dart';
 import 'package:managerapi/api.dart';
 
 
 class ManagerAppContext with ChangeNotifier{
   String email;
   TokenDTO token;
-  dynamic clientAPI;
+  Client clientAPI;
   String currentRoute;
+  ConfigurationDTO selectedConfiguration;
 
   ManagerAppContext({this.email, this.token, this.currentRoute});
 
   // Implement toString to make it easier to see information about
   @override
   String toString() {
-    return 'ManagerAppContext{email: $email, token: $token, currentRoute: $currentRoute}';
+    return 'ManagerAppContext{email: $email, token: $token, currentRoute: $currentRoute}, selectedConfiguration: $selectedConfiguration}';
   }
 }

lib/Screens/Configurations/configuration_detail_screen.dart

@@ -0,0 +1,335 @@
+import 'package:auto_size_text/auto_size_text.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/painting.dart';
+import 'package:flutter_colorpicker/flutter_colorpicker.dart';
+import 'package:manager_app/Components/color_picker.dart';
+import 'package:manager_app/Components/color_picker_input_container.dart';
+import 'package:manager_app/Components/confirmation_dialog.dart';
+import 'package:manager_app/Components/message_notification.dart';
+import 'package:manager_app/Components/rounded_button.dart';
+import 'package:manager_app/Components/rounded_input_field.dart';
+import 'package:manager_app/Components/string_input_container.dart';
+import 'package:manager_app/Models/managerContext.dart';
+import 'package:manager_app/app_context.dart';
+import 'package:manager_app/client.dart';
+import 'package:manager_app/constants.dart';
+import 'package:managerapi/api.dart';
+import 'package:overlay_support/overlay_support.dart';
+import 'package:provider/provider.dart';
+import 'package:intl/intl.dart';
+
+class ConfigurationDetailScreen extends StatefulWidget {
+  final String id;
+  ConfigurationDetailScreen({Key key, @required this.id}) : super(key: key);
+
+  @override
+  _ConfigurationDetailScreenState createState() => _ConfigurationDetailScreenState();
+}
+
+class _ConfigurationDetailScreenState extends State<ConfigurationDetailScreen> {
+  ConfigurationDTO configurationDTO;
+
+  @override
+  Widget build(BuildContext context) {
+    final appContext = Provider.of<AppContext>(context);
+    Size size = MediaQuery.of(context).size;
+    return Container(
+      child: Column(
+          children: [
+            FutureBuilder(
+                future: getConfiguration(this.widget, appContext.getContext().clientAPI),
+                builder: (context, AsyncSnapshot<dynamic> snapshot) {
+                  if (snapshot.connectionState == ConnectionState.done) {
+                    print(this.widget);
+                    return bodyConfiguration(snapshot.data, size, appContext, context);
+                  } else if (snapshot.connectionState == ConnectionState.none) {
+                    return Text("No data");
+                  } else {
+                    return Center(child: Container(height: size.height * 0.2, child: Text('LOADING TODO FRAISE')));
+                  }
+                }
+            ),
+          ]
+      ),
+    );
+  }
+
+  Widget bodyConfiguration(ConfigurationDTO configurationDTO, Size size, AppContext appContext, BuildContext context)  {
+
+    return Container(
+      height: size.height*0.96,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Container(
+              width: size.width*0.9,
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Align(
+                      alignment: AlignmentDirectional.bottomStart,
+                      child: Padding(
+                        padding: const EdgeInsets.all(10.0),
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Text(configurationDTO.label, style: TextStyle(fontSize: 30, fontWeight: FontWeight.w400)),
+                            Padding(
+                              padding: const EdgeInsets.all(5.0),
+                              child: Text(DateFormat('dd/MM/yyyy').format(configurationDTO.dateCreation), style: TextStyle(fontSize: 15, fontWeight: FontWeight.w200)),
+                            ),
+                          ],
+                        ),
+                      )
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.all(10.0),
+                    child: Align(
+                      alignment: AlignmentDirectional.centerEnd,
+                      child: InkWell(
+                          onTap: () {
+                            ManagerAppContext managerAppContext = appContext.getContext();
+                            managerAppContext.selectedConfiguration = null;
+                            appContext.setContext(managerAppContext);
+                          },
+                          child: Container(
+                              child: Icon(
+                                Icons.arrow_back,
+                                color: kPrimaryColor,
+                                size: 50.0,
+                              )
+                          )
+                      ),
+                    ),
+                  )
+                ],
+              ),
+          ), // TITLE
+          Padding(
+            padding: const EdgeInsets.all(15.0),
+            child: Container(
+              //color: Colors.yellowAccent,
+              height: size.height*0.65,
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.spaceAround,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Column(
+                        mainAxisAlignment: MainAxisAlignment.spaceAround,
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          StringContainer(
+                            label: "Label :",
+                            initialValue: configurationDTO.label,
+                            onChanged: (value) {
+                              configurationDTO.label = value;
+                            },
+                          ),
+                          Row(
+                            children: [
+                              Align(
+                                  alignment: AlignmentDirectional.centerStart,
+                                  child: Text("Languages :", style: TextStyle(fontSize: 25, fontWeight: FontWeight.w300))
+                              ),
+                              Padding(
+                                padding: const EdgeInsets.all(10.0),
+                                child: Container(
+                                  width: size.width *0.2,
+                                  child: RoundedInputField(
+                                    color: kSecond,
+                                    textColor: kBlack,
+                                    initialValue: configurationDTO.label,
+                                    onChanged: (value) {
+                                      configurationDTO.label = value;
+                                    },
+                                  ),
+                                ),
+                              ),
+                            ],
+                          ),
+                        ],
+                      ),
+                      Column(
+                        mainAxisAlignment: MainAxisAlignment.spaceAround,
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          ColorPickerInputContainer(
+                            label: "Primary color :",
+                            color: configurationDTO.primaryColor,
+                            onChanged: (value) {
+                              configurationDTO.primaryColor = value;
+                            },
+                          ),
+                          ColorPickerInputContainer(
+                            label: "Secondary color :",
+                            color: appContext.getContext().selectedConfiguration.secondaryColor,
+                            onChanged: (value) {
+                              configurationDTO.secondaryColor = value;
+                            },
+                          ),
+                        ],
+                      )
+                    ],
+                  ),
+                  Align(
+                    alignment: AlignmentDirectional.centerStart,
+                    child: Text("Sections :", style: TextStyle(fontSize: 25, fontWeight: FontWeight.w300))
+                  ),
+                ],
+              ),
+            ),
+          ),// FIELDS SECTION
+          Align(
+            alignment: AlignmentDirectional.bottomCenter,
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                Padding(
+                  padding: const EdgeInsets.all(10.0),
+                  child: RoundedButton(
+                    text: "Annuler",
+                    icon: Icons.undo,
+                    color: Colors.grey,
+                    textColor: Colors.white,
+                    fontSize: 15,
+                    press: () {
+                      print("Annuler pressed");
+                      cancel(configurationDTO, appContext);
+                    },
+                  ),
+                ),
+                Padding(
+                  padding: const EdgeInsets.all(8.0),
+                  child: RoundedButton(
+                    text: "Supprimer",
+                    icon: Icons.delete,
+                    color: Colors.red,
+                    textColor: Colors.white,
+                    fontSize: 15,
+                    press: () {
+                      print("Supprimer pressed");
+                      delete(configurationDTO, appContext);
+                    },
+                  ),
+                ),
+                Padding(
+                  padding: const EdgeInsets.all(8.0),
+                  child: RoundedButton(
+                    text: "Sauvegarder",
+                    icon: Icons.done,
+                    color: Colors.lightGreen,
+                    textColor: Colors.white,
+                    fontSize: 15,
+                    press: () {
+                      save(configurationDTO, appContext);
+                      print("Sauvegarder pressed");
+                    },
+                  ),
+                ),
+              ],
+            ),
+          ),// BUTTONS
+        ],
+      ),
+    );
+  }
+
+  getElement(ConfigurationDTO configuration, Size size) {
+    if (configuration.id != null) {
+      return Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Align(
+            alignment: Alignment.centerLeft,
+            child: AutoSizeText(
+              configuration.label,
+              style: new TextStyle(fontSize: 25),
+              maxLines: 1,
+            ),
+          ),
+          Align(
+            alignment: Alignment.bottomRight,
+            child: AutoSizeText(
+              DateFormat('dd/MM/yyyy').format(configuration.dateCreation),
+              style: new TextStyle(fontSize: 18, fontFamily: ""),
+              maxLines: 1,
+            ),
+          ),
+        ],
+      );
+    } else {
+      return Icon(
+        Icons.add,
+        color: kTextLightColor,
+        size: 100.0,
+      );
+    }
+  }
+
+  Future<void> save(ConfigurationDTO configurationDTO, AppContext appContext) async {
+    ConfigurationDTO configuration = await appContext.getContext().clientAPI.configurationApi.configurationUpdate(configurationDTO);
+    ManagerAppContext managerAppContext = appContext.getContext();
+    managerAppContext.selectedConfiguration = configuration;
+    appContext.setContext(managerAppContext);
+
+    // popup a toast.
+    toast('La configuration a été sauvegardée avec succès');
+
+    // show a notification at top of screen.
+    /*showSimpleNotification(
+        Text("La configuration a été sauvegardée avec succès"),
+        position: NotificationPosition.bottom,
+        background: Colors.green);*/
+  }
+
+  Future<void> delete(ConfigurationDTO configurationDTO, AppContext appContext) async {
+    showConfirmationDialog(
+      "Êtes-vous sûr de vouloir supprimer cette configuration ?",
+      () {},
+      () async {
+        ManagerAppContext managerAppContext = appContext.getContext();
+        ConfigurationDTO configuration = await appContext.getContext().clientAPI.configurationApi.configurationDelete(configurationDTO.id);
+        managerAppContext.selectedConfiguration = null;
+        appContext.setContext(managerAppContext);
+      },
+      context
+    );
+  }
+
+  Future<void> cancel(ConfigurationDTO configurationDTO, AppContext appContext) async {
+    ManagerAppContext managerAppContext = appContext.getContext();
+    ConfigurationDTO configuration = await appContext.getContext().clientAPI.configurationApi.configurationGetDetail(configurationDTO.id);
+    managerAppContext.selectedConfiguration = configuration;
+    appContext.setContext(managerAppContext);
+  }
+
+  Future<ConfigurationDTO> getConfiguration(ConfigurationDetailScreen widget, Client client) async {
+    print(widget.id);
+    ConfigurationDTO configuration = await client.configurationApi.configurationGetDetail(widget.id);
+    print(configuration);
+
+    return configuration;
+  }
+}
+
+boxDecoration(ConfigurationDTO configurationDTO) {
+  return BoxDecoration(
+    color: configurationDTO.id == null ? Colors.lightGreen : kTextLightColor,
+    shape: BoxShape.rectangle,
+    borderRadius: BorderRadius.circular(25.0),
+    boxShadow: [
+      BoxShadow(
+        color: kSecond,
+        spreadRadius: 0.5,
+        blurRadius: 5,
+        offset: Offset(0, 1.5), // changes position of shadow
+      ),
+    ],
+  );
+}
+

lib/Screens/Configurations/configurations_screen.dart

@@ -1,7 +1,12 @@
+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
+import 'package:manager_app/Models/managerContext.dart';
+import 'package:manager_app/Screens/Configurations/configuration_detail_screen.dart';
 import 'package:manager_app/app_context.dart';
+import 'package:manager_app/constants.dart';
 import 'package:managerapi/api.dart';
 import 'package:provider/provider.dart';
+import 'package:intl/intl.dart';
 
 class ConfigurationsScreen extends StatefulWidget {
   ConfigurationsScreen({Key key}) : super(key: key);
@@ -11,11 +16,18 @@ class ConfigurationsScreen extends StatefulWidget {
 }
 
 class _ConfigurationsScreenState extends State<ConfigurationsScreen> {
+  ConfigurationDTO selectedConfiguration;
+
   @override
   Widget build(BuildContext context) {
     final appContext = Provider.of<AppContext>(context);
     Size size = MediaQuery.of(context).size;
 
+    ManagerAppContext managerAppContext = appContext.getContext();
+
+    if (managerAppContext.selectedConfiguration != null) {
+      return ConfigurationDetailScreen(id: selectedConfiguration.id);
+    } else {
       return Container(
         child: Column(
             children: [
@@ -23,16 +35,9 @@ class _ConfigurationsScreenState extends State<ConfigurationsScreen> {
                   future: getConfigurations(appContext),
                   builder: (context, AsyncSnapshot<dynamic> snapshot) {
                     if (snapshot.connectionState == ConnectionState.done) {
-                    return bodyData(snapshot.data);
+                      var tempOutput = new List<ConfigurationDTO>.from(snapshot.data);
-                    /*return GridView.builder(
+                      tempOutput.add(ConfigurationDTO(id: null));
-                        shrinkWrap: true,
+                      return bodyGrid(tempOutput, size, appContext);
-                        gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
-                        itemCount: snapshot.data.length,
-                        itemBuilder: (BuildContext context, int index) {
-                          return
-                            Text(snapshot.data[0].label);
-                        }
-                    );*/
                     } else if (snapshot.connectionState == ConnectionState.none) {
                       return Text("No data");
                     } else {
@@ -44,8 +49,102 @@ class _ConfigurationsScreenState extends State<ConfigurationsScreen> {
         ),
       );
     }
+  }
 
-  Widget bodyData(data) => DataTable(
+  Widget bodyGrid(data, Size size, AppContext appContext)  {
+    return GridView.builder(
+        shrinkWrap: true,
+        gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 6),
+        itemCount: data.length,
+        itemBuilder: (BuildContext context, int index) {
+          return // User Picture
+            InkWell(
+              onTap: () {
+                  if (data[index].id == null) {
+                    print("open modal to create new config !");
+                  } else {
+                    setState(() {
+                      ManagerAppContext managerAppContext = appContext.getContext();
+                      managerAppContext.selectedConfiguration = data[index];
+                      selectedConfiguration = data[index];
+                    });
+                  }
+              },
+              child: Container(
+                decoration: boxDecoration(data[index]),
+                padding: const EdgeInsets.all(15),
+                margin: EdgeInsets.symmetric(vertical: 15, horizontal: 15),
+                child: Align(
+                  alignment: Alignment.center,
+                  child: getElement(data[index], size)
+                ),
+              ),
+            );
+        }
+    );
+  }
+
+  getElement(ConfigurationDTO configuration, Size size) {
+    if (configuration.id != null) {
+      return Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Align(
+            alignment: Alignment.centerLeft,
+            child: AutoSizeText(
+              configuration.label,
+              style: new TextStyle(fontSize: 25),
+              maxLines: 1,
+            ),
+          ),
+          Align(
+            alignment: Alignment.bottomRight,
+            child: AutoSizeText(
+              DateFormat('dd/MM/yyyy').format(configuration.dateCreation),
+              style: new TextStyle(fontSize: 18, fontFamily: ""),
+              maxLines: 1,
+            ),
+          ),
+        ],
+      );
+    } else {
+      return Icon(
+        Icons.add,
+        color: kTextLightColor,
+        size: 100.0,
+      );
+    }
+  }
+}
+
+Future<List<ConfigurationDTO>> getConfigurations(dynamic appContext) async {
+  List<ConfigurationDTO> configurations = await appContext.getContext().clientAPI.configurationApi.configurationGet();
+  print("number of configurations " + configurations.length.toString());
+  configurations.forEach((element) {
+    print(element);
+  });
+  return configurations;
+}
+
+boxDecoration(ConfigurationDTO configurationDTO) {
+  return BoxDecoration(
+    color: configurationDTO.id == null ? Colors.lightGreen : kTextLightColor,
+    shape: BoxShape.rectangle,
+    borderRadius: BorderRadius.circular(25.0),
+    boxShadow: [
+      BoxShadow(
+        color: kSecond,
+        spreadRadius: 0.5,
+        blurRadius: 5,
+        offset: Offset(0, 1.5), // changes position of shadow
+      ),
+    ],
+  );
+}
+
+
+/*Widget bodyTable(data) => DataTable(
       sortColumnIndex: 0,
       sortAscending: true,
       columns: <DataColumn>[
@@ -122,22 +221,9 @@ class _ConfigurationsScreenState extends State<ConfigurationsScreen> {
               Text('${configuration.dateCreation ?? ""}'),
             ),
             DataCell(
-              Text("Todo buttons - open, edit, delete"),
+              Text("Todo buttons - open = edit, delete"),
             ),
           ],
         ),
       ).toList()
-  );
+  );*/
-}
-
-Future<List<ConfigurationDTO>> getConfigurations(dynamic appContext) async {
-  List<ConfigurationDTO> configurations = await appContext.getContext().clientAPI.configurationApi.configurationGet();
-  print("number of configurations " + configurations.length.toString());
-  configurations.forEach((element) {
-    print(element);
-  });
-  return configurations;
-}
-
-
-

lib/Screens/Main/components/body.dart

@@ -1,7 +1,7 @@
+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
-import 'package:fluttertoast/fluttertoast.dart';
 import 'package:manager_app/Models/menu.dart';
 import 'package:manager_app/Models/menuSection.dart';
 import 'package:manager_app/Screens/Configurations/configurations_screen.dart';
@@ -42,7 +42,7 @@ class _BodyState extends State<Body> {
     menu.sections.add(configurations);
     menu.sections.add(resources);
 
-    selectedElement = InitElementToShow(currentPosition, menu);
+    selectedElement = initElementToShow(currentPosition, menu);
 
     return Background(
       child: Row(
@@ -69,9 +69,10 @@ class _BodyState extends State<Body> {
                     padding: const EdgeInsets.all(8.0),
                     child: Container(
                       alignment: AlignmentDirectional.bottomStart,
-                      child: Text(
+                      child: AutoSizeText(
                         menu.title,
                         style: new TextStyle(color: kBlack, fontSize: 30, fontWeight: FontWeight.w400, fontFamily: "Helvetica"),
+                        maxLines: 1,
                       ),
                     ),
                   ),
@@ -86,7 +87,7 @@ class _BodyState extends State<Body> {
                               onTap: () => {
                                 setState(() {
                                   currentPosition = section.order;
-                                  selectedElement = InitElementToShow(currentPosition, menu);
+                                  selectedElement = initElementToShow(currentPosition, menu);
                                 })
                               },
                               child: Container(
@@ -101,9 +102,10 @@ class _BodyState extends State<Body> {
                                 ),
                                 child: Padding(
                                   padding: const EdgeInsets.only(left: 10),
-                                  child: Text(
+                                  child: AutoSizeText(
                                     section.name,
                                     style: new TextStyle(color: kBodyTextColor, fontSize: 25, fontWeight: FontWeight.w300, fontFamily: "Helvetica"),
+                                    maxLines: 1,
                                   ),
                                 ),
                               ),
@@ -117,8 +119,10 @@ class _BodyState extends State<Body> {
                   Container(
                     child: Padding(
                       padding: const EdgeInsets.all(8.0),
-                      child: Text(
+                      child: AutoSizeText(
-                        appContext.getContext().email
+                        appContext.getContext().email,
+                        style: new TextStyle(color: kBodyTextColor, fontSize: 20, fontWeight: FontWeight.w300, fontFamily: "Helvetica"),
+                        maxLines: 1,
                       ),
                     )
                   )
@@ -138,7 +142,7 @@ class _BodyState extends State<Body> {
   }
 }
 
-  InitElementToShow(int currentPosition, Menu menu) {
+  initElementToShow(int currentPosition, Menu menu) {
     MenuSection elementToShow = menu.sections.where((s) => s.order == currentPosition).first;
 
     switch (elementToShow.type) {

lib/Screens/login_screen.dart

@@ -130,6 +130,7 @@ class _LoginScreenState extends State<LoginScreen> {
                     onChanged: (value) {
                       email = value;
                     },
+                    icon: Icons.person
                   ),
                   RoundedPasswordField(
                     onChanged: (value) {

lib/main.dart

@@ -7,6 +7,7 @@ import 'Screens/login_screen.dart';
 import 'app_context.dart';
 import 'client.dart';
 import 'constants.dart';
+import 'package:overlay_support/overlay_support.dart';
 
 void main() {
   String initialRoute;
@@ -36,6 +37,7 @@ class _MyAppState extends State<MyApp> {
   Widget build(BuildContext context) {
     return ChangeNotifierProvider<AppContext>(
       create: (_) => AppContext(widget.managerAppContext),
+      child: OverlaySupport(
         child: MaterialApp(
             debugShowCheckedModeBanner: false,
             title: 'Manager App Demo',
@@ -56,6 +58,7 @@ class _MyAppState extends State<MyApp> {
               '/main': (context) => MainScreen()
             }
         ),
+      ),
     );
   }
 }

pubspec.lock

@@ -8,6 +8,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.5.0"
+  auto_size_text:
+    dependency: "direct main"
+    description:
+      name: auto_size_text
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.0"
   boolean_selector:
     dependency: transitive
     description:
@@ -62,23 +69,18 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_colorpicker:
+    dependency: "direct main"
+    description:
+      name: flutter_colorpicker
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.4.0"
   flutter_test:
     dependency: "direct dev"
     description: flutter
     source: sdk
     version: "0.0.0"
-  flutter_web_plugins:
-    dependency: transitive
-    description: flutter
-    source: sdk
-    version: "0.0.0"
-  fluttertoast:
-    dependency: "direct main"
-    description:
-      name: fluttertoast
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "8.0.5"
   http:
     dependency: transitive
     description:
@@ -100,13 +102,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.16.1"
-  js:
-    dependency: transitive
-    description:
-      name: js
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "0.6.3"
   managerapi:
     dependency: "direct main"
     description:
@@ -135,6 +130,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.0"
+  overlay_support:
+    dependency: "direct main"
+    description:
+      name: overlay_support
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.5-hotfix1"
   path:
     dependency: transitive
     description:
@@ -226,4 +228,4 @@ packages:
     version: "2.1.0"
 sdks:
   dart: ">=2.12.0 <3.0.0"
-  flutter: ">=1.16.0"
+  flutter: ">=1.17.0"

pubspec.yaml

@@ -26,7 +26,9 @@ dependencies:
 
   rxdart: 0.22.0
   provider: ^5.0.0
-  fluttertoast:
+  overlay_support: 1.0.5-hotfix1
+  auto_size_text: ^2.1.0
+  flutter_colorpicker: ^0.4.0
   managerapi:
     path: manager_api