Mobile Page 35

.github/pull_request_template.md

@@ -4,4 +4,4 @@
 
 ## Description
 
-<!--- Describe briefly what this pull request does -->
+<!--- Describe briefly what this pull request does e.g Implemented mobile screen 1-->

README.md

@@ -71,8 +71,8 @@ flutter build apk
 | <img src="art/screenshots/page_29.png" width="200"/> | <img src="art/screenshots/page_30.png" width="200"/> | <img src="art/screenshots/page_31.png" width="200"/> | <img src="art/screenshots/page_32.png" width="200"/> |
 
 | Page 33  | Page 34 | Page 35 | Page 36 |
-| ------------- | ------------- | ------------- | ------------- |
-| <img src="art/screenshots/page_33.png" width="200"/> | <img src="art/screenshots/page_34.png" width="200"/> | | <img src="art/screenshots/page_36.png" width="200"/> |
+| ------------- | ------------- |------------------------------------------------------| ------------- |
+| <img src="art/screenshots/page_33.png" width="200"/> | <img src="art/screenshots/page_34.png" width="200"/> | <img src="art/screenshots/page_35.png" width="200"/> | <img src="art/screenshots/page_36.png" width="200"/> |
 
 | Page 37  | Page 38 | Page 39 | Page 40 |
 | ------------- | ------------- | ------------- | ------------- |

lib/src/mobile_ui/31/page_31.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:flutter_ui_kit_obkm/gen/assets.gen.dart';
+import 'package:go_router/go_router.dart';
 
 class Page31 extends StatefulWidget {
   const Page31({Key? key}) : super(key: key);
@@ -154,24 +155,29 @@ class _Page31State extends State<Page31> {
       bottomNavigationBar: _bottomNavBar(),
       floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
       extendBody: true,
-      floatingActionButton: Container(
-        width: 76.w,
-        height: 76.w,
-        decoration: BoxDecoration(
-          color: Color(0xfff4f4f4),
-          borderRadius: BorderRadius.circular(76.w),
-          boxShadow: [
-            BoxShadow(
-              color: Colors.black.withOpacity(0.25),
-              blurRadius: 8,
-              offset: const Offset(0, 2),
+      floatingActionButton: GestureDetector(
+        onTap: () {
+          context.pop();
+        },
+        child: Container(
+          width: 76.w,
+          height: 76.w,
+          decoration: BoxDecoration(
+            color: Color(0xfff4f4f4),
+            borderRadius: BorderRadius.circular(76.w),
+            boxShadow: [
+              BoxShadow(
+                color: Colors.black.withOpacity(0.25),
+                blurRadius: 8,
+                offset: const Offset(0, 2),
+              ),
+            ],
+          ),
+          child: Center(
+            child: Icon(
+              Icons.play_arrow,
+              size: 36.r,
             ),
-          ],
-        ),
-        child: Center(
-          child: Icon(
-            Icons.play_arrow,
-            size: 36.r,
           ),
         ),
       ),

lib/src/mobile_ui/35/page_35.dart

@@ -0,0 +1,104 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:flutter_ui_kit_obkm/src/mobile_ui/35/widgets/date_item.dart';
+import 'package:flutter_ui_kit_obkm/src/mobile_ui/35/widgets/event.dart';
+import 'package:flutter_ui_kit_obkm/src/mobile_ui/35/widgets/nearby_event.dart';
+import 'package:go_router/go_router.dart';
+
+class Page35 extends StatelessWidget {
+  const Page35({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: SafeArea(
+        child: Padding(
+          padding: EdgeInsets.only(left: 24.w, right: 24.w),
+          child: CustomScrollView(
+            physics: ClampingScrollPhysics(),
+            slivers: [
+              SliverToBoxAdapter(
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    GestureDetector(
+                        onTap: () {
+                          context.pop();
+                        },
+                        child: Icon(Icons.chevron_left_rounded)),
+                    Icon(Icons.calendar_today_rounded)
+                  ],
+                ),
+              ),
+              SliverToBoxAdapter(
+                child: Padding(
+                  padding: EdgeInsets.only(top: 18.h, bottom: 2.h),
+                  child: Text(
+                    "Events",
+                    style: TextStyle(
+                      fontWeight: FontWeight.w600,
+                      fontSize: 22.sp,
+                      height: 1.1,
+                      color: Color(0xff000000),
+                    ),
+                  ),
+                ),
+              ),
+              SliverToBoxAdapter(
+                child: Row(
+                  mainAxisSize: MainAxisSize.max,
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    DateItem(
+                      isToday: false,
+                      day: 'SUN',
+                      dayNumber: '14',
+                    ),
+                    DateItem(
+                      isToday: false,
+                      day: 'MON',
+                      dayNumber: '15',
+                      hasData: true,
+                    ),
+                    DateItem(
+                      isToday: false,
+                      day: 'TUE',
+                      dayNumber: '16',
+                    ),
+                    DateItem(
+                      isToday: true,
+                      day: 'WED',
+                      dayNumber: '17',
+                      hasData: true,
+                    ),
+                    DateItem(
+                      isToday: false,
+                      day: 'THU',
+                      dayNumber: '18',
+                      hasData: true,
+                    ),
+                    DateItem(
+                      isToday: false,
+                      day: 'FRI',
+                      dayNumber: '19',
+                    ),
+                    DateItem(
+                      isToday: false,
+                      day: 'SAT',
+                      dayNumber: '20',
+                    )
+                  ],
+                ),
+              ),
+              SliverToBoxAdapter(child: SizedBox(height: 35.h)),
+              Event(),
+              SliverToBoxAdapter(child: SizedBox(height: 18.h)),
+              NearbyEvent(),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/src/mobile_ui/35/widgets/date_item.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+class DateItem extends StatelessWidget {
+  final bool isToday;
+  final bool hasData;
+  final String day;
+  final String dayNumber;
+  const DateItem({
+    Key? key,
+    required this.isToday,
+    required this.day,
+    required this.dayNumber,
+    this.hasData = false,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: isToday ? Color(0xffC4C4C4) : null,
+        borderRadius: BorderRadius.circular(32.r),
+      ),
+      padding: EdgeInsets.only(left: 8.w, right: 8.w, bottom: 13.h, top: 14.h),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            day,
+            style: TextStyle(
+              fontWeight: FontWeight.w500,
+              fontSize: 13.sp,
+              color: Color(0xff3C3C43).withOpacity(0.3),
+            ),
+          ),
+          Padding(
+            padding: EdgeInsets.only(top: 4.h, bottom: 4.h),
+            child: Text(
+              dayNumber,
+              style: TextStyle(
+                fontWeight: FontWeight.w400,
+                fontSize: 20.sp,
+                color: Color(0xff262626),
+                height: 1.2,
+              ),
+            ),
+          ),
+          Container(
+            width: 8.w,
+            height: 8.w,
+            decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              color: _getDotColor(isToday: isToday, hasData: hasData),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  Color? _getDotColor({required bool isToday, required bool hasData}) {
+    if (isToday && hasData) {
+      return Color(0xff262626);
+    }
+
+    if (hasData) {
+      return Color(0xffC4C4C4);
+    }
+
+    return null;
+  }
+}