Stabilized UI elements across multiple devices

Synchronized ACs Status functionality
This commit is contained in:
Mohammad Salameh
2024-02-28 12:22:45 +03:00
parent 4c27cce519
commit 3fabd41e72
63 changed files with 432 additions and 384 deletions

View File

@ -1,69 +1,30 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/devices_cubit.dart';
import 'package:syncrow_app/features/devices/model/device_category_model.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
class CustomSwitch extends StatefulWidget {
// final bool value;
// final ValueChanged<bool> onChanged;
class CustomSwitch extends StatelessWidget {
const CustomSwitch({super.key, required this.category});
const CustomSwitch({
super.key,
// required this.value,
// required this.onChanged,
});
@override
_CustomSwitchState createState() => _CustomSwitchState();
}
class _CustomSwitchState extends State<CustomSwitch>
with SingleTickerProviderStateMixin {
Animation? _circleAnimation;
AnimationController? _animationController;
bool value = false;
void onChange(bool customValue) {
value = customValue;
}
@override
void initState() {
super.initState();
_animationController = AnimationController(
vsync: this, duration: const Duration(milliseconds: 300));
_circleAnimation = AlignmentTween(
begin: value ? Alignment.centerRight : Alignment.centerLeft,
end: value ? Alignment.centerLeft : Alignment.centerRight,
).animate(
CurvedAnimation(
parent: _animationController!,
curve: Curves.linear,
),
);
}
final DevicesCategoryModel category;
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animationController!,
builder: (context, child) {
return BlocBuilder<DevicesCubit, DevicesState>(
builder: (context, state) {
return GestureDetector(
onTap: () {
setState(() {
_animationController!.isCompleted
? _animationController!.reverse()
: _animationController!.forward();
value ? onChange(false) : onChange(true);
});
DevicesCubit.get(context).changeCategorySwitchValue(category);
},
child: Container(
width: 45.0,
height: 28.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24.0),
color: _circleAnimation!.value == Alignment.centerLeft
? Color(0xFFD9D9D9)
: ColorsManager.primaryColor,
color: category.devicesStatus
? ColorsManager.primaryColor
: const Color(0xFFD9D9D9),
),
child: Center(
child: Container(
@ -76,16 +37,17 @@ class _CustomSwitchState extends State<CustomSwitch>
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
alignment:
value ? Alignment.centerRight : Alignment.centerLeft,
alignment: category.devicesStatus
? Alignment.centerRight
: Alignment.centerLeft,
child: Container(
width: 20.0,
height: 20.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _circleAnimation!.value == Alignment.centerLeft
? Color(0xFFD9D9D9)
: ColorsManager.primaryColor,
color: category.devicesStatus
? ColorsManager.primaryColor
: Colors.grey,
),
),
),

View File

@ -1,9 +1,11 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/ac_cubit.dart';
import 'package:syncrow_app/features/devices/model/ac_model.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
class DevicesDefaultSwitch extends StatefulWidget {
class DevicesDefaultSwitch extends StatelessWidget {
const DevicesDefaultSwitch({
super.key,
required this.model,
@ -11,73 +13,67 @@ class DevicesDefaultSwitch extends StatefulWidget {
final ACModel model;
@override
State<DevicesDefaultSwitch> createState() => _DevicesDefaultSwitchState();
}
class _DevicesDefaultSwitchState extends State<DevicesDefaultSwitch> {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Expanded(
child: InkWell(
onTap: () {
setState(() {
// isOn = !isOn;
widget.model.status = !widget.model.status;
});
},
child: Container(
height: 60,
decoration: BoxDecoration(
color: widget.model.status
? ColorsManager.primaryColor
: Colors.white,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(15),
bottomLeft: Radius.circular(15),
),
),
child: Center(
child: BodyMedium(
text: "ON",
fontColor: widget.model.status ? Colors.white : null,
fontWeight: FontWeight.bold,
return BlocBuilder<AcCubit, AcState>(
builder: (context, state) {
return Row(
children: <Widget>[
Expanded(
child: InkWell(
onTap: () {
AcCubit.get(context).turnACOn(model);
},
child: Container(
height: 60,
decoration: BoxDecoration(
color: model.status
? ColorsManager.primaryColor
: Colors.white,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(15),
bottomLeft: Radius.circular(15),
),
),
child: Center(
child: BodyMedium(
text: "ON",
fontColor: model.status ? Colors.white : null,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
),
Expanded(
child: InkWell(
onTap: () {
setState(() {
widget.model.status = !widget.model.status;
});
},
child: Container(
height: 60,
decoration: BoxDecoration(
color: widget.model.status
? Colors.white
: ColorsManager.primaryColor,
borderRadius: const BorderRadius.only(
topRight: Radius.circular(15),
bottomRight: Radius.circular(15),
),
),
child: Center(
child: BodyMedium(
text: "OFF",
fontColor: widget.model.status ? null : Colors.white,
fontWeight: FontWeight.bold,
Expanded(
child: InkWell(
onTap: () {
AcCubit.get(context).turnACOff(model);
},
child: Container(
height: 60,
decoration: BoxDecoration(
color: model.status
? Colors.white
: ColorsManager.primaryColor,
borderRadius: const BorderRadius.only(
topRight: Radius.circular(15),
bottomRight: Radius.circular(15),
),
),
child: Center(
child: BodyMedium(
text: "OFF",
fontColor: model.status ? null : Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
),
],
],
);
},
);
}
}

View File

@ -34,7 +34,7 @@ class BodyLarge extends StatelessWidget {
textAlign: textAlign,
style: style ??
context.bodyLarge.copyWith(
height: height ?? 1.5,
height: height,
fontWeight: fontWeight,
color: fontColor,
fontSize: fontSize,