From a3805d62ec4ea1295875822ca1f4a96ab8de812f Mon Sep 17 00:00:00 2001 From: mohammad Date: Thu, 1 Aug 2024 15:21:29 +0300 Subject: [PATCH 1/3] Home page UI --- assets/images/Integrations_icon.svg | 9 ++ assets/images/access_icon.svg | 3 + assets/images/asset_icon.svg | 32 ++++++ assets/images/construction_Icon.svg | 31 ++++++ assets/images/devices_icon.svg | 3 + assets/images/energy_icon.svg | 11 ++ assets/images/movein_icon.svg | 5 + assets/images/spase_management_icon.svg | 6 + lib/main.dart | 2 +- lib/pages/auth/view/login_mobile_page.dart | 2 +- lib/pages/auth/view/login_web_page.dart | 2 +- lib/pages/home/view/home_card.dart | 73 +++++++++++++ lib/pages/home/view/home_page.dart | 121 ++++++++++++++++++--- lib/utils/color_manager.dart | 1 + lib/utils/constants/assets.dart | 8 ++ lib/web_layout/web_app_bar.dart | 48 ++++---- lib/web_layout/web_scaffold.dart | 3 +- 17 files changed, 317 insertions(+), 43 deletions(-) create mode 100644 assets/images/Integrations_icon.svg create mode 100644 assets/images/access_icon.svg create mode 100644 assets/images/asset_icon.svg create mode 100644 assets/images/construction_Icon.svg create mode 100644 assets/images/devices_icon.svg create mode 100644 assets/images/energy_icon.svg create mode 100644 assets/images/movein_icon.svg create mode 100644 assets/images/spase_management_icon.svg create mode 100644 lib/pages/home/view/home_card.dart diff --git a/assets/images/Integrations_icon.svg b/assets/images/Integrations_icon.svg new file mode 100644 index 00000000..e3ef7e16 --- /dev/null +++ b/assets/images/Integrations_icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/access_icon.svg b/assets/images/access_icon.svg new file mode 100644 index 00000000..d04fa641 --- /dev/null +++ b/assets/images/access_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/asset_icon.svg b/assets/images/asset_icon.svg new file mode 100644 index 00000000..b7649b97 --- /dev/null +++ b/assets/images/asset_icon.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/construction_Icon.svg b/assets/images/construction_Icon.svg new file mode 100644 index 00000000..7efad965 --- /dev/null +++ b/assets/images/construction_Icon.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/devices_icon.svg b/assets/images/devices_icon.svg new file mode 100644 index 00000000..fbe784d1 --- /dev/null +++ b/assets/images/devices_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/energy_icon.svg b/assets/images/energy_icon.svg new file mode 100644 index 00000000..cd4ebbf9 --- /dev/null +++ b/assets/images/energy_icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/images/movein_icon.svg b/assets/images/movein_icon.svg new file mode 100644 index 00000000..7cf319bc --- /dev/null +++ b/assets/images/movein_icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/images/spase_management_icon.svg b/assets/images/spase_management_icon.svg new file mode 100644 index 00000000..0a52816c --- /dev/null +++ b/assets/images/spase_management_icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/lib/main.dart b/lib/main.dart index 379442f2..42b2f13b 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -38,7 +38,7 @@ class MyApp extends StatelessWidget { useMaterial3: true, // Enable Material 3 ), home: isLoggedIn == 'Success'? - const HomePage() + HomePage() : const LoginPage(), ); diff --git a/lib/pages/auth/view/login_mobile_page.dart b/lib/pages/auth/view/login_mobile_page.dart index 7b52400a..4c38f18e 100644 --- a/lib/pages/auth/view/login_mobile_page.dart +++ b/lib/pages/auth/view/login_mobile_page.dart @@ -27,7 +27,7 @@ class LoginMobilePage extends StatelessWidget { // Navigate to home screen after successful login Navigator.pushReplacement( context, - MaterialPageRoute(builder: (context) => const HomePage()), + MaterialPageRoute(builder: (context) => HomePage()), ); } else if (state is LoginFailure) { // Show error message diff --git a/lib/pages/auth/view/login_web_page.dart b/lib/pages/auth/view/login_web_page.dart index 67f7c7bc..59b26946 100644 --- a/lib/pages/auth/view/login_web_page.dart +++ b/lib/pages/auth/view/login_web_page.dart @@ -29,7 +29,7 @@ class LoginWebPage extends StatelessWidget { // Navigate to home screen after successful login Navigator.pushReplacement( context, - MaterialPageRoute(builder: (context) => const HomePage()), + MaterialPageRoute(builder: (context) => HomePage()), ); } else if (state is LoginFailure) { // Show error message diff --git a/lib/pages/home/view/home_card.dart b/lib/pages/home/view/home_card.dart new file mode 100644 index 00000000..706c2456 --- /dev/null +++ b/lib/pages/home/view/home_card.dart @@ -0,0 +1,73 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; + +import '../../../utils/color_manager.dart'; + +class HomeCard extends StatelessWidget { + final bool active; + final String img; + final int index; + final String name; + final Function()? onTap; + const HomeCard({ + super.key, + required this.name, + required this.index, + this.active = false, + required this.img, + required this.onTap, + }); + @override + Widget build(BuildContext context) { + bool evenNumbers = index % 2 == 0; + return InkWell( + onTap: active ? onTap : null, + child: Container( + padding: const EdgeInsets.only(left: 10, bottom: 10), + decoration: BoxDecoration( + color: evenNumbers&&active? + ColorsManager.blueColor.withOpacity(0.8) : + (active ?ColorsManager.blueColor + : ColorsManager.blueColor.withOpacity(0.2)), + borderRadius: BorderRadius.circular(30), + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + FittedBox( + fit: BoxFit.scaleDown, + child: Text( + name, + style: const TextStyle( + fontSize: 20, + color: Colors.white, + fontWeight: FontWeight.bold, + ), + ), + ), + ], + ), + ), + const SizedBox(height: 10), + Expanded( + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + SizedBox( + child: SvgPicture.asset( + img, + ), + ), + ], + ), + ), + ], + ), + ), + ); + } +} diff --git a/lib/pages/home/view/home_page.dart b/lib/pages/home/view/home_page.dart index de8f0821..2fe11fca 100644 --- a/lib/pages/home/view/home_page.dart +++ b/lib/pages/home/view/home_page.dart @@ -1,30 +1,119 @@ import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; +import 'package:flutter_svg/svg.dart'; import 'package:syncrow_web/pages/home/bloc/home_bloc.dart'; -import 'package:syncrow_web/pages/home/view/tree_page.dart'; -import 'package:syncrow_web/utils/style.dart'; +import 'package:syncrow_web/pages/home/view/home_card.dart'; +import 'package:syncrow_web/utils/color_manager.dart'; +import 'package:syncrow_web/utils/constants/assets.dart'; import 'package:syncrow_web/web_layout/web_scaffold.dart'; class HomePage extends StatelessWidget { - const HomePage({super.key}); + HomePage({super.key}); @override Widget build(BuildContext context) { - return WebScaffold( - appBarTitle: 'Space Management', - appBarBody:[ - Text( - 'Community structure', - style: appBarTextStyle, - ), - Text( - 'Community ', - style: appBarTextStyle - ), - ], + Size size = MediaQuery.of(context).size; + return WebScaffold( + enableMenuSideba:false , + appBarTitle: Row( + children: [ + SvgPicture.asset( + Assets.loginLogo, + width: 150, + ), + ], + ), scaffoldBody: BlocProvider( create: (context) => HomeBloc(), - child: const TreeWidget(), + child: SizedBox( + height: size.height, + width: size.width, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox(height: size.height * 0.1), + const Text( + 'ACCESS YOUR APPS', + style: TextStyle(fontSize: 40, fontWeight: FontWeight.w700), + ), + const SizedBox(height: 30), + Expanded( + flex: 4, + child: SizedBox( + height: size.height * 0.6, + width: size.width * 0.68, + child: GridView.builder( + itemCount: 8, + gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 4, + crossAxisSpacing: 20.0, + mainAxisSpacing: 20.0, + childAspectRatio: 1.5, + ), + itemBuilder: (context, index) { + return HomeCard( + index:index, + active:ceilingSensorButtons[index]['active'], + name: ceilingSensorButtons[index]['title'], + img:ceilingSensorButtons[index]['icon'] , + onTap: () { + + },); + }, + ), + ), + ), + ], + ), + ), ), ); } + + dynamic ceilingSensorButtons = + [ + { + 'title': 'Access', + 'icon': Assets.accessIcon, + 'active': true, + }, + { + 'title': 'Space Management', + 'icon': Assets.spaseManagementIcon, + 'color': ColorsManager.primaryColor, + 'active': true, + }, + { + 'title': 'Devices', + 'icon':Assets.devicesIcon, + 'active': true, + }, + { + 'title': 'Move in', + 'icon': Assets.moveinIcon, + 'active': false, + }, + { + 'title': 'Construction', + 'icon': Assets.constructionIcon, + 'active': false, + }, + { + 'title': 'Energy', + 'icon': Assets.energyIcon, + 'color': ColorsManager.slidingBlueColor.withOpacity(0.2), + 'active': false, + }, + { + 'title': 'Integrations', + 'icon': Assets.integrationsIcon, + 'color': ColorsManager.slidingBlueColor.withOpacity(0.2), + 'active': false, + }, { + 'title': 'Asset', + 'icon': Assets.assetIcon, + 'color': ColorsManager.slidingBlueColor.withOpacity(0.2), + 'active': false, + }, + ]; } diff --git a/lib/utils/color_manager.dart b/lib/utils/color_manager.dart index 96e7a43a..46cb4383 100644 --- a/lib/utils/color_manager.dart +++ b/lib/utils/color_manager.dart @@ -28,4 +28,5 @@ abstract class ColorsManager { static const Color graysColor = Color(0xffEBEBEB); static const Color textGray = Color(0xffD5D5D5); static const Color btnColor = Color(0xFF00008B); + static const Color blueColor = Color(0xFF0036E6); } diff --git a/lib/utils/constants/assets.dart b/lib/utils/constants/assets.dart index 0758fa9a..0d0b3924 100644 --- a/lib/utils/constants/assets.dart +++ b/lib/utils/constants/assets.dart @@ -15,4 +15,12 @@ class Assets { static const String facebook = "assets/images/facebook.svg"; static const String invisiblePassword = "assets/images/Password_invisible.svg"; static const String visiblePassword = "assets/images/Password_visible.svg"; + static const String accessIcon = "assets/images/access_icon.svg"; + static const String spaseManagementIcon = "assets/images/spase_management_icon.svg"; + static const String devicesIcon = "assets/images/devices_icon.svg"; + static const String moveinIcon = "assets/images/movein_icon.svg"; + static const String constructionIcon = "assets/images/construction_icon.svg"; + static const String energyIcon = "assets/images/energy_icon.svg"; + static const String integrationsIcon = "assets/images/Integrations_icon.svg"; + static const String assetIcon = "assets/images/asset_icon.svg"; } diff --git a/lib/web_layout/web_app_bar.dart b/lib/web_layout/web_app_bar.dart index c7655eef..c69350f2 100644 --- a/lib/web_layout/web_app_bar.dart +++ b/lib/web_layout/web_app_bar.dart @@ -2,7 +2,7 @@ import 'package:flutter/material.dart'; import 'package:syncrow_web/utils/color_manager.dart'; class WebAppBar extends StatelessWidget { - final String? title; + final Widget? title; final List? body; const WebAppBar({super.key,this.title,this.body}); @@ -16,11 +16,13 @@ class WebAppBar extends StatelessWidget { child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Expanded( - child: Text( - title!,style: const TextStyle( - fontSize: 30, - color: Colors.white),) + SizedBox(width: 40,), + Expanded( + child: title! + // Text( + // title!,style: const TextStyle( + // fontSize: 30, + // color: Colors.white),) ), if (body != null) Expanded( @@ -30,26 +32,26 @@ class WebAppBar extends StatelessWidget { children: body!, ), ), - Row( + const Row( children: [ - IconButton(onPressed: () {}, - icon: const Icon(Icons.apps_sharp,color: Colors.white,)), - const SizedBox(width: 10,), - const SizedBox.square( - dimension: 40, - child: CircleAvatar( - backgroundColor: Colors.white, - child: SizedBox.square( - dimension: 35, - child: CircleAvatar( - backgroundColor: Colors.grey, - child: FlutterLogo(), - ), - ), - ), - ), + SizedBox(width: 10,), + SizedBox.square( + dimension: 40, + child: CircleAvatar( + backgroundColor: Colors.white, + child: SizedBox.square( + dimension: 35, + child: CircleAvatar( + backgroundColor: Colors.grey, + child: FlutterLogo(), + ), + ), + ), + ), const SizedBox(width: 10,), const Text('mohamamd alnemer ',style: TextStyle(fontSize: 16,color: Colors.white),), + Icon(Icons.arrow_drop_down,color: ColorsManager.whiteColors,), + SizedBox(width: 40,) ], ) ], diff --git a/lib/web_layout/web_scaffold.dart b/lib/web_layout/web_scaffold.dart index 1f697739..e190dac1 100644 --- a/lib/web_layout/web_scaffold.dart +++ b/lib/web_layout/web_scaffold.dart @@ -6,7 +6,7 @@ import 'menu_sidebar.dart'; class WebScaffold extends StatelessWidget { final bool enableMenuSideba; - final String? appBarTitle; + final Widget? appBarTitle; final List? appBarBody; final Widget? scaffoldBody; const WebScaffold({super.key,this.appBarTitle,this.appBarBody,this.scaffoldBody,this.enableMenuSideba=true}); @@ -24,6 +24,7 @@ class WebScaffold extends StatelessWidget { fit: BoxFit.cover, ), ), + Container(color: Colors.white.withOpacity(0.7),), Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ From f6517575d2b80b12bb10f281ecaa143b6f1a8df7 Mon Sep 17 00:00:00 2001 From: mohammad Date: Thu, 1 Aug 2024 15:40:07 +0300 Subject: [PATCH 2/3] Home page UI --- lib/pages/home/view/home_card.dart | 2 +- lib/pages/home/view/home_page.dart | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/pages/home/view/home_card.dart b/lib/pages/home/view/home_card.dart index 706c2456..7f0dc57d 100644 --- a/lib/pages/home/view/home_card.dart +++ b/lib/pages/home/view/home_card.dart @@ -23,7 +23,7 @@ class HomeCard extends StatelessWidget { return InkWell( onTap: active ? onTap : null, child: Container( - padding: const EdgeInsets.only(left: 10, bottom: 10), + padding: const EdgeInsets.only(left: 10, bottom: 10,right: 10,), decoration: BoxDecoration( color: evenNumbers&&active? ColorsManager.blueColor.withOpacity(0.8) : diff --git a/lib/pages/home/view/home_page.dart b/lib/pages/home/view/home_page.dart index 2fe11fca..ff919cfc 100644 --- a/lib/pages/home/view/home_page.dart +++ b/lib/pages/home/view/home_page.dart @@ -58,7 +58,7 @@ class HomePage extends StatelessWidget { img:ceilingSensorButtons[index]['icon'] , onTap: () { - },); + },); }, ), ), @@ -78,7 +78,7 @@ class HomePage extends StatelessWidget { 'active': true, }, { - 'title': 'Space Management', + 'title': 'Space\nManagement', 'icon': Assets.spaseManagementIcon, 'color': ColorsManager.primaryColor, 'active': true, From eb686b20cf48262ec7cb6b4d67973c2c18260f27 Mon Sep 17 00:00:00 2001 From: mohammad Date: Sun, 4 Aug 2024 10:13:12 +0300 Subject: [PATCH 3/3] Home page UI --- lib/main.dart | 2 +- lib/pages/home/view/home_card.dart | 9 +- lib/pages/home/view/home_page.dart | 121 ++-------------------- lib/pages/home/view/home_page_mobile.dart | 118 +++++++++++++++++++++ lib/pages/home/view/home_page_web.dart | 119 +++++++++++++++++++++ 5 files changed, 251 insertions(+), 118 deletions(-) create mode 100644 lib/pages/home/view/home_page_mobile.dart create mode 100644 lib/pages/home/view/home_page_web.dart diff --git a/lib/main.dart b/lib/main.dart index 42b2f13b..b0cbeab9 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -38,7 +38,7 @@ class MyApp extends StatelessWidget { useMaterial3: true, // Enable Material 3 ), home: isLoggedIn == 'Success'? - HomePage() + const HomePage() : const LoginPage(), ); diff --git a/lib/pages/home/view/home_card.dart b/lib/pages/home/view/home_card.dart index 7f0dc57d..287bb4f4 100644 --- a/lib/pages/home/view/home_card.dart +++ b/lib/pages/home/view/home_card.dart @@ -1,7 +1,6 @@ import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; - -import '../../../utils/color_manager.dart'; +import 'package:syncrow_web/utils/color_manager.dart'; class HomeCard extends StatelessWidget { final bool active; @@ -23,12 +22,12 @@ class HomeCard extends StatelessWidget { return InkWell( onTap: active ? onTap : null, child: Container( - padding: const EdgeInsets.only(left: 10, bottom: 10,right: 10,), + padding: const EdgeInsets.only(left: 10,right: 10,bottom: 10), decoration: BoxDecoration( - color: evenNumbers&&active? + color: evenNumbers && active? ColorsManager.blueColor.withOpacity(0.8) : (active ?ColorsManager.blueColor - : ColorsManager.blueColor.withOpacity(0.2)), + : ColorsManager.blueColor.withOpacity(0.2)), borderRadius: BorderRadius.circular(30), ), child: Column( diff --git a/lib/pages/home/view/home_page.dart b/lib/pages/home/view/home_page.dart index ff919cfc..b4225ae2 100644 --- a/lib/pages/home/view/home_page.dart +++ b/lib/pages/home/view/home_page.dart @@ -1,119 +1,16 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_bloc/flutter_bloc.dart'; -import 'package:flutter_svg/svg.dart'; -import 'package:syncrow_web/pages/home/bloc/home_bloc.dart'; -import 'package:syncrow_web/pages/home/view/home_card.dart'; -import 'package:syncrow_web/utils/color_manager.dart'; -import 'package:syncrow_web/utils/constants/assets.dart'; -import 'package:syncrow_web/web_layout/web_scaffold.dart'; +import 'package:flutter/cupertino.dart'; +import 'package:syncrow_web/pages/home/view/home_page_mobile.dart'; +import 'package:syncrow_web/pages/home/view/home_page_web.dart'; +import 'package:syncrow_web/utils/responsive_layout.dart'; class HomePage extends StatelessWidget { - HomePage({super.key}); + const HomePage({super.key}); + @override Widget build(BuildContext context) { - Size size = MediaQuery.of(context).size; - return WebScaffold( - enableMenuSideba:false , - appBarTitle: Row( - children: [ - SvgPicture.asset( - Assets.loginLogo, - width: 150, - ), - ], - ), - scaffoldBody: BlocProvider( - create: (context) => HomeBloc(), - child: SizedBox( - height: size.height, - width: size.width, - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - SizedBox(height: size.height * 0.1), - const Text( - 'ACCESS YOUR APPS', - style: TextStyle(fontSize: 40, fontWeight: FontWeight.w700), - ), - const SizedBox(height: 30), - Expanded( - flex: 4, - child: SizedBox( - height: size.height * 0.6, - width: size.width * 0.68, - child: GridView.builder( - itemCount: 8, - gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: 4, - crossAxisSpacing: 20.0, - mainAxisSpacing: 20.0, - childAspectRatio: 1.5, - ), - itemBuilder: (context, index) { - return HomeCard( - index:index, - active:ceilingSensorButtons[index]['active'], - name: ceilingSensorButtons[index]['title'], - img:ceilingSensorButtons[index]['icon'] , - onTap: () { - - },); - }, - ), - ), - ), - ], - ), - ), - ), + return ResponsiveLayout( + desktopBody: HomeWebPage(), + mobileBody:HomeMobilePage() ); } - - dynamic ceilingSensorButtons = - [ - { - 'title': 'Access', - 'icon': Assets.accessIcon, - 'active': true, - }, - { - 'title': 'Space\nManagement', - 'icon': Assets.spaseManagementIcon, - 'color': ColorsManager.primaryColor, - 'active': true, - }, - { - 'title': 'Devices', - 'icon':Assets.devicesIcon, - 'active': true, - }, - { - 'title': 'Move in', - 'icon': Assets.moveinIcon, - 'active': false, - }, - { - 'title': 'Construction', - 'icon': Assets.constructionIcon, - 'active': false, - }, - { - 'title': 'Energy', - 'icon': Assets.energyIcon, - 'color': ColorsManager.slidingBlueColor.withOpacity(0.2), - 'active': false, - }, - { - 'title': 'Integrations', - 'icon': Assets.integrationsIcon, - 'color': ColorsManager.slidingBlueColor.withOpacity(0.2), - 'active': false, - }, { - 'title': 'Asset', - 'icon': Assets.assetIcon, - 'color': ColorsManager.slidingBlueColor.withOpacity(0.2), - 'active': false, - }, - ]; } diff --git a/lib/pages/home/view/home_page_mobile.dart b/lib/pages/home/view/home_page_mobile.dart new file mode 100644 index 00000000..02159c31 --- /dev/null +++ b/lib/pages/home/view/home_page_mobile.dart @@ -0,0 +1,118 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_bloc/flutter_bloc.dart'; +import 'package:flutter_svg/svg.dart'; +import 'package:syncrow_web/pages/home/bloc/home_bloc.dart'; +import 'package:syncrow_web/pages/home/view/home_card.dart'; +import 'package:syncrow_web/utils/color_manager.dart'; +import 'package:syncrow_web/utils/constants/assets.dart'; +import 'package:syncrow_web/web_layout/web_scaffold.dart'; + +class HomeMobilePage extends StatelessWidget { + HomeMobilePage({super.key}); + @override + Widget build(BuildContext context) { + Size size = MediaQuery.of(context).size; + return WebScaffold( + enableMenuSideba:false , + appBarTitle: Row( + children: [ + SvgPicture.asset( + Assets.loginLogo, + width: 150, + ), + ], + ), + scaffoldBody: BlocProvider( + create: (context) => HomeBloc(), + child: SizedBox( + height: size.height, + width: size.width, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox(height: size.height * 0.05), + const Text( + 'ACCESS YOUR APPS', + style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700), + ), + const SizedBox(height: 30), + Expanded( + flex: 4, + child: SizedBox( + height: size.height * 0.6, + width: size.width * 0.68, + child: GridView.builder( + itemCount: 8, + gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 2, + crossAxisSpacing: 20.0, + mainAxisSpacing: 20.0, + childAspectRatio: 1.5, + ), + itemBuilder: (context, index) { + return HomeCard( + index:index, + active:ceilingSensorButtons[index]['active'], + name: ceilingSensorButtons[index]['title'], + img:ceilingSensorButtons[index]['icon'] , + onTap: () {}, + ); + }, + ), + ), + ), + ], + ), + ), + ), + ); + } + + dynamic ceilingSensorButtons = + [ + { + 'title': 'Access', + 'icon': Assets.accessIcon, + 'active': true, + }, + { + 'title': 'Space\nManagement', + 'icon': Assets.spaseManagementIcon, + 'color': ColorsManager.primaryColor, + 'active': true, + }, + { + 'title': 'Devices', + 'icon':Assets.devicesIcon, + 'active': true, + }, + { + 'title': 'Move in', + 'icon': Assets.moveinIcon, + 'active': false, + }, + { + 'title': 'Construction', + 'icon': Assets.constructionIcon, + 'active': false, + }, + { + 'title': 'Energy', + 'icon': Assets.energyIcon, + 'color': ColorsManager.slidingBlueColor.withOpacity(0.2), + 'active': false, + }, + { + 'title': 'Integrations', + 'icon': Assets.integrationsIcon, + 'color': ColorsManager.slidingBlueColor.withOpacity(0.2), + 'active': false, + }, { + 'title': 'Asset', + 'icon': Assets.assetIcon, + 'color': ColorsManager.slidingBlueColor.withOpacity(0.2), + 'active': false, + }, + ]; +} diff --git a/lib/pages/home/view/home_page_web.dart b/lib/pages/home/view/home_page_web.dart new file mode 100644 index 00000000..f7c4e988 --- /dev/null +++ b/lib/pages/home/view/home_page_web.dart @@ -0,0 +1,119 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_bloc/flutter_bloc.dart'; +import 'package:flutter_svg/svg.dart'; +import 'package:syncrow_web/pages/home/bloc/home_bloc.dart'; +import 'package:syncrow_web/pages/home/view/home_card.dart'; +import 'package:syncrow_web/utils/color_manager.dart'; +import 'package:syncrow_web/utils/constants/assets.dart'; +import 'package:syncrow_web/web_layout/web_scaffold.dart'; + +class HomeWebPage extends StatelessWidget { + HomeWebPage({super.key}); + @override + Widget build(BuildContext context) { + Size size = MediaQuery.of(context).size; + return WebScaffold( + enableMenuSideba:false , + appBarTitle: Row( + children: [ + SvgPicture.asset( + Assets.loginLogo, + width: 150, + ), + ], + ), + scaffoldBody: BlocProvider( + create: (context) => HomeBloc(), + child: SizedBox( + height: size.height, + width: size.width, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox(height: size.height * 0.1), + const Text( + 'ACCESS YOUR APPS', + style: TextStyle(fontSize: 40, fontWeight: FontWeight.w700), + ), + const SizedBox(height: 30), + Expanded( + flex: 4, + child: SizedBox( + height: size.height * 0.6, + width: size.width * 0.68, + child: GridView.builder( + itemCount: 8, + gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 4, + crossAxisSpacing: 20.0, + mainAxisSpacing: 20.0, + childAspectRatio: 1.5, + ), + itemBuilder: (context, index) { + return HomeCard( + index:index, + active:ceilingSensorButtons[index]['active'], + name: ceilingSensorButtons[index]['title'], + img:ceilingSensorButtons[index]['icon'] , + onTap: () { + + },); + }, + ), + ), + ), + ], + ), + ), + ), + ); + } + + dynamic ceilingSensorButtons = + [ + { + 'title': 'Access', + 'icon': Assets.accessIcon, + 'active': true, + }, + { + 'title': 'Space\nManagement', + 'icon': Assets.spaseManagementIcon, + 'color': ColorsManager.primaryColor, + 'active': true, + }, + { + 'title': 'Devices', + 'icon':Assets.devicesIcon, + 'active': true, + }, + { + 'title': 'Move in', + 'icon': Assets.moveinIcon, + 'active': false, + }, + { + 'title': 'Construction', + 'icon': Assets.constructionIcon, + 'active': false, + }, + { + 'title': 'Energy', + 'icon': Assets.energyIcon, + 'color': ColorsManager.slidingBlueColor.withOpacity(0.2), + 'active': false, + }, + { + 'title': 'Integrations', + 'icon': Assets.integrationsIcon, + 'color': ColorsManager.slidingBlueColor.withOpacity(0.2), + 'active': false, + }, { + 'title': 'Asset', + 'icon': Assets.assetIcon, + 'color': ColorsManager.slidingBlueColor.withOpacity(0.2), + 'active': false, + }, + ]; +}