diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index c4bddfd..48812cf 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -4,4 +4,4 @@ ## Description - + diff --git a/README.md b/README.md index d31feca..1fb69a8 100644 --- a/README.md +++ b/README.md @@ -71,8 +71,8 @@ flutter build apk | | | | | | Page 33 | Page 34 | Page 35 | Page 36 | -| ------------- | ------------- | ------------- | ------------- | -| | | | | +| ------------- | ------------- |------------------------------------------------------| ------------- | +| | | | | | Page 37 | Page 38 | Page 39 | Page 40 | | ------------- | ------------- | ------------- | ------------- | diff --git a/art/screenshots/page_35.png b/art/screenshots/page_35.png new file mode 100644 index 0000000..5eadada Binary files /dev/null and b/art/screenshots/page_35.png differ diff --git a/assets/png/m35/img1.jpeg b/assets/png/m35/img1.jpeg new file mode 100644 index 0000000..a2df390 Binary files /dev/null and b/assets/png/m35/img1.jpeg differ diff --git a/assets/png/m35/img2.png b/assets/png/m35/img2.png new file mode 100644 index 0000000..ccad78e Binary files /dev/null and b/assets/png/m35/img2.png differ diff --git a/assets/png/m35/img3.jpeg b/assets/png/m35/img3.jpeg new file mode 100644 index 0000000..6907073 Binary files /dev/null and b/assets/png/m35/img3.jpeg differ diff --git a/assets/png/m35/img4.jpeg b/assets/png/m35/img4.jpeg new file mode 100644 index 0000000..ecd0cb5 Binary files /dev/null and b/assets/png/m35/img4.jpeg differ diff --git a/assets/png/m35/img5.png b/assets/png/m35/img5.png new file mode 100644 index 0000000..ccad78e Binary files /dev/null and b/assets/png/m35/img5.png differ diff --git a/lib/src/mobile_ui/31/page_31.dart b/lib/src/mobile_ui/31/page_31.dart index fe2744e..9761cd1 100644 --- a/lib/src/mobile_ui/31/page_31.dart +++ b/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 { 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, ), ), ), diff --git a/lib/src/mobile_ui/35/page_35.dart b/lib/src/mobile_ui/35/page_35.dart new file mode 100644 index 0000000..c631048 --- /dev/null +++ b/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(), + ], + ), + ), + ), + ); + } +} diff --git a/lib/src/mobile_ui/35/widgets/date_item.dart b/lib/src/mobile_ui/35/widgets/date_item.dart new file mode 100644 index 0000000..5245fd6 --- /dev/null +++ b/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; + } +} diff --git a/lib/src/mobile_ui/35/widgets/event.dart b/lib/src/mobile_ui/35/widgets/event.dart new file mode 100644 index 0000000..2213492 --- /dev/null +++ b/lib/src/mobile_ui/35/widgets/event.dart @@ -0,0 +1,175 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class Event extends StatelessWidget { + const Event({super.key}); + + @override + Widget build(BuildContext context) { + return SliverToBoxAdapter( + child: Container( + decoration: BoxDecoration( + color: Color(0xFFF4F4F4), + borderRadius: BorderRadius.circular(36), + boxShadow: [ + BoxShadow( + color: Colors.grey.withOpacity(0.5), + spreadRadius: 1, + blurRadius: 2, + offset: Offset(0, 0), + ), + ], + ), + height: 365.h, + child: Column( + children: [ + SizedBox( + height: 170.h, + child: Stack( + fit: StackFit.expand, + children: [ + Container( + height: 170.h, + decoration: BoxDecoration( + borderRadius: BorderRadius.only( + topLeft: Radius.circular(24.r), topRight: Radius.circular(24.r)), + image: DecorationImage( + image: AssetImage('assets/png/m35/img1.jpeg'), + fit: BoxFit.cover, + ), + ), + ), + Positioned( + left: 20.w, + top: 21.h, + child: Container( + width: 40.w, + height: 40.w, + decoration: BoxDecoration(color: Color(0xffD0D0D0), shape: BoxShape.circle), + child: Icon(Icons.favorite), + ), + ), + ], + ), + ), + Container( + height: 190.h, + width: double.infinity, + decoration: BoxDecoration( + color: Color(0xffF4F4F4), + borderRadius: BorderRadius.only( + bottomLeft: Radius.circular(24.r), bottomRight: Radius.circular(24.r)), + ), + padding: EdgeInsets.only(left: 18.w, right: 34.w, top: 17.h, bottom: 31.h), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "EVENTS", + style: TextStyle( + fontWeight: FontWeight.w600, + fontSize: 10.sp, + height: 1.1, + color: Color(0xff000000), + ), + ), + Container( + margin: EdgeInsets.symmetric(vertical: 4.h), + child: Text( + "National health movement", + style: TextStyle( + fontWeight: FontWeight.w600, + fontSize: 16.sp, + height: 1.3, + color: Color(0xff000000), + ), + ), + ), + Text( + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum, proin sed erat amet platea.", + style: TextStyle( + fontWeight: FontWeight.w400, + fontSize: 12.sp, + height: 1.3, + color: Color(0xff000000), + ), + maxLines: 3, + ), + Spacer(), + SizedBox( + height: 36.h, + width: double.infinity, + child: Row( + children: [ + Container( + height: 36.h, + width: 36.h, + margin: EdgeInsets.only(right: 8.w), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8.r), + image: DecorationImage( + image: AssetImage('assets/png/m35/img3.jpeg'), + fit: BoxFit.cover, + ), + ), + ), + Container( + height: 36.h, + width: 36.h, + margin: EdgeInsets.only(right: 8.w), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8.r), + image: DecorationImage( + image: AssetImage('assets/png/m35/img4.jpeg'), + fit: BoxFit.cover, + ), + ), + ), + Container( + height: 36.h, + padding: EdgeInsets.symmetric(horizontal: 8.w), + margin: EdgeInsets.only(right: 8.w), + decoration: BoxDecoration( + color: Color(0xFFC4C4C4), + borderRadius: BorderRadius.circular(8.r), + ), + alignment: Alignment.center, + child: Text( + "+12", + style: TextStyle( + fontWeight: FontWeight.w600, + fontSize: 12.sp, + height: 1.1, + color: Color(0xff000000), + ), + ), + ), + Spacer(), + Container( + height: 36.h, + padding: EdgeInsets.symmetric(horizontal: 21.5.w), + decoration: BoxDecoration( + color: Color(0xFFC4C4C4), borderRadius: BorderRadius.circular(8.r)), + alignment: Alignment.center, + child: Text( + "Join", + style: TextStyle( + fontWeight: FontWeight.w600, + fontSize: 12.sp, + height: 1.1, + color: Color(0xff000000), + ), + ), + ) + ], + ), + ), + ], + ), + ) + ], + ), + ), + ); + } +} diff --git a/lib/src/mobile_ui/35/widgets/nearby_event.dart b/lib/src/mobile_ui/35/widgets/nearby_event.dart new file mode 100644 index 0000000..a258601 --- /dev/null +++ b/lib/src/mobile_ui/35/widgets/nearby_event.dart @@ -0,0 +1,168 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class NearbyEvent extends StatelessWidget { + const NearbyEvent({super.key}); + + @override + Widget build(BuildContext context) { + return SliverToBoxAdapter( + child: Column( + children: [ + Container( + width: double.infinity, + height: 80.h, + decoration: BoxDecoration( + color: (Color(0xffF4F4F4)), + borderRadius: BorderRadius.only( + topLeft: Radius.circular(24.r), topRight: Radius.circular(24.r)), + ), + child: Container( + margin: EdgeInsets.only(left: 36.w, right: 36.w), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Nearby Events", + style: TextStyle( + fontWeight: FontWeight.w600, + fontSize: 16.sp, + color: Color(0xff000000), + ), + overflow: TextOverflow.ellipsis, + ), + SizedBox(height: 4.h), + Row( + children: [ + Icon( + Icons.location_on, + color: Color(0xff000000), + size: 16, + ), + Expanded( + child: Text( + "110 Chan Tin Lau street, Hong Kong", + style: TextStyle( + fontWeight: FontWeight.w400, + fontSize: 12.sp, + color: Color(0xff000000), + ), + overflow: TextOverflow.ellipsis, + ), + ), + ], + ) + ], + ), + ), + ), + Container( + width: double.infinity, + height: 350.h, + decoration: BoxDecoration( + color: (Color(0xffF4F4F4)), + borderRadius: BorderRadius.only( + bottomLeft: Radius.circular(24.r), bottomRight: Radius.circular(24.r)), + image: DecorationImage( + image: AssetImage('assets/png/m35/img5.png'), + fit: BoxFit.cover, + ), + ), + child: Column( + children: [ + Spacer(), + _ListItem(), + _ListItem(), + ], + ), + ), + ], + ), + ); + } +} + +class _ListItem extends StatelessWidget { + const _ListItem({super.key}); + + @override + Widget build(BuildContext context) { + return Container( + width: double.infinity, + height: 80.h, + margin: EdgeInsets.only(left: 20.w, right: 21.w, bottom: 8.h), + decoration: + BoxDecoration(color: (Color(0xffF4F4F4)), borderRadius: BorderRadius.circular(16.r)), + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Container( + width: 45.w, + height: 55.h, + margin: EdgeInsets.only(left: 21.w, right: 20.w), + decoration: + BoxDecoration(color: Color(0xffD0D0D0), borderRadius: BorderRadius.circular(16.r)), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + "Jun", + style: TextStyle( + fontWeight: FontWeight.w600, + fontSize: 16.sp, + height: 1.2, + color: Color(0xff000000), + ), + ), + Text( + "16", + style: TextStyle( + fontWeight: FontWeight.w400, + fontSize: 16.sp, + height: 1.2, + color: Color(0xff000000), + ), + ), + ], + ), + ), + Expanded( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Event name #1", + style: TextStyle( + fontWeight: FontWeight.w600, + fontSize: 16.sp, + height: 1.2, + color: Color(0xff000000), + ), + ), + Text( + "\$500 ยท 8 - 9 am", + style: TextStyle( + fontWeight: FontWeight.w400, + fontSize: 16.sp, + height: 1.2, + color: Color(0xff000000), + ), + ), + ], + ), + ), + // Spacer(), + Container( + margin: EdgeInsets.only(right: 20.w), + child: Icon( + Icons.favorite, + color: Colors.black, + ), + ) + ], + ), + ); + } +} diff --git a/lib/src/mobile_ui/root/root.dart b/lib/src/mobile_ui/root/root.dart index 769740c..342a46e 100644 --- a/lib/src/mobile_ui/root/root.dart +++ b/lib/src/mobile_ui/root/root.dart @@ -233,18 +233,23 @@ class RootWidget extends StatelessWidget { }, ), PageButtonWidget( - page: 37, + page: 35, onPressed: () { - context.push("/${MobileRoutes.pg37}"); + context.push("/${MobileRoutes.pg35}"); }, ), - PageButtonWidget( page: 36, onPressed: () { context.push("/${MobileRoutes.pg36}"); }, ), + PageButtonWidget( + page: 37, + onPressed: () { + context.push("/${MobileRoutes.pg37}"); + }, + ), /// 41 - 60 /// diff --git a/lib/src/mobile_ui/routes/routes.dart b/lib/src/mobile_ui/routes/routes.dart index 9636b23..95549e2 100644 --- a/lib/src/mobile_ui/routes/routes.dart +++ b/lib/src/mobile_ui/routes/routes.dart @@ -38,8 +38,9 @@ class MobileRoutes { static const pg32 = "pg32"; static const pg33 = "pg33"; static const pg34 = "pg34"; - static const pg37 = "pg37"; + static const pg35 = "pg35"; static const pg36 = "pg36"; + static const pg37 = "pg37"; /// 41 - 60 static const pg42 = "pg42"; diff --git a/lib/src/navigation/new_routes.dart b/lib/src/navigation/new_routes.dart index 6f10eaf..6f6019d 100644 --- a/lib/src/navigation/new_routes.dart +++ b/lib/src/navigation/new_routes.dart @@ -20,6 +20,7 @@ import 'package:flutter_ui_kit_obkm/src/mobile_ui/29/page_29.dart'; import 'package:flutter_ui_kit_obkm/src/mobile_ui/3/page3.dart'; import 'package:flutter_ui_kit_obkm/src/mobile_ui/30/page_30.dart'; import 'package:flutter_ui_kit_obkm/src/mobile_ui/31/page_31.dart'; +import 'package:flutter_ui_kit_obkm/src/mobile_ui/35/page_35.dart'; import 'package:flutter_ui_kit_obkm/src/mobile_ui/4/page4.dart'; import 'package:flutter_ui_kit_obkm/src/mobile_ui/49/page_49.dart'; import 'package:flutter_ui_kit_obkm/src/mobile_ui/5/page5.dart'; @@ -210,13 +211,17 @@ var newRoutesConfig = GoRouter( builder: (BuildContext context, GoRouterState state) => const Page34(), ), GoRoute( - path: MobileRoutes.pg37, - builder: (BuildContext context, GoRouterState state) => const Page37(), + path: MobileRoutes.pg35, + builder: (BuildContext context, GoRouterState state) => const Page35(), ), GoRoute( path: MobileRoutes.pg36, builder: (BuildContext context, GoRouterState state) => const Page36(), ), + GoRoute( + path: MobileRoutes.pg37, + builder: (BuildContext context, GoRouterState state) => const Page37(), + ), /// Mobile 41 - 60 GoRoute( diff --git a/pubspec.lock b/pubspec.lock index bc15052..a8b1807 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -385,7 +385,7 @@ packages: source: hosted version: "4.0.17" intl: - dependency: transitive + dependency: "direct main" description: name: intl sha256: "3bc132a9dbce73a7e4a21a17d06e1878839ffbf975568bc875c60537824b0c4d" diff --git a/pubspec.yaml b/pubspec.yaml index 50e7f1b..6db82bc 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -39,6 +39,7 @@ dependencies: table_calendar: ^3.0.6 http: ^0.13.5 go_router: ^5.1.10 + intl: ^0.18.1 dev_dependencies: flutter_test: @@ -104,6 +105,7 @@ flutter: - assets/png/m28/ - assets/png/m29/ - assets/png/m31/ + - assets/png/m35/ - assets/png/m37/ # SVGs