feat: shared component

lib/screens/splash/main.dart

@@ -38,7 +38,7 @@ class _SplasScreen extends State<SplashScreen> {
         if (token.isNotEmpty) {
           Get.toNamed('/home');
         } else {
-          Get.toNamed('/auth');
+          Get.toNamed('/storybook');
         }
       }
     });

lib/shared/storybook/main.dart

@@ -1,7 +1,10 @@
 import 'package:eatiplan_mobile/shared/widgets/button/main.dart';
 import 'package:eatiplan_mobile/shared/widgets/buttons/mode_toggle_button/stories.dart';
+import 'package:eatiplan_mobile/shared/widgets/datepicker/main.dart';
 import 'package:eatiplan_mobile/shared/widgets/forms/input/stories.dart';
+import 'package:eatiplan_mobile/shared/widgets/radio/main.dart';
 import 'package:eatiplan_mobile/shared/widgets/sample/stories.dart';
+import 'package:eatiplan_mobile/shared/widgets/selection/main.dart';
 import 'package:flutter/material.dart';
 import 'package:storybook_flutter/storybook_flutter.dart';
 
@@ -14,7 +17,10 @@ class StoryBook extends StatelessWidget {
           sampleStory,
           modeToggleButtonStory,
           formInputStory,
-          buttonStory
+          buttonStory,
+          radioStory,
+          selectionStory,
+          datePickerStory
         ],
       );
 }

lib/shared/widgets/datepicker/main.dart

@@ -0,0 +1,87 @@
+import 'package:date_time_picker/date_time_picker.dart';
+import 'package:eatiplan_mobile/shared/variables.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/src/material/input_border.dart';
+import 'package:storybook_flutter/storybook_flutter.dart';
+
+class EDatePicker extends StatelessWidget {
+  const EDatePicker(
+      {Key? key,
+      this.value = "",
+      this.initialValue,
+      this.dateMask,
+      this.minDate,
+      this.maxDate,
+      this.dateLabelText = "",
+      this.timeLabelText = "",
+      required this.onChange,
+      required this.type,
+      this.isError = false})
+      : super(key: key);
+
+  final String? dateMask;
+  final String dateLabelText;
+  final String timeLabelText;
+  final DateTime? minDate;
+  final DateTime? maxDate;
+  final String? initialValue;
+  final DateTimePickerType type;
+  final String value;
+  final ValueChanged<String> onChange;
+  final bool isError;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      child: DateTimePicker(
+        type: type,
+        initialValue: initialValue,
+        dateMask: dateMask ?? "d MMM, yyyy",
+        decoration: const InputDecoration(
+          prefixIcon: Icon(
+            Icons.calendar_month_outlined,
+            color: primaryColor,
+          ),
+          border: OutlineInputBorder(
+            borderRadius: BorderRadius.all(Radius.circular(14)),
+            borderSide: BorderSide(width: 2.0, color: primaryColor),
+          ),
+          focusedBorder: OutlineInputBorder(
+            borderRadius: BorderRadius.all(Radius.circular(14)),
+            borderSide: BorderSide(width: 1.5, color: primaryColor),
+          ),
+          focusColor: primaryColor,
+        ),
+        firstDate: minDate,
+        lastDate: maxDate,
+        icon: const Icon(Icons.calendar_month_outlined),
+        dateLabelText: dateLabelText,
+        timeLabelText: timeLabelText,
+        onChanged: (val) => onChange(val),
+        validator: (val) {
+          return null;
+        },
+        style: const TextStyle(color: primaryColor),
+        onSaved: (val) => print(val),
+      ),
+    );
+  }
+}
+
+Story get datePickerStory => Story(
+      name: "Date picker",
+      builder: (context) => SizedBox(
+        child: Padding(
+          padding: const EdgeInsets.all(10.0),
+          child: EDatePicker(
+            onChange: (value) {},
+            initialValue: DateTime.now().toString(),
+            type: DateTimePickerType.date,
+            minDate: DateTime(1900),
+            maxDate: DateTime.now(),
+            dateMask: "dd/MM/yyyy",
+          ),
+        ),
+      ),
+    );

lib/shared/widgets/radio/main.dart

@@ -0,0 +1,104 @@
+import 'package:eatiplan_mobile/shared/variables.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:storybook_flutter/storybook_flutter.dart';
+
+class Item {
+  String name;
+  String value;
+
+  Item({this.name = "", this.value = ""});
+}
+
+class ERadio extends HookWidget {
+  const ERadio(
+      {Key? key,
+      this.value = "",
+      required this.onChange,
+      required this.itemList,
+      this.isError = false})
+      : super(key: key);
+
+  final List<Item> itemList;
+  final String value;
+  final ValueChanged<String> onChange;
+  final bool isError;
+
+  @override
+  Widget build(BuildContext context) {
+    var data = useState<String>("");
+    return SizedBox(
+        child: SizedBox(
+      height: itemList.length * 55,
+      child: ListView.builder(
+        itemCount: itemList.length,
+        itemBuilder: (context, index) {
+          return radioWidget(
+            title: itemList[index].name,
+            value: itemList[index].value,
+            groupValue: data.value,
+            onChanged: (val) {
+              data.value = val;
+              onChange(val);
+            },
+          );
+        },
+      ),
+    ));
+  }
+}
+
+Widget radioWidget({
+  required String title,
+  required String value,
+  required String groupValue,
+  required ValueChanged<String> onChanged,
+}) {
+  return InkWell(
+    highlightColor: Colors.transparent,
+    splashColor: Colors.transparent,
+    enableFeedback: false,
+    onTap: () {
+      onChanged(value);
+    },
+    child: Row(
+      children: [
+        Radio<String>(
+          splashRadius: 0,
+          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+          activeColor: primaryColor,
+          focusColor: primaryColor,
+          groupValue: groupValue,
+          value: value,
+          onChanged: (newValue) {
+            onChanged(newValue!);
+          },
+        ),
+        Text(
+          title,
+          style: const TextStyle(
+            fontWeight: FontWeight.w400,
+            fontSize: 15,
+            color: primaryColor,
+          ),
+        ),
+      ],
+    ),
+  );
+}
+
+Story get radioStory => Story(
+    name: "Radio",
+    builder: (context) => Column(
+          children: [
+            Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: ERadio(onChange: (value) {}, itemList: [
+                Item(name: "Male", value: "male"),
+                Item(name: "Female", value: "female"),
+                Item(name: "Other", value: "other")
+              ]),
+            )
+          ],
+        ));

lib/shared/widgets/selection/main.dart

@@ -0,0 +1,135 @@
+import 'package:eatiplan_mobile/shared/variables.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:storybook_flutter/storybook_flutter.dart';
+
+class Item {
+  String name;
+  String value;
+  bool isDisabled;
+
+  Item({this.name = "", this.value = "", this.isDisabled = false});
+}
+
+class ESelection extends HookWidget {
+  ESelection({Key? key, required this.itemList, required this.onOptionClick})
+      : super(key: key);
+
+  final List<Item> itemList;
+  final ValueChanged<String> onOptionClick;
+
+  @override
+  Widget build(BuildContext context) {
+    var data = useState<List<String>>([]);
+
+    void onChangeData(String value) {
+      List<String> newData = data.value;
+      newData.contains(value) ? newData.remove(value) : newData.add(value);
+      data.value = newData;
+    }
+
+    return SizedBox(
+      height: itemList.length * 55,
+      child: ListView.builder(
+        addAutomaticKeepAlives: true,
+        shrinkWrap: true,
+        physics: NeverScrollableScrollPhysics(),
+        itemBuilder: (context, index) {
+          return Row(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              SizedBox(
+                width: 16.0 * 3 / 2,
+                height: 16.0 * 3 / 2,
+                child: Checkbox(
+                  checkColor: Colors.white,
+                  fillColor: MaterialStateProperty.all<Color>(itemList[index]
+                              .isDisabled ||
+                          data.value.contains(itemList[index].value.toString())
+                      ? primaryColor
+                      : Colors.grey[100]!),
+                  activeColor:
+                      data.value.contains(itemList[index].value.toString())
+                          ? primaryColor
+                          : Colors.grey,
+                  value: data.value.contains(itemList[index].value.toString()),
+                  onChanged: (value) {
+                    print(itemList[index].value);
+                    print(data.value);
+                    onChangeData(itemList[index].value);
+                  },
+                ),
+              ),
+              const SizedBox(
+                width: 16.0 / 4,
+              ),
+              Row(
+                children: [
+                  Text(
+                    itemList[index].name,
+                    style: const TextStyle(
+                      fontWeight: FontWeight.w400,
+                      fontSize: 15,
+                      color: primaryColor,
+                    ),
+                    overflow: TextOverflow.ellipsis,
+                    maxLines: 1,
+                  ),
+                  const Padding(
+                    padding: EdgeInsets.only(left: 8.0),
+                    child: Icon(
+                      Icons.info_outline,
+                      color: primaryColor,
+                      size: 24.0,
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          );
+        },
+        // separatorBuilder: (context, index) => const SizedBox(
+        //    height: 16.0 * 3 / 4,
+        //  ),
+        itemCount: itemList.length,
+      ),
+    );
+  }
+}
+
+Story get selectionStory => Story(
+      name: "Selection",
+      builder: (context) => Column(
+        children: [
+          Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: ESelection(
+              onOptionClick: (value) {},
+              itemList: [
+                Item(
+                    name: "Intermittent Fasting",
+                    value: "intermittent",
+                    isDisabled: true),
+                Item(
+                    name: "Mediterranean Diet",
+                    value: "mediterranean",
+                    isDisabled: true),
+                Item(name: "Veganism", value: "veganism", isDisabled: true),
+                Item(
+                    name: "Sirtfood Diet", value: "sirtfood", isDisabled: true),
+                Item(
+                    name: "Carnivore Diet",
+                    value: "carnivore",
+                    isDisabled: true),
+                Item(name: "Paleo Diet", value: "paleo", isDisabled: true),
+                Item(
+                    name: "Dessert with Breakfast Diet",
+                    value: "breakfast",
+                    isDisabled: true),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );

pubspec.lock

@@ -106,6 +106,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.2.3"
+  date_time_picker:
+    dependency: "direct main"
+    description:
+      name: date_time_picker
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.0"
   device_frame:
     dependency: transitive
     description:

pubspec.yaml

@@ -32,6 +32,7 @@ dependencies:
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
+  date_time_picker: ^2.1.0
   cupertino_icons: ^1.0.2
   linter: ^1.25.0
   mix: ^0.0.6