light brightness slider

This commit is contained in:
Mohammad Salameh
2024-03-04 11:25:08 +03:00
parent 3fccadfc1d
commit 79e0b7ec21
5 changed files with 171 additions and 69 deletions

View File

@ -2,7 +2,10 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/lights/lights_cubit.dart'; import 'package:syncrow_app/features/devices/bloc/lights/lights_cubit.dart';
import 'package:syncrow_app/features/devices/model/light_model.dart'; import 'package:syncrow_app/features/devices/model/light_model.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_large.dart'; import 'package:syncrow_app/features/devices/view/widgets/lights/light_interface_switch.dart';
import 'package:syncrow_app/features/devices/view/widgets/lights/light_interface_timer.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart';
import 'package:syncrow_app/features/shared_widgets/united_text.dart';
import 'package:syncrow_app/utils/context_extension.dart'; import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart'; import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
import 'package:syncrow_app/utils/resource_manager/strings_manager.dart'; import 'package:syncrow_app/utils/resource_manager/strings_manager.dart';
@ -18,79 +21,76 @@ class LightInterface extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return BlocBuilder<LightsCubit, LightsState>( return BlocBuilder<LightsCubit, LightsState>(
builder: (context, state) { builder: (context, state) {
return SingleChildScrollView( return Padding(
child: Column( padding: const EdgeInsets.only(top: 70, right: 20, left: 20),
crossAxisAlignment: CrossAxisAlignment.stretch, child: SingleChildScrollView(
children: [ child: Column(
const SizedBox(height: 70), crossAxisAlignment: CrossAxisAlignment.stretch,
Container( children: [
constraints: const BoxConstraints( LightInterfaceSwitch(light: light),
maxHeight: 65, DefaultContainer(
), boxConstraints: const BoxConstraints(
margin: maxHeight: 310,
const EdgeInsets.symmetric(horizontal: 20, vertical: 10), ),
child: DefaultContainer( padding: const EdgeInsets.all(25),
child: SizedBox.expand( margin: const EdgeInsets.symmetric(vertical: 10),
child: Padding( child: Column(
padding: const EdgeInsets.symmetric(horizontal: 15), crossAxisAlignment: CrossAxisAlignment.start,
child: Row( children: [
mainAxisAlignment: MainAxisAlignment.spaceBetween, BodyMedium(
children: [ text: StringsManager.dimmerAndColor,
BodyLarge( style: context.bodyMedium.copyWith(color: Colors.grey),
text: light.status ?? false ),
? StringsManager.on Row(
: StringsManager.off, mainAxisAlignment: MainAxisAlignment.spaceBetween,
style: context.bodyLarge children: [
.copyWith(color: Colors.grey, fontSize: 24), Expanded(
), child: UnitedText(
Container( value: light.brightness.toString(),
width: 35, unit: "%",
decoration: ShapeDecoration( valueStyle: context.bodyMedium.copyWith(
color: light.status ?? false color: Colors.grey,
? ColorsManager.primaryWithOpacity fontSize: 26,
: Colors.grey,
shape: const CircleBorder(),
),
child: Center(
child: IconButton(
style: ButtonStyle(
padding: MaterialStateProperty.all(
const EdgeInsets.all(0),
),
iconSize: MaterialStateProperty.all(25),
), ),
onPressed: () { unitStyle: context.bodyMedium.copyWith(
LightsCubit.get(context).toggleLight(light); color: Colors.grey,
}, fontSize: 16,
icon: const Icon(
Icons.power_settings_new,
color: Colors.white,
), ),
), ),
), ),
), Expanded(
], flex: 2,
), child: SliderTheme(
data: SliderTheme.of(context).copyWith(
thumbColor: ColorsManager.primaryColor,
rangeThumbShape:
const RoundRangeSliderThumbShape(
enabledThumbRadius: 9,
),
thumbShape: const RoundSliderThumbShape(
enabledThumbRadius: 9,
),
activeTrackColor: Colors.grey.withOpacity(.8),
inactiveTrackColor: Colors.grey.withOpacity(.8),
trackHeight: 5,
),
child: Slider(
value: light.brightness,
onChanged: (value) => LightsCubit.get(context)
.setBrightness(light, value),
min: 0,
max: 100,
),
),
),
],
)
],
), ),
)),
),
const DefaultContainer(
boxConstraints: BoxConstraints(
maxHeight: 310,
), ),
margin: EdgeInsets.symmetric(horizontal: 20, vertical: 10), const LightInterfaceTimer(),
child: SizedBox.expand( ],
child: Center(child: Text("Light Controls")), ),
),
),
const DefaultContainer(
boxConstraints: BoxConstraints(
maxHeight: 65,
),
margin: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Center(child: Text("Timer")),
),
],
), ),
); );
}, },

View File

@ -0,0 +1,69 @@
import 'package:flutter/material.dart';
import 'package:syncrow_app/features/devices/bloc/lights/lights_cubit.dart';
import 'package:syncrow_app/features/devices/model/light_model.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_large.dart';
import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
import 'package:syncrow_app/utils/resource_manager/strings_manager.dart';
import '../../../../shared_widgets/default_container.dart';
class LightInterfaceSwitch extends StatelessWidget {
const LightInterfaceSwitch({
super.key,
required this.light,
});
final LightModel light;
@override
Widget build(BuildContext context) {
return DefaultContainer(
boxConstraints: const BoxConstraints(
maxHeight: 65,
),
margin: const EdgeInsets.symmetric(vertical: 10),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
BodyLarge(
text: light.status ?? false
? StringsManager.on
: StringsManager.off,
style:
context.bodyLarge.copyWith(color: Colors.grey, fontSize: 24),
),
Container(
width: 35,
decoration: ShapeDecoration(
color: light.status ?? false
? ColorsManager.primaryWithOpacity
: Colors.grey,
shape: const CircleBorder(),
),
child: Center(
child: IconButton(
style: ButtonStyle(
padding: MaterialStateProperty.all(
const EdgeInsets.all(0),
),
iconSize: MaterialStateProperty.all(25),
),
onPressed: () {
LightsCubit.get(context).toggleLight(light);
},
icon: const Icon(
Icons.power_settings_new,
color: Colors.white,
),
),
),
),
],
),
),
);
}
}

View File

@ -0,0 +1,29 @@
import 'package:flutter/material.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_large.dart';
import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/resource_manager/strings_manager.dart';
import '../../../../shared_widgets/default_container.dart';
class LightInterfaceTimer extends StatelessWidget {
const LightInterfaceTimer({
super.key,
});
@override
Widget build(BuildContext context) {
return DefaultContainer(
boxConstraints: const BoxConstraints(maxHeight: 65, minHeight: 65),
margin: const EdgeInsets.symmetric(vertical: 10),
padding: const EdgeInsets.symmetric(horizontal: 35, vertical: 10),
child: Row(
children: [
BodyLarge(
text: StringsManager.timer,
style: context.bodyLarge.copyWith(color: Colors.grey),
),
],
),
);
}
}

View File

@ -9,6 +9,7 @@ class DefaultContainer extends StatelessWidget {
this.color, this.color,
this.boxConstraints, this.boxConstraints,
this.margin, this.margin,
this.padding,
}); });
final double? height; final double? height;
@ -16,6 +17,7 @@ class DefaultContainer extends StatelessWidget {
final Widget child; final Widget child;
final BoxConstraints? boxConstraints; final BoxConstraints? boxConstraints;
final EdgeInsets? margin; final EdgeInsets? margin;
final EdgeInsets? padding;
final Color? color; final Color? color;
@override @override
@ -29,7 +31,7 @@ class DefaultContainer extends StatelessWidget {
color: color ?? Colors.white, color: color ?? Colors.white,
borderRadius: BorderRadius.circular(20), borderRadius: BorderRadius.circular(20),
), ),
padding: const EdgeInsets.all(10), padding: padding ?? const EdgeInsets.all(10),
child: child, child: child,
); );
} }

View File

@ -24,4 +24,6 @@ class StringsManager {
static const summerMode = 'Summer Mode'; static const summerMode = 'Summer Mode';
static const on = 'ON'; static const on = 'ON';
static const off = 'OFF'; static const off = 'OFF';
static const timer = 'Timer';
static const dimmerAndColor = "Dimmer & color";
} }