mirror of
https://github.com/SyncrowIOT/syncrow-app.git
synced 2025-07-16 01:56:19 +00:00
Stabilized UI elements across multiple devices
Synchronized ACs Status functionality
This commit is contained in:
@ -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,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
@ -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,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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,
|
||||
|
Reference in New Issue
Block a user