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

added fonts, fixed alignment, and responsivness for the web

Browse Source
This commit is contained in:
ashrafzarkanisala
2024-08-27 01:55:11 +03:00
parent f3c5c2c489
commit f14320ea92
15 changed files with 178 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/fonts/fonnts.com-AftikaBlack.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/fonnts.com-AftikaBold.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/fonnts.com-AftikaRegular.ttf Normal file
View File

Binary file not shown.

39
lib/main.dart
View File

@ -45,6 +45,7 @@ class MyApp extends StatelessWidget {
),
theme: ThemeData(
fontFamily: 'Aftika',
textTheme: const TextTheme(
bodySmall: TextStyle(
fontSize: 13,
@ -61,7 +62,43 @@ class MyApp extends StatelessWidget {
),
),
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.deepPurple), // Set up color scheme
seedColor: ColorsManager.blueColor,
primary: ColorsManager.blueColor, // Checked state color
onSurface: Colors.grey.shade400, // Unchecked state color
),
switchTheme: SwitchThemeData(
thumbColor: MaterialStateProperty.resolveWith((states) {
if (states.contains(MaterialState.selected)) {
return ColorsManager
.blueColor; // Color of the switch knob when selected
}
return ColorsManager
.whiteColors; // Color of the switch knob when not selected
}),
trackColor: MaterialStateProperty.resolveWith((states) {
if (states.contains(MaterialState.selected)) {
return ColorsManager.blueColor
.withOpacity(0.5); // Track color when selected
}
return ColorsManager
.whiteColors; // Track color when not selected
}),
),
checkboxTheme: CheckboxThemeData(
fillColor: MaterialStateProperty.resolveWith((states) {
if (states.contains(MaterialState.selected)) {
return ColorsManager.blueColor; // Checked state color
}
return Colors.grey.shade200; // Unchecked state color
}),
checkColor: MaterialStateProperty.all(
Colors.white), // The color of the checkmark
side:
BorderSide(color: ColorsManager.whiteColors), // Border color
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4), // Border radius
),
),
useMaterial3: true, // Enable Material 3
),
home: isLoggedIn == 'Success' ? const HomePage() : const LoginPage(),

8
lib/pages/common/filter/filter_widget.dart
View File

@ -35,7 +35,9 @@ class FilterWidget extends StatelessWidget {
decoration: BoxDecoration(
color: ColorsManager.boxColor,
border: Border.all(
color: isSelected ? Colors.blue : Colors.transparent,
color: isSelected
? ColorsManager.blueColor.withOpacity(0.8)
: Colors.transparent,
width: 2.0,
),
borderRadius: _getBorderRadius(index),
@ -45,7 +47,9 @@ class FilterWidget extends StatelessWidget {
child: Text(
tabs[index],
style: TextStyle(
color: isSelected ? Colors.blue : Colors.black,
color: isSelected
? ColorsManager.blueColor.withOpacity(0.8)
: Colors.black,
),
),
),

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

@ -10,6 +10,7 @@ class CustomWebTextField extends StatelessWidget {
required this.controller,
this.description,
this.validator,
this.hintText,
});
final bool isRequired;
@ -17,6 +18,7 @@ class CustomWebTextField extends StatelessWidget {
final String? description;
final TextEditingController? controller;
final String? Function(String?)? validator;
final String? hintText;
@override
Widget build(BuildContext context) {
@ -81,7 +83,7 @@ class CustomWebTextField extends StatelessWidget {
errorStyle:
const TextStyle(height: 0), // Hide the error text space
hintText: 'Please enter'),
hintText: hintText ?? 'Please enter'),
),
),
],

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

@ -3,8 +3,9 @@ import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/device_managment/all_devices/bloc/device_managment_bloc.dart';
import 'package:syncrow_web/pages/device_managment/all_devices/widgets/device_managment_body.dart';
import 'package:syncrow_web/web_layout/web_scaffold.dart';
import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
class DeviceManagementPage extends StatelessWidget {
class DeviceManagementPage extends StatelessWidget with HelperResponsiveLayout {
const DeviceManagementPage({super.key});
@override
@ -16,7 +17,7 @@ class DeviceManagementPage extends StatelessWidget {
'Device Management',
style: Theme.of(context).textTheme.headlineLarge,
),
enableMenuSideba: true,
enableMenuSideba: isLargeScreenSize(context),
scaffoldBody: BlocBuilder<DeviceManagementBloc, DeviceManagementState>(
builder: (context, state) {
if (state is DeviceManagementLoading) {

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

@ -41,7 +41,6 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
lowBatteryCount = state.lowBatteryCount;
}
// Create tab labels with counts
final tabs = [
'All (${devices.length})',
'Online ($onlineCount)',
@ -50,7 +49,9 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
];
return Container(
padding: const EdgeInsets.all(30),
padding: isLargeScreenSize(context)
? const EdgeInsets.all(30)
: const EdgeInsets.all(15),
height: context.screenHeight,
width: context.screenWidth,
child: Column(
@ -66,16 +67,12 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
.add(SelectedFilterChanged(index));
},
),
const SizedBox(
height: 20,
),
const SizedBox(height: 20),
const DeviceSearchFilters(),
const SizedBox(
height: 12,
),
const SizedBox(height: 12),
Container(
height: 43,
width: 100,
width: isSmallScreenSize(context) ? double.infinity : 100,
decoration: containerDecoration,
child: Center(
child: DefaultButton(
@ -95,9 +92,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
),
),
),
const SizedBox(
height: 12,
),
const SizedBox(height: 12),
Expanded(
child: DynamicTable(
cellDecoration: containerDecoration,

32
lib/pages/device_managment/shared/device_control_dialog.dart
View File

@ -29,8 +29,11 @@ class DeviceControlDialog extends StatelessWidget with RouteControlsBasedCode {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Text(
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const SizedBox(),
Text(
device.categoryName ?? 'Device Control',
style: TextStyle(
fontWeight: FontWeight.bold,
@ -38,6 +41,29 @@ class DeviceControlDialog extends StatelessWidget with RouteControlsBasedCode {
color: ColorsManager.dialogBlueTitle,
),
),
Container(
width: 25,
decoration: BoxDecoration(
color: Colors.transparent,
shape: BoxShape.circle,
border: Border.all(
color: Colors.grey,
width: 1.0,
),
),
child: IconButton(
padding: EdgeInsets.all(1),
icon: const Icon(
Icons.close,
color: Colors.grey,
size: 18,
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
],
),
const SizedBox(height: 20),
_buildDeviceInfoSection(),
@ -56,7 +82,7 @@ class DeviceControlDialog extends StatelessWidget with RouteControlsBasedCode {
Widget _buildDeviceInfoSection() {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 50, horizontal: 50),
padding: const EdgeInsets.symmetric(vertical: 25, horizontal: 50),
child: Table(
children: [
TableRow(

10
lib/pages/home/view/home_card.dart
View File

@ -18,15 +18,17 @@ class HomeCard extends StatelessWidget {
});
@override
Widget build(BuildContext context) {
bool evenNumbers = index % 2 == 0;
// bool evenNumbers = index % 2 == 0;
return InkWell(
onTap: active ? onTap : null,
child: Container(
padding: const EdgeInsets.only(left: 10, right: 10, bottom: 10),
decoration: BoxDecoration(
color: evenNumbers && active
? ColorsManager.blueColor.withOpacity(0.8)
: (active
color:
// evenNumbers && active
// ? ColorsManager.blueColor.withOpacity(0.8)
// :
(active
? ColorsManager.blueColor
: ColorsManager.blueColor.withOpacity(0.2)),
borderRadius: BorderRadius.circular(30),

3
lib/services/devices_mang_api.dart
View File

@ -93,4 +93,7 @@ class DevicesManagementApi {
);
return response;
}
//https://syncrow-dev.azurewebsites.net/device/report-logs/7e97c359-e822-4507-ac1f-e0ff96b0ca29?code=factory_reset
}

4
lib/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart
View File

@ -7,10 +7,10 @@ mixin HelperResponsiveLayout {
bool isMediumScreenSize(BuildContext context) {
return MediaQuery.of(context).size.width >= 700 &&
MediaQuery.of(context).size.width < 1300;
MediaQuery.of(context).size.width < 1400;
}
bool isLargeScreenSize(BuildContext context) {
return MediaQuery.of(context).size.width >= 1300;
return MediaQuery.of(context).size.width >= 1400;
}
}

54
lib/web_layout/menu_sidebar.dart
View File

@ -1,14 +1,26 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/style.dart';
import 'package:syncrow_web/pages/common/text_field/custom_web_textfield.dart';
import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
class MenuSidebar extends StatelessWidget {
class MenuSidebar extends StatelessWidget with HelperResponsiveLayout {
const MenuSidebar({super.key});
@override
Widget build(BuildContext context) {
return Expanded(
child: Container(
return LayoutBuilder(
builder: (context, constraints) {
double sidebarWidth;
if (isLargeScreenSize(context)) {
sidebarWidth = 250;
} else if (isMediumScreenSize(context)) {
sidebarWidth = 230;
} else {
sidebarWidth = 200;
}
return Container(
width: sidebarWidth,
decoration: const BoxDecoration(
shape: BoxShape.rectangle,
boxShadow: [
@ -18,12 +30,12 @@ class MenuSidebar extends StatelessWidget {
blurRadius: 10,
)
],
color: ColorsManager.whiteColors,
color: Colors.white,
),
width: 200,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
@ -35,25 +47,29 @@ class MenuSidebar extends StatelessWidget {
CircleAvatar(
backgroundColor: Colors.grey.shade200,
child: IconButton(
color: ColorsManager.onSecondaryColor,
color: Colors.grey,
onPressed: () {},
icon: const Icon(Icons.add)),
)
icon: const Icon(Icons.add),
),
),
],
),
const SizedBox(
height: 20,
),
TextFormField(
controller: TextEditingController(),
decoration: textBoxDecoration(suffixIcon: true)),
Container(
const SizedBox(height: 20),
SizedBox(
height: 100,
)
],
child: CustomWebTextField(
isRequired: false,
textFieldName: '',
controller: TextEditingController(),
hintText: 'Search...',
),
),
const Spacer(),
],
),
),
);
},
);
}
}

6
lib/web_layout/web_scaffold.dart
View File

@ -1,10 +1,11 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
import 'package:syncrow_web/web_layout/web_app_bar.dart';
import 'menu_sidebar.dart';
class WebScaffold extends StatelessWidget {
class WebScaffold extends StatelessWidget with HelperResponsiveLayout {
final bool enableMenuSideba;
final Widget? appBarTitle;
final List<Widget>? appBarBody;
@ -17,6 +18,7 @@ class WebScaffold extends StatelessWidget {
this.enableMenuSideba = true});
@override
Widget build(BuildContext context) {
final isSmall = isSmallScreenSize(context);
return Scaffold(
body: Stack(
children: [
@ -43,7 +45,7 @@ class WebScaffold extends StatelessWidget {
Expanded(
child: Row(
children: [
if (enableMenuSideba) const MenuSidebar(),
if (enableMenuSideba && !isSmall) const MenuSidebar(),
Expanded(flex: 5, child: scaffoldBody!)
],
),

20
pubspec.yaml
View File

@ -86,17 +86,13 @@ flutter:
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
fonts:
- family: Aftika
fonts:
- asset: assets/fonts/fonnts.com-AftikaBlack.ttf
- asset: assets/fonts/fonnts.com-AftikaBold.ttf
- asset: assets/fonts/fonnts.com-AftikaRegular.ttf
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages