ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-10 07:07:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

access management design revamp, responsiveness and buttons

Browse Source
This commit is contained in:
ashrafzarkanisala
2024-08-31 15:35:17 +03:00
parent 6e183dba9f
commit dbe65bffff
13 changed files with 642 additions and 464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
lib/main.dart
View File

@ -7,30 +7,35 @@ import 'package:syncrow_web/pages/visitor_password/bloc/visitor_password_bloc.da
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import 'package:syncrow_web/services/locator.dart'; import 'package:syncrow_web/services/locator.dart';
import 'package:syncrow_web/utils/app_routes.dart'; import 'package:syncrow_web/utils/app_routes.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/routes_const.dart'; import 'package:syncrow_web/utils/constants/routes_const.dart';
import 'package:syncrow_web/utils/theme/theme.dart';
Future<void> main() async { Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized(); WidgetsFlutterBinding.ensureInitialized();
initialSetup(); initialSetup();
String checkToken = await AuthBloc.getTokenAndValidate(); runApp(MyApp());
GoRouter router = GoRouter(
initialLocation:
checkToken == 'Success' ? RoutesConst.home : RoutesConst.auth,
routes: AppRoutes.getRoutes(),
);
runApp(MyApp(
router: router,
));
} }
class MyApp extends StatelessWidget { class MyApp extends StatelessWidget {
final GoRouter router; MyApp({
const MyApp({
super.key, super.key,
required this.router,
}); });
final GoRouter _router = GoRouter(
initialLocation: RoutesConst.auth,
routes: AppRoutes.getRoutes(),
redirect: (context, state) async {
String checkToken = await AuthBloc.getTokenAndValidate();
final loggedIn = checkToken == 'Success';
final goingToLogin = state.uri.toString() == RoutesConst.auth;
if (!loggedIn && !goingToLogin) return RoutesConst.auth;
if (loggedIn && goingToLogin) return RoutesConst.home;
return null;
},
);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MultiBlocProvider( return MultiBlocProvider(
@ -41,7 +46,7 @@ class MyApp extends StatelessWidget {
) )
], ],
child: MaterialApp.router( child: MaterialApp.router(
debugShowCheckedModeBanner: false, // Hide debug banner debugShowCheckedModeBanner: false,
scrollBehavior: const MaterialScrollBehavior().copyWith( scrollBehavior: const MaterialScrollBehavior().copyWith(
dragDevices: { dragDevices: {
PointerDeviceKind.mouse, PointerDeviceKind.mouse,
@ -50,61 +55,8 @@ class MyApp extends StatelessWidget {
PointerDeviceKind.unknown, PointerDeviceKind.unknown,
}, },
), ),
theme: myTheme,
theme: ThemeData( routerConfig: _router,
fontFamily: 'Aftika',
textTheme: const TextTheme(
bodySmall: TextStyle(
fontSize: 13,
color: ColorsManager.whiteColors,
fontWeight: FontWeight.bold),
bodyMedium: TextStyle(color: Colors.black87, fontSize: 14),
bodyLarge: TextStyle(fontSize: 16, color: Colors.white),
headlineSmall: TextStyle(color: Colors.black87, fontSize: 18),
headlineMedium: TextStyle(color: Colors.black87, fontSize: 20),
headlineLarge: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
colorScheme: ColorScheme.fromSeed(
seedColor: ColorsManager.blueColor,
primary: ColorsManager.blueColor,
onSurface: Colors.grey.shade400,
),
switchTheme: SwitchThemeData(
thumbColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) {
return ColorsManager.blueColor;
}
return ColorsManager.whiteColors;
}),
trackColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) {
return ColorsManager.blueColor.withOpacity(0.5);
}
return ColorsManager.whiteColors;
}),
),
checkboxTheme: CheckboxThemeData(
fillColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) {
return ColorsManager.blueColor;
}
return Colors.grey.shade200;
}),
checkColor: WidgetStateProperty.all(Colors.white),
side: const BorderSide(color: ColorsManager.whiteColors),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
),
),
),
routeInformationProvider: router.routeInformationProvider,
routerDelegate: router.routerDelegate,
routeInformationParser: router.routeInformationParser,
)); ));
} }
} }

384
lib/pages/access_management/view/access_management.dart
View File

@ -4,237 +4,86 @@ import 'package:syncrow_web/pages/access_management/bloc/access_bloc.dart';
import 'package:syncrow_web/pages/access_management/bloc/access_event.dart'; import 'package:syncrow_web/pages/access_management/bloc/access_event.dart';
import 'package:syncrow_web/pages/access_management/bloc/access_state.dart'; import 'package:syncrow_web/pages/access_management/bloc/access_state.dart';
import 'package:syncrow_web/pages/common/buttons/default_button.dart'; import 'package:syncrow_web/pages/common/buttons/default_button.dart';
import 'package:syncrow_web/pages/common/buttons/search_reset_buttons.dart';
import 'package:syncrow_web/pages/common/custom_table.dart'; import 'package:syncrow_web/pages/common/custom_table.dart';
import 'package:syncrow_web/pages/common/date_time_widget.dart'; import 'package:syncrow_web/pages/common/date_time_widget.dart';
import 'package:syncrow_web/pages/common/filter/filter_widget.dart';
import 'package:syncrow_web/pages/common/text_field/custom_web_textfield.dart'; import 'package:syncrow_web/pages/common/text_field/custom_web_textfield.dart';
import 'package:syncrow_web/pages/device_managment/shared/navigate_home_grid_view.dart'; import 'package:syncrow_web/pages/device_managment/shared/navigate_home_grid_view.dart';
import 'package:syncrow_web/pages/visitor_password/view/visitor_password_dialog.dart'; import 'package:syncrow_web/pages/visitor_password/view/visitor_password_dialog.dart';
import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/constants/app_enum.dart'; import 'package:syncrow_web/utils/constants/app_enum.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
import 'package:syncrow_web/utils/style.dart'; import 'package:syncrow_web/utils/style.dart';
import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
import 'package:syncrow_web/web_layout/web_scaffold.dart'; import 'package:syncrow_web/web_layout/web_scaffold.dart';
class AccessManagementPage extends StatelessWidget { class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
const AccessManagementPage({super.key}); const AccessManagementPage({super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size; final isLargeScreen = isLargeScreenSize(context);
final isSmallScreen = isSmallScreenSize(context);
final padding =
isLargeScreen ? const EdgeInsets.all(30) : const EdgeInsets.all(15);
return WebScaffold( return WebScaffold(
enableMenuSideba: false, enableMenuSideba: false,
appBarTitle: Row( appBarTitle: FittedBox(
children: [ child: Text(
Text(
'Access Management', 'Access Management',
style: Theme.of(context).textTheme.headlineLarge, style: Theme.of(context).textTheme.headlineLarge,
)
],
), ),
appBarBody: [ ),
Row( centerBody: Text(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Physical Access', 'Physical Access',
style: Theme.of(context).textTheme.headlineMedium!.copyWith(color: Colors.white), style: Theme.of(context)
.textTheme
.headlineMedium!
.copyWith(color: Colors.white),
), ),
const NavigateHomeGridView(), rightBody: const NavigateHomeGridView(),
],
),
],
scaffoldBody: BlocProvider( scaffoldBody: BlocProvider(
create: (BuildContext context) => AccessBloc()..add(FetchTableData()), create: (BuildContext context) =>
AccessBloc()..add(FetchTableData()),
child: BlocConsumer<AccessBloc, AccessState>( child: BlocConsumer<AccessBloc, AccessState>(
listener: (context, state) {}, listener: (context, state) {},
builder: (context, state) { builder: (context, state) {
final accessBloc = BlocProvider.of<AccessBloc>(context); final accessBloc = BlocProvider.of<AccessBloc>(context);
final filteredData = accessBloc.filteredData; final filteredData = accessBloc.filteredData;
return state is AccessLoaded return state is AccessLoaded
? const Center(child: CircularProgressIndicator()) ? const Center(child: CircularProgressIndicator())
: Container( : Container(
padding: const EdgeInsets.all(30), padding: padding,
height: size.height, height: MediaQuery.of(context).size.height,
width: size.width, width: MediaQuery.of(context).size.width,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Container( FilterWidget(
decoration: containerDecoration, size: MediaQuery.of(context).size,
height: size.height * 0.05, tabs: accessBloc.tabs,
child: ListView.builder( selectedIndex: accessBloc.selectedIndex,
scrollDirection: Axis.horizontal, onTabChanged: (index) {
itemCount: BlocProvider.of<AccessBloc>(context).tabs.length, accessBloc.add(TabChangedEvent(index));
shrinkWrap: true,
itemBuilder: (context, index) {
final isSelected =
index == BlocProvider.of<AccessBloc>(context).selectedIndex;
return InkWell(
onTap: () {
BlocProvider.of<AccessBloc>(context)
.add(TabChangedEvent(index));
},
child: Container(
decoration: BoxDecoration(
color: ColorsManager.boxColor,
border: Border.all(
color: isSelected ? Colors.blue : Colors.transparent,
width: 2.0,
),
borderRadius: index == 0
? const BorderRadius.only(
topLeft: Radius.circular(10),
bottomLeft: Radius.circular(10))
: index == 3
? const BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10))
: null,
),
padding: const EdgeInsets.only(left: 10, right: 10),
child: Center(
child: Text(
BlocProvider.of<AccessBloc>(context).tabs[index],
style: TextStyle(
color: isSelected ? Colors.blue : Colors.black,
),
),
),
),
);
}, },
), ),
), const SizedBox(height: 20),
const SizedBox( if (isSmallScreen)
height: 20, _buildSmallSearchFilters(context, accessBloc)
), else
Row( _buildNormalSearchWidgets(context, accessBloc),
mainAxisSize: MainAxisSize.min, const SizedBox(height: 20),
crossAxisAlignment: CrossAxisAlignment.end, _buildVisitorAdminPasswords(context, accessBloc),
textBaseline: TextBaseline.ideographic, const SizedBox(height: 20),
children: [
Container(
width: size.width * 0.15,
child: CustomWebTextField(
controller: accessBloc.passwordName,
isRequired: true,
textFieldName: 'Name',
description: '',
),
),
const SizedBox(
width: 15,
),
DateTimeWebWidget(
icon: Assets.calendarIcon,
isRequired: false,
title: 'Access Time',
size: size,
endTime: () {
accessBloc.add(SelectTime(context: context, isStart: false));
},
startTime: () {
accessBloc.add(SelectTime(context: context, isStart: true));
},
firstString: BlocProvider.of<AccessBloc>(context).startTime,
secondString: BlocProvider.of<AccessBloc>(context).endTime,
),
const SizedBox(
width: 15,
),
SizedBox(
width: size.width * 0.06,
child: Container(
decoration: containerDecoration,
child: DefaultButton(
onPressed: () {
accessBloc.add(FilterDataEvent(
selectedTabIndex: BlocProvider.of<AccessBloc>(
context)
.selectedIndex, // Pass the selected tab index
passwordName:
accessBloc.passwordName.text.toLowerCase(),
startTime: accessBloc.effectiveTimeTimeStamp,
endTime: accessBloc.expirationTimeTimeStamp));
},
borderRadius: 9,
child: const Text('Search'))),
),
const SizedBox(
width: 10,
),
SizedBox(
width: size.width * 0.06,
child: Container(
decoration: containerDecoration,
child: DefaultButton(
onPressed: () {
accessBloc.add(ResetSearch());
},
backgroundColor: ColorsManager.whiteColors,
borderRadius: 9,
child: Text(
'Reset',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(color: Colors.black),
),
),
),
),
],
),
const SizedBox(
height: 20,
),
Wrap(
children: [
Container(
width: size.width * 0.15,
decoration: containerDecoration,
child: DefaultButton(
onPressed: () {
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return const VisitorPasswordDialog();
},
).then((v) {
if (v != null) {
accessBloc.add(FetchTableData());
}
});
},
borderRadius: 8,
child: const Text('+ Create Visitor Password ')),
),
const SizedBox(
width: 10,
),
Container(
width: size.width * 0.12,
decoration: containerDecoration,
child: DefaultButton(
borderRadius: 8,
backgroundColor: ColorsManager.whiteColors,
child: Text(
'Admin Password',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(color: Colors.black),
)))
],
),
const SizedBox(
height: 20,
),
Expanded( Expanded(
child: DynamicTable( child: DynamicTable(
isEmpty: filteredData.isEmpty, isEmpty: filteredData.isEmpty,
withCheckBox: false, withCheckBox: false,
size: size, size: MediaQuery.of(context).size,
cellDecoration: containerDecoration, cellDecoration: containerDecoration,
headers: const [ headers: const [
'Name', 'Name',
@ -256,12 +105,155 @@ class AccessManagementPage extends StatelessWidget {
item.passwordStatus.value, item.passwordStatus.value,
]; ];
}).toList(), }).toList(),
) )),
// : const Center(child: CircularProgressIndicator()),
)
], ],
), ),
); );
}))); })));
} }
Wrap _buildVisitorAdminPasswords(
BuildContext context, AccessBloc accessBloc) {
return Wrap(
spacing: 10,
runSpacing: 10,
children: [
Container(
width: 205,
height: 35,
decoration: containerDecoration,
child: DefaultButton(
onPressed: () {
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return const VisitorPasswordDialog();
},
).then((v) {
if (v != null) {
accessBloc.add(FetchTableData());
}
});
},
borderRadius: 8,
child: Text(
'+ Create Visitor Password ',
style: context.textTheme.titleSmall!
.copyWith(color: Colors.white, fontSize: 12),
)),
),
Container(
width: 133,
height: 35,
decoration: containerDecoration,
child: DefaultButton(
borderRadius: 8,
backgroundColor: ColorsManager.whiteColors,
child: Text(
'Admin Password',
style: context.textTheme.titleSmall!
.copyWith(color: Colors.black, fontSize: 12),
)),
),
],
);
}
Row _buildNormalSearchWidgets(BuildContext context, AccessBloc accessBloc) {
return Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
textBaseline: TextBaseline.ideographic,
children: [
SizedBox(
width: MediaQuery.of(context).size.width * 0.15,
child: CustomWebTextField(
controller: accessBloc.passwordName,
height: 36,
isRequired: true,
textFieldName: 'Name',
description: '',
),
),
const SizedBox(width: 15),
SizedBox(
child: DateTimeWebWidget(
icon: Assets.calendarIcon,
isRequired: false,
title: 'Access Time',
size: MediaQuery.of(context).size,
endTime: () {
accessBloc.add(SelectTime(context: context, isStart: false));
},
startTime: () {
accessBloc.add(SelectTime(context: context, isStart: true));
},
firstString: BlocProvider.of<AccessBloc>(context).startTime,
secondString: BlocProvider.of<AccessBloc>(context).endTime,
),
),
const SizedBox(width: 15),
SearchResetButtons(
onSearch: () {
accessBloc.add(FilterDataEvent(
selectedTabIndex:
BlocProvider.of<AccessBloc>(context).selectedIndex,
passwordName: accessBloc.passwordName.text.toLowerCase(),
startTime: accessBloc.effectiveTimeTimeStamp,
endTime: accessBloc.expirationTimeTimeStamp));
},
onReset: () {
accessBloc.add(ResetSearch());
},
),
],
);
}
Widget _buildSmallSearchFilters(BuildContext context, AccessBloc accessBloc) {
return Wrap(
spacing: 20,
runSpacing: 10,
children: [
SizedBox(
width: MediaQuery.of(context).size.width * 0.15,
child: CustomWebTextField(
controller: accessBloc.passwordName,
isRequired: true,
height: 36,
textFieldName: 'Name',
description: '',
),
),
DateTimeWebWidget(
icon: Assets.calendarIcon,
isRequired: false,
title: 'Access Time',
size: MediaQuery.of(context).size,
endTime: () {
accessBloc.add(SelectTime(context: context, isStart: false));
},
startTime: () {
accessBloc.add(SelectTime(context: context, isStart: true));
},
firstString: BlocProvider.of<AccessBloc>(context).startTime,
secondString: BlocProvider.of<AccessBloc>(context).endTime,
),
SearchResetButtons(
onSearch: () {
accessBloc.add(FilterDataEvent(
selectedTabIndex:
BlocProvider.of<AccessBloc>(context).selectedIndex,
passwordName: accessBloc.passwordName.text.toLowerCase(),
startTime: accessBloc.effectiveTimeTimeStamp,
endTime: accessBloc.expirationTimeTimeStamp));
},
onReset: () {
accessBloc.add(ResetSearch());
},
),
],
);
}
} }

6
lib/pages/auth/bloc/auth_bloc.dart
View File

@ -135,6 +135,7 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
emit(const LoginFailure(error: 'Something went wrong')); emit(const LoginFailure(error: 'Something went wrong'));
return; return;
} }
token = await AuthenticationAPI.loginWithEmail( token = await AuthenticationAPI.loginWithEmail(
model: LoginWithEmailModel( model: LoginWithEmailModel(
email: event.username, email: event.username,
@ -143,10 +144,10 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
); );
} catch (failure) { } catch (failure) {
validate = 'Invalid Credentials!'; validate = 'Invalid Credentials!';
emit(AuthInitialState()); emit(const LoginFailure(error: 'Invalid Credentials!'));
// emit(const LoginFailure(error: 'Something went wrong'));
return; return;
} }
if (token.accessTokenIsNotEmpty) { if (token.accessTokenIsNotEmpty) {
FlutterSecureStorage storage = const FlutterSecureStorage(); FlutterSecureStorage storage = const FlutterSecureStorage();
await storage.write( await storage.write(
@ -155,7 +156,6 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
key: UserModel.userUuidKey, key: UserModel.userUuidKey,
value: Token.decodeToken(token.accessToken)['uuid'].toString()); value: Token.decodeToken(token.accessToken)['uuid'].toString());
user = UserModel.fromToken(token); user = UserModel.fromToken(token);
debugPrint(token.accessToken);
loginEmailController.clear(); loginEmailController.clear();
loginPasswordController.clear(); loginPasswordController.clear();
emit(LoginSuccess()); emit(LoginSuccess());

287
lib/pages/auth/view/login_web_page.dart
View File

@ -10,7 +10,6 @@ import 'package:syncrow_web/pages/auth/model/region_model.dart';
import 'package:syncrow_web/pages/auth/view/forget_password_page.dart'; import 'package:syncrow_web/pages/auth/view/forget_password_page.dart';
import 'package:syncrow_web/pages/common/buttons/default_button.dart'; import 'package:syncrow_web/pages/common/buttons/default_button.dart';
import 'package:syncrow_web/pages/common/first_layer.dart'; import 'package:syncrow_web/pages/common/first_layer.dart';
import 'package:syncrow_web/pages/home/view/home_page.dart';
import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart'; import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/constants/routes_const.dart'; import 'package:syncrow_web/utils/constants/routes_const.dart';
@ -32,7 +31,7 @@ class _LoginWebPageState extends State<LoginWebPage> {
child: BlocConsumer<AuthBloc, AuthState>( child: BlocConsumer<AuthBloc, AuthState>(
listener: (context, state) { listener: (context, state) {
if (state is LoginSuccess) { if (state is LoginSuccess) {
context.replace(RoutesConst.home); GoRouter.of(context).go(RoutesConst.home);
} else if (state is LoginFailure) { } else if (state is LoginFailure) {
ScaffoldMessenger.of(context).showSnackBar( ScaffoldMessenger.of(context).showSnackBar(
SnackBar( SnackBar(
@ -55,7 +54,8 @@ class _LoginWebPageState extends State<LoginWebPage> {
late ScrollController _scrollController; late ScrollController _scrollController;
_scrollController = ScrollController(); _scrollController = ScrollController();
void _scrollToCenter() { void _scrollToCenter() {
final double middlePosition = _scrollController.position.maxScrollExtent / 2; final double middlePosition =
_scrollController.position.maxScrollExtent / 2;
_scrollController.animateTo( _scrollController.animateTo(
middlePosition, middlePosition,
duration: const Duration(seconds: 1), duration: const Duration(seconds: 1),
@ -99,9 +99,11 @@ class _LoginWebPageState extends State<LoginWebPage> {
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1), color: Colors.white.withOpacity(0.1),
borderRadius: const BorderRadius.all(Radius.circular(30)), borderRadius: const BorderRadius.all(
Radius.circular(30)),
border: Border.all( border: Border.all(
color: ColorsManager.graysColor.withOpacity(0.2))), color: ColorsManager.graysColor
.withOpacity(0.2))),
child: Form( child: Form(
key: loginBloc.loginFormKey, key: loginBloc.loginFormKey,
child: Padding( child: Padding(
@ -109,16 +111,22 @@ class _LoginWebPageState extends State<LoginWebPage> {
horizontal: size.width * 0.02, horizontal: size.width * 0.02,
vertical: size.width * 0.003), vertical: size.width * 0.003),
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment:
crossAxisAlignment: CrossAxisAlignment.start, MainAxisAlignment.spaceEvenly,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[ children: <Widget>[
const SizedBox(height: 40), const SizedBox(height: 40),
Text('Login', Text('Login',
style: Theme.of(context).textTheme.headlineLarge), style: Theme.of(context)
.textTheme
.headlineLarge),
SizedBox(height: size.height * 0.03), SizedBox(height: size.height * 0.03),
Column( Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment:
mainAxisAlignment: MainAxisAlignment.start, CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.start,
children: [ children: [
Text( Text(
"Country/Region", "Country/Region",
@ -126,57 +134,81 @@ class _LoginWebPageState extends State<LoginWebPage> {
.textTheme .textTheme
.bodySmall! .bodySmall!
.copyWith( .copyWith(
fontSize: 14, fontWeight: FontWeight.w400), fontSize: 14,
fontWeight:
FontWeight.w400),
), ),
const SizedBox( const SizedBox(
height: 10, height: 10,
), ),
SizedBox( SizedBox(
child: DropdownButtonFormField<String>( child: DropdownButtonFormField<
String>(
padding: EdgeInsets.zero, padding: EdgeInsets.zero,
value: loginBloc.regionList!.any((region) => value: loginBloc.regionList!
region.id == loginBloc.regionUuid) .any((region) =>
region.id ==
loginBloc
.regionUuid)
? loginBloc.regionUuid ? loginBloc.regionUuid
: null, : null,
validator: loginBloc.validateRegion, validator:
loginBloc.validateRegion,
icon: const Icon( icon: const Icon(
Icons.keyboard_arrow_down_outlined, Icons
.keyboard_arrow_down_outlined,
), ),
decoration: textBoxDecoration()!.copyWith( decoration: textBoxDecoration()!
errorStyle: const TextStyle(height: 0), .copyWith(
errorStyle: const TextStyle(
height: 0),
hintText: null, hintText: null,
), ),
hint: SizedBox( hint: SizedBox(
width: size.width * 0.12, width: size.width * 0.12,
child: Align( child: Align(
alignment: Alignment.centerLeft, alignment:
Alignment.centerLeft,
child: Text( child: Text(
'Select your region/country', 'Select your region/country',
textAlign: TextAlign.center, textAlign:
TextAlign.center,
style: Theme.of(context) style: Theme.of(context)
.textTheme .textTheme
.bodySmall! .bodySmall!
.copyWith( .copyWith(
color: ColorsManager.grayColor, color:
fontWeight: FontWeight.w400), ColorsManager
overflow: TextOverflow.ellipsis, .grayColor,
fontWeight:
FontWeight
.w400),
overflow:
TextOverflow.ellipsis,
), ),
), ),
), ),
isDense: true, isDense: true,
style: const TextStyle(color: Colors.black), style: const TextStyle(
items: color: Colors.black),
loginBloc.regionList!.map((RegionModel region) { items: loginBloc.regionList!
return DropdownMenuItem<String>( .map((RegionModel region) {
return DropdownMenuItem<
String>(
value: region.id, value: region.id,
child: SizedBox( child: SizedBox(
width: size.width * 0.08, width:
child: Text(region.name)), size.width * 0.08,
child:
Text(region.name)),
); );
}).toList(), }).toList(),
onChanged: (String? value) { onChanged: (String? value) {
loginBloc.add(CheckEnableEvent()); loginBloc
loginBloc.add(SelectRegionEvent(val: value!)); .add(CheckEnableEvent());
loginBloc.add(
SelectRegionEvent(
val: value!));
}, },
), ),
) )
@ -184,8 +216,10 @@ class _LoginWebPageState extends State<LoginWebPage> {
), ),
const SizedBox(height: 20.0), const SizedBox(height: 20.0),
Column( Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment:
mainAxisAlignment: MainAxisAlignment.start, CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.start,
children: [ children: [
Text( Text(
"Email", "Email",
@ -193,7 +227,9 @@ class _LoginWebPageState extends State<LoginWebPage> {
.textTheme .textTheme
.bodySmall! .bodySmall!
.copyWith( .copyWith(
fontSize: 14, fontWeight: FontWeight.w400), fontSize: 14,
fontWeight:
FontWeight.w400),
), ),
const SizedBox( const SizedBox(
height: 10, height: 10,
@ -201,29 +237,42 @@ class _LoginWebPageState extends State<LoginWebPage> {
SizedBox( SizedBox(
child: TextFormField( child: TextFormField(
onChanged: (value) { onChanged: (value) {
loginBloc.add(CheckEnableEvent()); loginBloc
.add(CheckEnableEvent());
}, },
validator: loginBloc.loginValidateEmail, validator: loginBloc
controller: loginBloc.loginEmailController, .loginValidateEmail,
decoration: textBoxDecoration()!.copyWith( controller: loginBloc
.loginEmailController,
decoration: textBoxDecoration()!
.copyWith(
errorStyle: const TextStyle( errorStyle: const TextStyle(
height: 0), // Hide the error text space height:
hintText: 'Enter your email address', 0), // Hide the error text space
hintStyle: Theme.of(context) hintText:
'Enter your email address',
hintStyle: Theme.of(
context)
.textTheme .textTheme
.bodySmall! .bodySmall!
.copyWith( .copyWith(
color: ColorsManager.grayColor, color: ColorsManager
fontWeight: FontWeight.w400)), .grayColor,
style: const TextStyle(color: Colors.black), fontWeight:
FontWeight
.w400)),
style: const TextStyle(
color: Colors.black),
), ),
), ),
], ],
), ),
const SizedBox(height: 20.0), const SizedBox(height: 20.0),
Column( Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment:
mainAxisAlignment: MainAxisAlignment.start, CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.start,
children: [ children: [
Text( Text(
"Password", "Password",
@ -231,7 +280,9 @@ class _LoginWebPageState extends State<LoginWebPage> {
.textTheme .textTheme
.bodySmall! .bodySmall!
.copyWith( .copyWith(
fontSize: 14, fontWeight: FontWeight.w400), fontSize: 14,
fontWeight:
FontWeight.w400),
), ),
const SizedBox( const SizedBox(
height: 10, height: 10,
@ -239,39 +290,54 @@ class _LoginWebPageState extends State<LoginWebPage> {
SizedBox( SizedBox(
child: TextFormField( child: TextFormField(
onChanged: (value) { onChanged: (value) {
loginBloc.add(CheckEnableEvent()); loginBloc
.add(CheckEnableEvent());
}, },
validator: loginBloc.validatePassword, validator:
obscureText: loginBloc.obscureText, loginBloc.validatePassword,
keyboardType: TextInputType.visiblePassword, obscureText:
controller: loginBloc.loginPasswordController, loginBloc.obscureText,
decoration: textBoxDecoration()!.copyWith( keyboardType: TextInputType
hintText: 'At least 8 characters', .visiblePassword,
controller: loginBloc
.loginPasswordController,
decoration: textBoxDecoration()!
.copyWith(
hintText:
'At least 8 characters',
hintStyle: Theme.of(context) hintStyle: Theme.of(context)
.textTheme .textTheme
.bodySmall! .bodySmall!
.copyWith( .copyWith(
color: ColorsManager.grayColor, color: ColorsManager
fontWeight: FontWeight.w400), .grayColor,
fontWeight:
FontWeight.w400),
suffixIcon: IconButton( suffixIcon: IconButton(
onPressed: () { onPressed: () {
loginBloc.add(PasswordVisibleEvent( loginBloc.add(
newValue: loginBloc.obscureText)); PasswordVisibleEvent(
newValue: loginBloc
.obscureText));
}, },
icon: SizedBox( icon: SizedBox(
child: SvgPicture.asset( child: SvgPicture.asset(
loginBloc.obscureText loginBloc.obscureText
? Assets.visiblePassword ? Assets
: Assets.invisiblePassword, .visiblePassword
: Assets
.invisiblePassword,
height: 15, height: 15,
width: 15, width: 15,
), ),
), ),
), ),
errorStyle: const TextStyle( errorStyle: const TextStyle(
height: 0), // Hide the error text space height:
0), // Hide the error text space
), ),
style: const TextStyle(color: Colors.black), style: const TextStyle(
color: Colors.black),
), ),
), ),
], ],
@ -281,11 +347,13 @@ class _LoginWebPageState extends State<LoginWebPage> {
), ),
SizedBox( SizedBox(
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.end, mainAxisAlignment:
MainAxisAlignment.end,
children: [ children: [
InkWell( InkWell(
onTap: () { onTap: () {
Navigator.of(context).push(MaterialPageRoute( Navigator.of(context)
.push(MaterialPageRoute(
builder: (context) => builder: (context) =>
const ForgetPasswordPage(), const ForgetPasswordPage(),
)); ));
@ -298,7 +366,8 @@ class _LoginWebPageState extends State<LoginWebPage> {
.copyWith( .copyWith(
color: Colors.black, color: Colors.black,
fontSize: 14, fontSize: 14,
fontWeight: FontWeight.w400), fontWeight:
FontWeight.w400),
), ),
), ),
], ],
@ -310,16 +379,18 @@ class _LoginWebPageState extends State<LoginWebPage> {
Row( Row(
children: [ children: [
Transform.scale( Transform.scale(
scale: 1.2, // Adjust the scale as needed scale:
1.2, // Adjust the scale as needed
child: Checkbox( child: Checkbox(
fillColor: fillColor: MaterialStateProperty
MaterialStateProperty.all<Color>(Colors.white), .all<Color>(Colors.white),
activeColor: Colors.white, activeColor: Colors.white,
value: loginBloc.isChecked, value: loginBloc.isChecked,
checkColor: Colors.black, checkColor: Colors.black,
shape: const CircleBorder(), shape: const CircleBorder(),
onChanged: (bool? newValue) { onChanged: (bool? newValue) {
loginBloc.add(CheckBoxEvent(newValue: newValue)); loginBloc.add(CheckBoxEvent(
newValue: newValue));
}, },
), ),
), ),
@ -328,32 +399,41 @@ class _LoginWebPageState extends State<LoginWebPage> {
child: RichText( child: RichText(
text: TextSpan( text: TextSpan(
text: 'Agree to ', text: 'Agree to ',
style: const TextStyle(color: Colors.white), style: const TextStyle(
color: Colors.white),
children: [ children: [
TextSpan( TextSpan(
text: '(Terms of Service)', text:
'(Terms of Service)',
style: const TextStyle( style: const TextStyle(
color: Colors.black, color: Colors.black,
), ),
recognizer: TapGestureRecognizer() recognizer:
TapGestureRecognizer()
..onTap = () { ..onTap = () {
loginBloc.launchURL( loginBloc.launchURL(
'https://example.com/terms'); 'https://example.com/terms');
}, },
), ),
TextSpan( TextSpan(
text: ' (Legal Statement)', text:
style: const TextStyle(color: Colors.black), ' (Legal Statement)',
recognizer: TapGestureRecognizer() style: const TextStyle(
color: Colors.black),
recognizer:
TapGestureRecognizer()
..onTap = () { ..onTap = () {
loginBloc.launchURL( loginBloc.launchURL(
'https://example.com/legal'); 'https://example.com/legal');
}, },
), ),
TextSpan( TextSpan(
text: ' (Privacy Statement)', text:
style: const TextStyle(color: Colors.black), ' (Privacy Statement)',
recognizer: TapGestureRecognizer() style: const TextStyle(
color: Colors.black),
recognizer:
TapGestureRecognizer()
..onTap = () { ..onTap = () {
loginBloc.launchURL( loginBloc.launchURL(
'https://example.com/privacy'); 'https://example.com/privacy');
@ -367,35 +447,49 @@ class _LoginWebPageState extends State<LoginWebPage> {
), ),
const SizedBox(height: 20.0), const SizedBox(height: 20.0),
Row( Row(
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment:
mainAxisAlignment: MainAxisAlignment.center, CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: [ children: [
SizedBox( SizedBox(
width: size.width * 0.2, width: size.width * 0.2,
child: DefaultButton( child: DefaultButton(
enabled: loginBloc.checkValidate, enabled:
loginBloc.checkValidate,
child: Text('Sign in', child: Text('Sign in',
style: Theme.of(context) style: Theme.of(context)
.textTheme .textTheme
.labelLarge! .labelLarge!
.copyWith( .copyWith(
fontSize: 14, fontSize: 14,
color: loginBloc.checkValidate color: loginBloc
? ColorsManager.whiteColors .checkValidate
: ColorsManager.whiteColors ? ColorsManager
.withOpacity(0.2), .whiteColors
: ColorsManager
.whiteColors
.withOpacity(
0.2),
)), )),
onPressed: () { onPressed: () {
if (loginBloc.loginFormKey.currentState! if (loginBloc.loginFormKey
.currentState!
.validate()) { .validate()) {
loginBloc.add(LoginButtonPressed( loginBloc
regionUuid: loginBloc.regionUuid, .add(LoginButtonPressed(
username: loginBloc.loginEmailController.text, regionUuid:
password: loginBloc.regionUuid,
loginBloc.loginPasswordController.text, username: loginBloc
.loginEmailController
.text,
password: loginBloc
.loginPasswordController
.text,
)); ));
} else { } else {
loginBloc.add(ChangeValidateEvent()); loginBloc.add(
ChangeValidateEvent());
} }
}, },
), ),
@ -404,8 +498,10 @@ class _LoginWebPageState extends State<LoginWebPage> {
), ),
const SizedBox(height: 15.0), const SizedBox(height: 15.0),
Row( Row(
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment:
mainAxisAlignment: MainAxisAlignment.center, CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: [ children: [
SizedBox( SizedBox(
child: Text( child: Text(
@ -430,7 +526,8 @@ class _LoginWebPageState extends State<LoginWebPage> {
), ),
), ),
), ),
if (state is AuthLoading) const Center(child: CircularProgressIndicator()) if (state is AuthLoading)
const Center(child: CircularProgressIndicator())
], ],
); );
} }

19
lib/pages/common/buttons/search_reset_buttons.dart
View File

@ -1,5 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/common/buttons/default_button.dart'; import 'package:syncrow_web/pages/common/buttons/default_button.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
import 'package:syncrow_web/utils/style.dart'; import 'package:syncrow_web/utils/style.dart';
import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/color_manager.dart';
@ -23,14 +24,18 @@ class SearchResetButtons extends StatelessWidget {
const SizedBox(height: 25), const SizedBox(height: 25),
Center( Center(
child: Container( child: Container(
height: 43, height: 35,
width: 100, width: 100,
decoration: containerDecoration, decoration: containerDecoration,
child: Center( child: Center(
child: DefaultButton( child: DefaultButton(
onPressed: onSearch, onPressed: onSearch,
borderRadius: 9, borderRadius: 9,
child: const Text('Search'), child: Text(
'Search',
style: context.textTheme.titleSmall!
.copyWith(color: Colors.white, fontSize: 12),
),
), ),
), ),
), ),
@ -44,21 +49,19 @@ class SearchResetButtons extends StatelessWidget {
const SizedBox(height: 25), const SizedBox(height: 25),
Center( Center(
child: Container( child: Container(
height: 43, height: 35,
width: 100, width: 100,
decoration: containerDecoration, decoration: containerDecoration,
child: Center( child: Center(
child: DefaultButton( child: DefaultButton(
backgroundColor: ColorsManager.whiteColors, backgroundColor: ColorsManager.whiteColors,
borderRadius: 9, borderRadius: 9,
onPressed: onReset,
child: Text( child: Text(
'Reset', 'Reset',
style: Theme.of(context) style: context.textTheme.titleSmall!
.textTheme .copyWith(color: Colors.black, fontSize: 12),
.bodySmall!
.copyWith(color: Colors.black),
), ),
onPressed: onReset,
), ),
), ),
), ),

20
lib/pages/common/date_time_widget.dart
View File

@ -36,7 +36,10 @@ class DateTimeWebWidget extends StatelessWidget {
if (isRequired) if (isRequired)
Text( Text(
'* ', '* ',
style: Theme.of(context).textTheme.bodyMedium!.copyWith(color: Colors.red), style: Theme.of(context)
.textTheme
.bodyMedium!
.copyWith(color: Colors.red),
), ),
Text( Text(
title, title,
@ -51,8 +54,9 @@ class DateTimeWebWidget extends StatelessWidget {
height: 8, height: 8,
), ),
Container( Container(
height: size.height * 0.055, height: size.height * 0.056,
padding: const EdgeInsets.only(top: 10, bottom: 10, right: 30, left: 10), padding:
const EdgeInsets.only(top: 10, bottom: 10, right: 30, left: 10),
decoration: containerDecoration, decoration: containerDecoration,
child: FittedBox( child: FittedBox(
child: Column( child: Column(
@ -65,7 +69,10 @@ class DateTimeWebWidget extends StatelessWidget {
child: FittedBox( child: FittedBox(
child: Text( child: Text(
firstString, firstString,
style: Theme.of(context).textTheme.bodySmall!.copyWith( style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(
color: ColorsManager.grayColor, color: ColorsManager.grayColor,
fontSize: 12, fontSize: 12,
fontWeight: FontWeight.w400), fontWeight: FontWeight.w400),
@ -83,7 +90,10 @@ class DateTimeWebWidget extends StatelessWidget {
child: FittedBox( child: FittedBox(
child: Text( child: Text(
secondString, secondString,
style: Theme.of(context).textTheme.bodySmall!.copyWith( style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(
color: ColorsManager.grayColor, color: ColorsManager.grayColor,
fontSize: 12, fontSize: 12,
fontWeight: FontWeight.w400), fontWeight: FontWeight.w400),

6
lib/pages/common/text_field/custom_text_field.dart
View File

@ -8,7 +8,7 @@ class StatefulTextField extends StatefulWidget {
this.hintText = 'Please enter', this.hintText = 'Please enter',
required this.width, required this.width,
this.elevation = 0, this.elevation = 0,
required this.controller, // Add the controller required this.controller,
}); });
final String title; final String title;
@ -59,7 +59,8 @@ class CustomTextField extends StatelessWidget {
Text( Text(
title, title,
style: context.textTheme.bodyMedium!.copyWith( style: context.textTheme.bodyMedium!.copyWith(
fontWeight: FontWeight.w600, fontSize: 13,
fontWeight: FontWeight.w400,
color: const Color(0xff000000), color: const Color(0xff000000),
), ),
), ),
@ -79,6 +80,7 @@ class CustomTextField extends StatelessWidget {
style: const TextStyle(color: Colors.black), style: const TextStyle(color: Colors.black),
decoration: InputDecoration( decoration: InputDecoration(
hintText: hintText, hintText: hintText,
hintStyle: const TextStyle(fontSize: 12),
contentPadding: contentPadding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 10), const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
border: InputBorder.none, border: InputBorder.none,

10
lib/pages/common/text_field/custom_web_textfield.dart
View File

@ -1,5 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
import 'package:syncrow_web/utils/style.dart'; import 'package:syncrow_web/utils/style.dart';
class CustomWebTextField extends StatelessWidget { class CustomWebTextField extends StatelessWidget {
@ -11,6 +12,7 @@ class CustomWebTextField extends StatelessWidget {
this.description, this.description,
this.validator, this.validator,
this.hintText, this.hintText,
this.height,
}); });
final bool isRequired; final bool isRequired;
@ -19,6 +21,7 @@ class CustomWebTextField extends StatelessWidget {
final TextEditingController? controller; final TextEditingController? controller;
final String? Function(String?)? validator; final String? Function(String?)? validator;
final String? hintText; final String? hintText;
final double? height;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -66,6 +69,7 @@ class CustomWebTextField extends StatelessWidget {
height: 7, height: 7,
), ),
Container( Container(
height: height ?? 35,
decoration: containerDecoration decoration: containerDecoration
.copyWith(color: const Color(0xFFF5F6F7), boxShadow: [ .copyWith(color: const Color(0xFFF5F6F7), boxShadow: [
BoxShadow( BoxShadow(
@ -80,9 +84,9 @@ class CustomWebTextField extends StatelessWidget {
controller: controller, controller: controller,
style: const TextStyle(color: Colors.black), style: const TextStyle(color: Colors.black),
decoration: textBoxDecoration()!.copyWith( decoration: textBoxDecoration()!.copyWith(
errorStyle: errorStyle: const TextStyle(height: 0),
const TextStyle(height: 0), // Hide the error text space hintStyle: context.textTheme.titleSmall!
.copyWith(color: Colors.grey, fontSize: 12),
hintText: hintText ?? 'Please enter'), hintText: hintText ?? 'Please enter'),
), ),
), ),

4
lib/pages/device_managment/all_devices/view/device_managment_page.dart
View File

@ -20,9 +20,7 @@ class DeviceManagementPage extends StatelessWidget with HelperResponsiveLayout {
style: Theme.of(context).textTheme.headlineLarge, style: Theme.of(context).textTheme.headlineLarge,
), ),
), ),
appBarBody: const [ rightBody: const NavigateHomeGridView(),
NavigateHomeGridView(),
],
enableMenuSideba: isLargeScreenSize(context), enableMenuSideba: isLargeScreenSize(context),
scaffoldBody: BlocBuilder<DeviceManagementBloc, DeviceManagementState>( scaffoldBody: BlocBuilder<DeviceManagementBloc, DeviceManagementState>(
builder: (context, state) { builder: (context, state) {

3
lib/pages/device_managment/all_devices/widgets/device_managment_body.dart
View File

@ -75,7 +75,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
const DeviceSearchFilters(), const DeviceSearchFilters(),
const SizedBox(height: 12), const SizedBox(height: 12),
Container( Container(
height: 43, height: 35,
width: 100, width: 100,
decoration: containerDecoration, decoration: containerDecoration,
child: Center( child: Center(
@ -97,6 +97,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
child: Text( child: Text(
'Control', 'Control',
style: TextStyle( style: TextStyle(
fontSize: 12,
color: isControlButtonEnabled color: isControlButtonEnabled
? Colors.white ? Colors.white
: Colors.grey, : Colors.grey,

53
lib/utils/theme/theme.dart Normal file
View File

@ -0,0 +1,53 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';
final myTheme = ThemeData(
fontFamily: 'Aftika',
textTheme: const TextTheme(
bodySmall: TextStyle(
fontSize: 13,
color: ColorsManager.whiteColors,
fontWeight: FontWeight.bold),
bodyMedium: TextStyle(color: Colors.black87, fontSize: 14),
bodyLarge: TextStyle(fontSize: 16, color: Colors.white),
headlineSmall: TextStyle(color: Colors.black87, fontSize: 18),
headlineMedium: TextStyle(color: Colors.black87, fontSize: 20),
headlineLarge: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
colorScheme: ColorScheme.fromSeed(
seedColor: ColorsManager.blueColor,
primary: ColorsManager.blueColor,
onSurface: Colors.grey.shade400,
),
switchTheme: SwitchThemeData(
thumbColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) {
return ColorsManager.blueColor;
}
return ColorsManager.whiteColors;
}),
trackColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) {
return ColorsManager.blueColor.withOpacity(0.5);
}
return ColorsManager.whiteColors;
}),
),
checkboxTheme: CheckboxThemeData(
fillColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) {
return ColorsManager.blueColor;
}
return Colors.grey.shade200;
}),
checkColor: WidgetStateProperty.all(Colors.white),
side: const BorderSide(color: ColorsManager.whiteColors),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
),
),
);

90
lib/web_layout/web_app_bar.dart
View File

@ -3,35 +3,97 @@ import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/home/bloc/home_bloc.dart'; import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
import 'package:syncrow_web/pages/home/bloc/home_state.dart'; import 'package:syncrow_web/pages/home/bloc/home_state.dart';
import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
class WebAppBar extends StatelessWidget { class WebAppBar extends StatelessWidget with HelperResponsiveLayout {
final Widget? title; final Widget? title;
final List<Widget>? body; final Widget? centerBody;
const WebAppBar({super.key, this.title, this.body}); final Widget? rightBody;
const WebAppBar({super.key, this.title, this.centerBody, this.rightBody});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
bool isSmallScreen = isSmallScreenSize(context);
return BlocBuilder<HomeBloc, HomeState>(builder: (context, state) { return BlocBuilder<HomeBloc, HomeState>(builder: (context, state) {
return Container( return Container(
height: 100, height: isSmallScreen ? 130 : 100,
decoration: const BoxDecoration(color: ColorsManager.secondaryColor), decoration: const BoxDecoration(color: ColorsManager.secondaryColor),
padding: const EdgeInsets.all(10), padding: const EdgeInsets.all(10),
child: Row( child: isSmallScreen
mainAxisAlignment: MainAxisAlignment.spaceBetween, ? Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Expanded( if (title != null)
Align(
alignment: Alignment.centerLeft,
child: title!, child: title!,
), ),
if (body != null) if (centerBody != null)
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: centerBody,
),
),
if (rightBody != null || HomeBloc.user != null)
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
if (rightBody != null) rightBody!,
Row(
children: [
const 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,
),
if (HomeBloc.user != null)
Text(
'${HomeBloc.user!.firstName} ${HomeBloc.user!.lastName}',
style: Theme.of(context).textTheme.bodyLarge,
),
],
),
],
),
],
)
: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Align(
alignment: Alignment.centerLeft,
child: title!,
),
if (centerBody != null)
Expanded( Expanded(
flex: 2, child: Center(
child: Wrap( child: centerBody,
spacing: 15, // Adjust the spacing as needed
children: body!,
), ),
), ),
Row( Row(
mainAxisSize: MainAxisSize.min,
children: [ children: [
if (rightBody != null)
Align(
alignment: Alignment.centerRight,
child: rightBody,
),
const SizedBox( const SizedBox(
width: 10, width: 10,
), ),
@ -53,11 +115,11 @@ class WebAppBar extends StatelessWidget {
), ),
if (HomeBloc.user != null) if (HomeBloc.user != null)
Text( Text(
'${HomeBloc.user!.firstName.toString()} ${HomeBloc.user!.lastName.toString()} ', '${HomeBloc.user!.firstName} ${HomeBloc.user!.lastName}',
style: Theme.of(context).textTheme.bodyLarge, style: Theme.of(context).textTheme.bodyLarge,
), ),
], ],
) ),
], ],
), ),
); );

16
lib/web_layout/web_scaffold.dart
View File

@ -8,14 +8,17 @@ import 'menu_sidebar.dart';
class WebScaffold extends StatelessWidget with HelperResponsiveLayout { class WebScaffold extends StatelessWidget with HelperResponsiveLayout {
final bool enableMenuSideba; final bool enableMenuSideba;
final Widget? appBarTitle; final Widget? appBarTitle;
final List<Widget>? appBarBody; final Widget? centerBody;
final Widget? rightBody;
final Widget? scaffoldBody; final Widget? scaffoldBody;
const WebScaffold( const WebScaffold({
{super.key, super.key,
this.appBarTitle, this.appBarTitle,
this.appBarBody, this.centerBody,
this.rightBody,
this.scaffoldBody, this.scaffoldBody,
this.enableMenuSideba = true}); this.enableMenuSideba = true,
});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final isSmall = isSmallScreenSize(context); final isSmall = isSmallScreenSize(context);
@ -40,7 +43,8 @@ class WebScaffold extends StatelessWidget with HelperResponsiveLayout {
opacity: 0.7, opacity: 0.7,
child: WebAppBar( child: WebAppBar(
title: appBarTitle, title: appBarTitle,
body: appBarBody, centerBody: centerBody,
rightBody: rightBody,
)), )),
Expanded( Expanded(
child: Row( child: Row(