Fixed design issues

This commit is contained in:
Abdullah Alassaf
2024-09-24 00:28:46 +03:00
parent 04e8131fb2
commit a811baca70
4 changed files with 165 additions and 197 deletions

View File

@ -25,13 +25,11 @@ class DoorSensorScreen extends StatelessWidget {
title: 'Door Sensor', title: 'Door Sensor',
child: BlocProvider( child: BlocProvider(
create: (context) => create: (context) =>
DoorSensorBloc( DSId: device?.uuid ?? '') DoorSensorBloc(DSId: device?.uuid ?? '')..add(const DoorSensorInitial()),
..add(const DoorSensorInitial()),
child: BlocBuilder<DoorSensorBloc, DoorSensorState>( child: BlocBuilder<DoorSensorBloc, DoorSensorState>(
builder: (context, state) { builder: (context, state) {
final doorSensorBloc = BlocProvider.of<DoorSensorBloc>(context); final doorSensorBloc = BlocProvider.of<DoorSensorBloc>(context);
DoorSensorModel model = DoorSensorModel model = DoorSensorModel(batteryPercentage: 0, doorContactState: false);
DoorSensorModel(batteryPercentage: 0, doorContactState: false);
if (state is LoadingNewSate) { if (state is LoadingNewSate) {
model = state.doorSensor; model = state.doorSensor;
} else if (state is UpdateState) { } else if (state is UpdateState) {
@ -39,164 +37,148 @@ class DoorSensorScreen extends StatelessWidget {
} }
return state is DoorSensorLoadingState return state is DoorSensorLoadingState
? const Center( ? const Center(
child: DefaultContainer( child:
width: 50, DefaultContainer(width: 50, height: 50, child: CircularProgressIndicator()),
height: 50,
child: CircularProgressIndicator()),
) )
: RefreshIndicator( : RefreshIndicator(
onRefresh: () async { onRefresh: () async {
doorSensorBloc.add(const DoorSensorInitial()); doorSensorBloc.add(const DoorSensorInitial());
}, },
child: Center( child: ListView(
child: ListView( children: [
shrinkWrap: true, SizedBox(
children: [ height: MediaQuery.sizeOf(context).height * 0.8,
Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
BatteryBar( BatteryBar(
batteryPercentage: model.batteryPercentage, batteryPercentage: model.batteryPercentage,
), ),
InkWell( Expanded(
overlayColor: flex: 4,
WidgetStateProperty.all(Colors.transparent), child: InkWell(
onTap: () { overlayColor: WidgetStateProperty.all(Colors.transparent),
onTap: () {},
}, child: Row(
child: Row( mainAxisAlignment: MainAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center, children: [
children: [ Container(
Container( decoration: BoxDecoration(
decoration: BoxDecoration( // color: Colors.white.withOpacity(0.1),
// color: Colors.white.withOpacity(0.1), borderRadius: BorderRadius.circular(890),
borderRadius: boxShadow: [
BorderRadius.circular(890), BoxShadow(
boxShadow: [ color: Colors.white.withOpacity(0.1),
BoxShadow( blurRadius: 24,
color: offset: const Offset(-5, -5),
Colors.white.withOpacity(0.1), blurStyle: BlurStyle.outer,
blurRadius: 24, ),
offset: const Offset(-5, -5), BoxShadow(
blurStyle: BlurStyle.outer, color: Colors.black.withOpacity(0.11),
), blurRadius: 25,
BoxShadow( offset: const Offset(5, 5),
color: blurStyle: BlurStyle.outer,
Colors.black.withOpacity(0.11), ),
blurRadius: 25, BoxShadow(
offset: const Offset(5, 5), color: Colors.black.withOpacity(0.13),
blurStyle: BlurStyle.outer, blurRadius: 30,
), offset: const Offset(5, 5),
BoxShadow( blurStyle: BlurStyle.inner,
color: ),
Colors.black.withOpacity(0.13), ],
blurRadius: 30, ),
offset: const Offset(5, 5), child: SvgPicture.asset(
blurStyle: BlurStyle.inner, model.doorContactState
), ? Assets.doorOpen
], : Assets.doorClose,
fit: BoxFit.fill,
),
), ),
child: SvgPicture.asset( ],
model.doorContactState ),
? Assets.doorOpen ),
: Assets.doorClose, ),
fit: BoxFit.fill, Flexible(
child: Row(
children: [
Expanded(
child: DefaultContainer(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =>
DoorRecordsScreen(DSId: device!.uuid!)),
);
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ConstrainedBox(
constraints:
const BoxConstraints(maxHeight: 46, maxWidth: 50),
child: SvgPicture.asset(Assets.doorRecordsIcon),
),
const SizedBox(
height: 15,
),
const Flexible(
child: FittedBox(
child: BodySmall(
text: 'Records',
// doorLockButtons.keys.elementAt(index),
textAlign: TextAlign.center,
),
),
),
],
),
),
),
const SizedBox(
width: 10,
),
Expanded(
child: DefaultContainer(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => NotificationSettingsPage()),
);
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ConstrainedBox(
constraints:
const BoxConstraints(maxHeight: 46, maxWidth: 50),
child:
SvgPicture.asset(Assets.doorNotificationSetting),
),
const SizedBox(
height: 15,
),
const Flexible(
child: FittedBox(
child: BodySmall(
text: 'Notification Settings',
// doorLockButtons.keys.elementAt(index),
textAlign: TextAlign.center,
),
),
),
],
),
), ),
), ),
], ],
), ),
), )
const SizedBox(height: 80),
], ],
), ),
SizedBox( ),
height: MediaQuery.of(context).size.height * 0.13, ],
child: Row(
children: [
Expanded(
child: DefaultContainer(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =>
DoorRecordsScreen(
DSId: device!.uuid!)),
);
},
child: Column(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
ConstrainedBox(
constraints: const BoxConstraints(
maxHeight: 46, maxWidth: 50),
child: SvgPicture.asset(
Assets.doorRecordsIcon),
),
const SizedBox(
height: 15,
),
const Flexible(
child: FittedBox(
child: BodySmall(
text: 'Records',
// doorLockButtons.keys.elementAt(index),
textAlign: TextAlign.center,
),
),
),
],
),
),
),
const SizedBox(
width: 10,
),
Expanded(
child: DefaultContainer(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =>
NotificationSettingsPage()),
);
},
child: Column(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
ConstrainedBox(
constraints: const BoxConstraints(
maxHeight: 46, maxWidth: 50),
child: SvgPicture.asset(
Assets.doorNotificationSetting),
),
const SizedBox(
height: 15,
),
const Flexible(
child: FittedBox(
child: BodySmall(
text: 'Notification Settings',
// doorLockButtons.keys.elementAt(index),
textAlign: TextAlign.center,
),
),
),
],
),
),
),
],
),
)
],
),
), ),
); );
}, },

View File

@ -1,13 +1,11 @@
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:syncrow_app/features/shared_widgets/default_container.dart'; import 'package:syncrow_app/features/shared_widgets/default_container.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_large.dart'; import 'package:syncrow_app/features/shared_widgets/text_widgets/body_large.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart'; import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
class InchingWidget extends StatefulWidget { class InchingWidget extends StatefulWidget {
const InchingWidget({super.key,this.onDateTimeChanged}); const InchingWidget({super.key, this.onDateTimeChanged});
final Function(DateTime)? onDateTimeChanged; final Function(DateTime)? onDateTimeChanged;
@override @override
@ -22,7 +20,7 @@ class _InchingWidgetState extends State<InchingWidget> {
children: [ children: [
DefaultContainer( DefaultContainer(
child: Container( child: Container(
padding: EdgeInsets.all(10), padding: const EdgeInsets.all(10),
child: Column( child: Column(
children: [ children: [
Row( Row(
@ -46,26 +44,29 @@ class _InchingWidgetState extends State<InchingWidget> {
), ),
], ],
), ),
const SizedBox(height: 10,), const SizedBox(
const Text('Once enabled this feature, each time the device is turned on, it will automatically turn of after a period time as pre-set.'), height: 10,
),
const Text(
'Once enabled this feature, each time the device is turned on, it will automatically turn of after a period time as pre-set.'),
], ],
), ),
), ),
), ),
const Padding( const Padding(
padding: EdgeInsets.only(right: 30,left: 30), padding: EdgeInsets.only(right: 30, left: 30),
child: Divider(), child: Divider(),
), ),
Container( Container(child: MinuteSecondPicker()),
child: MinuteSecondPicker()),
const Padding( const Padding(
padding: EdgeInsets.only(right: 30,left: 30), padding: EdgeInsets.only(right: 30, left: 30),
child: Divider(), child: Divider(),
), ),
], ],
); );
} }
} }
class MinuteSecondPicker extends StatefulWidget { class MinuteSecondPicker extends StatefulWidget {
const MinuteSecondPicker({super.key}); const MinuteSecondPicker({super.key});
@ -79,7 +80,7 @@ class _MinuteSecondPickerState extends State<MinuteSecondPicker> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Center( return Center(
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
@ -98,10 +99,9 @@ class _MinuteSecondPickerState extends State<MinuteSecondPicker> {
children: List<Widget>.generate(61, (int index) { children: List<Widget>.generate(61, (int index) {
return Center( return Center(
child: BodyLarge( child: BodyLarge(
text: index.toString().padLeft(2, '0'), text: index.toString().padLeft(2, '0'),
style: const TextStyle( style: const TextStyle(
fontWeight: FontWeight.w400, fontWeight: FontWeight.w400, fontSize: 30, color: Colors.blue),
fontSize: 30,color: Colors.blue),
), ),
); );
}), }),
@ -124,20 +124,17 @@ class _MinuteSecondPickerState extends State<MinuteSecondPicker> {
children: List<Widget>.generate(60, (int index) { children: List<Widget>.generate(60, (int index) {
return Center( return Center(
child: BodyLarge( child: BodyLarge(
text: index.toString().padLeft(2, '0'), text: index.toString().padLeft(2, '0'),
style: const TextStyle( style: const TextStyle(
fontWeight: FontWeight.w400, fontWeight: FontWeight.w400, fontSize: 30, color: Colors.blue),
fontSize: 30,color: Colors.blue),
), ),
); );
}), }),
), ),
), ),
const Text('S'), const Text('S'),
], ],
), ),
); );
} }
} }

View File

@ -21,10 +21,10 @@ class WaterHeaterPage extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return DefaultScaffold( return DefaultScaffold(
title: 'Water heater',
child: BlocProvider( child: BlocProvider(
create: (context) => create: (context) => WaterHeaterBloc(switchCode: 'switch_1', whId: device?.uuid ?? '')
WaterHeaterBloc(switchCode: 'switch_1', whId: device?.uuid ?? '') ..add(const WaterHeaterInitial()),
..add(const WaterHeaterInitial()),
child: BlocBuilder<WaterHeaterBloc, WaterHeaterState>( child: BlocBuilder<WaterHeaterBloc, WaterHeaterState>(
builder: (context, state) { builder: (context, state) {
final waterHeaterBloc = BlocProvider.of<WaterHeaterBloc>(context); final waterHeaterBloc = BlocProvider.of<WaterHeaterBloc>(context);
@ -36,10 +36,8 @@ class WaterHeaterPage extends StatelessWidget {
} }
return state is WHLoadingState return state is WHLoadingState
? const Center( ? const Center(
child: DefaultContainer( child:
width: 50, DefaultContainer(width: 50, height: 50, child: CircularProgressIndicator()),
height: 50,
child: CircularProgressIndicator()),
) )
: RefreshIndicator( : RefreshIndicator(
onRefresh: () async { onRefresh: () async {
@ -53,13 +51,11 @@ class WaterHeaterPage extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
InkWell( InkWell(
overlayColor: MaterialStateProperty.all( overlayColor: MaterialStateProperty.all(Colors.transparent),
Colors.transparent),
onTap: () { onTap: () {
waterHeaterBloc.add( waterHeaterBloc.add(
WaterHeaterSwitch( WaterHeaterSwitch(whSwitch: whModel.firstSwitch),
whSwitch:whModel.firstSwitch );
),);
}, },
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
@ -68,26 +64,22 @@ class WaterHeaterPage extends StatelessWidget {
Container( Container(
decoration: BoxDecoration( decoration: BoxDecoration(
// color: Colors.white.withOpacity(0.1), // color: Colors.white.withOpacity(0.1),
borderRadius: borderRadius: BorderRadius.circular(890),
BorderRadius.circular(890),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: color: Colors.white.withOpacity(0.1),
Colors.white.withOpacity(0.1),
blurRadius: 24, blurRadius: 24,
offset: const Offset(-5, -5), offset: const Offset(-5, -5),
blurStyle: BlurStyle.outer, blurStyle: BlurStyle.outer,
), ),
BoxShadow( BoxShadow(
color: color: Colors.black.withOpacity(0.11),
Colors.black.withOpacity(0.11),
blurRadius: 25, blurRadius: 25,
offset: const Offset(5, 5), offset: const Offset(5, 5),
blurStyle: BlurStyle.outer, blurStyle: BlurStyle.outer,
), ),
BoxShadow( BoxShadow(
color: color: Colors.black.withOpacity(0.13),
Colors.black.withOpacity(0.13),
blurRadius: 30, blurRadius: 30,
offset: const Offset(5, 5), offset: const Offset(5, 5),
blurStyle: BlurStyle.inner, blurStyle: BlurStyle.inner,
@ -111,8 +103,7 @@ class WaterHeaterPage extends StatelessWidget {
Card( Card(
elevation: 3, elevation: 3,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: borderRadius: BorderRadius.circular(100),
BorderRadius.circular(100),
), ),
child: GestureDetector( child: GestureDetector(
onTap: () { onTap: () {
@ -121,8 +112,10 @@ class WaterHeaterPage extends StatelessWidget {
PageRouteBuilder( PageRouteBuilder(
pageBuilder: (context, animation1, animation2) => pageBuilder: (context, animation1, animation2) =>
WHTimerScheduleScreen( WHTimerScheduleScreen(
switchCode: 'switch_1', device: device!, deviceCode: 'countdown_1', switchCode: 'switch_1',
))); device: device!,
deviceCode: 'countdown_1',
)));
}, },
child: Stack( child: Stack(
alignment: Alignment.center, alignment: Alignment.center,
@ -132,8 +125,7 @@ class WaterHeaterPage extends StatelessWidget {
height: 60, height: 60,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.grey[300], color: Colors.grey[300],
borderRadius: borderRadius: BorderRadius.circular(100),
BorderRadius.circular(100),
), ),
), ),
Container( Container(
@ -141,14 +133,12 @@ class WaterHeaterPage extends StatelessWidget {
height: 40, height: 40,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
borderRadius: borderRadius: BorderRadius.circular(100),
BorderRadius.circular(100),
), ),
child: Center( child: Center(
child: Icon( child: Icon(
Icons.access_time, Icons.access_time,
color: ColorsManager color: ColorsManager.primaryColorWithOpacity,
.primaryColorWithOpacity,
size: 25, size: 25,
), ),
), ),

View File

@ -59,7 +59,6 @@ class ScheduleListView extends StatelessWidget {
onTap: () {}, onTap: () {},
child: DefaultContainer( child: DefaultContainer(
padding: const EdgeInsets.all(20), padding: const EdgeInsets.all(20),
height: MediaQuery.of(context).size.height / 6.4,
child: Row( child: Row(
children: [ children: [
Expanded( Expanded(