Working on new UI

lib/presentation/atoms/card_atom.dart

@@ -9,6 +9,10 @@ class CardAtom extends StatelessWidget {
  Widget build(BuildContext context) {
  return Card(
  margin: EdgeInsets.zero,
+ shape: RoundedRectangleBorder(
+ borderRadius: BorderRadius.circular(30),
+ //set border radius more than 50% of height and width to make circle
+ ),
  child: child,
  );
  }

lib/presentation/atoms/separator_atom.dart

@@ -10,16 +10,13 @@ class SeparatorAtom extends StatelessWidget {
  Widget build(BuildContext context) {
  double spacing;
  switch (variant) {
- case SeparatorVariant.extenstionOfElement:
- spacing = 2;
  case SeparatorVariant.reletedElements:
- spacing = 5;
- case SeparatorVariant.closeWidgets:
  spacing = 10;
+ case SeparatorVariant.closeWidgets:
  case SeparatorVariant.generalSpacing:
  spacing = AppThemeData.generalSpacing;
  case SeparatorVariant.farAppart:
- spacing = 45;
+ spacing = 40;
  }
  return SizedBox(
  height: spacing,
@@ -29,7 +26,6 @@ class SeparatorAtom extends StatelessWidget {
 }
 
 enum SeparatorVariant {
- extenstionOfElement,
  reletedElements,
  closeWidgets,
  generalSpacing,

lib/presentation/atoms/switch_atom.dart

@@ -1,6 +1,6 @@
 import 'package:cbj_integrations_controller/integrations_controller.dart';
+import 'package:cybearjinni/presentation/atoms/atoms.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_switch/flutter_switch.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
 
@@ -10,12 +10,14 @@ class SwitchAtom extends StatefulWidget {
  required this.onToggle,
  required this.action,
  required this.state,
+ this.color,
  });
 
  final SwitchVariant variant;
  final Function(bool) onToggle;
  final EntityActions action;
  final EntityStateGRPC state;
+ final Color? color;
 
  // (bool value)
  @override
@@ -31,23 +33,11 @@ class _SwitchAtomState extends State<SwitchAtom> {
 
  bool toggleValue = false;
 
- Color getToggleColor() {
- if (toggleValue) {
- if (widget.state == EntityStateGRPC.ack) {
- return const Color(0xFFFFDF5D);
- }
- } else {
- if (widget.state == EntityStateGRPC.ack) {
- return Theme.of(context).primaryColorDark;
- }
- }
- return Colors.blueGrey;
- }
-
- void onToggle(bool value) {
- widget.onToggle(value);
+ void onToggle() {
+ final bool toggleTemp = !toggleValue;
+ widget.onToggle(toggleTemp);
  setState(() {
- toggleValue = value;
+ toggleValue = toggleTemp;
  });
  }
 
@@ -57,7 +47,7 @@ class _SwitchAtomState extends State<SwitchAtom> {
  final ColorScheme colorScheme = themeData.colorScheme;
 
  final Size screenSize = MediaQuery.of(context).size;
- final double sizeBoxWidth = screenSize.width * 0.25;
+ final double sizeBoxWidth = screenSize.width * 0.4;
 
  IconData activeIcon;
  IconData inactiveIcon;
@@ -79,37 +69,62 @@ class _SwitchAtomState extends State<SwitchAtom> {
  activeIcon = MdiIcons.airConditioner;
  inactiveIcon = MdiIcons.airConditioner;
  }
+ final Color tempColor =
+ !toggleValue ? colorScheme.outline : widget.color ?? Colors.yellow;
 
- return SizedBox(
- width: sizeBoxWidth + 15,
- child: FlutterSwitch(
- width: screenSize.width * 0.25,
- height: screenSize.height * 0.065,
- toggleSize: screenSize.height * 0.065,
- value: toggleValue,
- borderRadius: 25.0,
- padding: 0.0,
- activeToggleColor: colorScheme.onPrimary,
- inactiveToggleColor: colorScheme.onBackground,
- activeSwitchBorder: Border.all(
- color: colorScheme.onBackground,
+ return GestureDetector(
+ onTap: onToggle,
+ child: Container(
+ height: screenSize.height / 2,
+ width: sizeBoxWidth,
+ decoration: BoxDecoration(
+ borderRadius: const BorderRadius.all(Radius.circular(30)),
+ color: tempColor.withAlpha(150),
  ),
- inactiveSwitchBorder: Border.all(
- color: colorScheme.onBackground,
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Icon(
+ toggleValue ? activeIcon : inactiveIcon,
+ color: tempColor,
+ ),
+ const SeparatorAtom(variant: SeparatorVariant.reletedElements),
+ TextAtom(toggleValue ? 'On' : 'Off'),
+ ],
  ),
- activeColor: colorScheme.primary,
- inactiveColor: colorScheme.background,
- activeIcon: Icon(
- activeIcon,
- color: colorScheme.primary,
- ),
- inactiveIcon: Icon(
- inactiveIcon,
- color: colorScheme.background,
- ),
- onToggle: onToggle,
  ),
  );
+
+ // return SizedBox(
+ // width: sizeBoxWidth + 15,
+ // child: FlutterSwitch(
+ // width: screenSize.width * 0.25,
+ // height: screenSize.height * 0.065,
+ // toggleSize: screenSize.height * 0.065,
+ // value: toggleValue,
+ // borderRadius: 25.0,
+ // padding: 0.0,
+ // activeToggleColor: colorScheme.onPrimary,
+ // inactiveToggleColor: colorScheme.surfaceVariant,
+ // activeSwitchBorder: Border.all(
+ // color: colorScheme.onBackground,
+ // ),
+ // inactiveSwitchBorder: Border.all(
+ // color: colorScheme.outline,
+ // ),
+ // activeColor: colorScheme.secondary,
+ // inactiveColor: colorScheme.onBackground,
+ // activeIcon: Icon(
+ // activeIcon,
+ // color: colorScheme.secondary,
+ // ),
+ // inactiveIcon: Icon(
+ // inactiveIcon,
+ // color: colorScheme.onBackground,
+ // ),
+ // onToggle: onToggle,
+ // ),
+ // );
  }
 }
 

lib/presentation/core/color_schemes.dart

@@ -2,68 +2,68 @@ import 'package:flutter/material.dart';
 
 const lightColorScheme = ColorScheme(
  brightness: Brightness.light,
- primary: Color(0xFF8F4280),
+ primary: Color(0xFF3B54C5),
  onPrimary: Color(0xFFFFFFFF),
- primaryContainer: Color(0xFFFFD7F1),
- onPrimaryContainer: Color(0xFF3A0033),
- secondary: Color(0xFF894587),
+ primaryContainer: Color(0xFFDEE1FF),
+ onPrimaryContainer: Color(0xFF001158),
+ secondary: Color(0xFF4957AB),
  onSecondary: Color(0xFFFFFFFF),
- secondaryContainer: Color(0xFFFFD6F8),
- onSecondaryContainer: Color(0xFF37003A),
- tertiary: Color(0xFF8B4483),
+ secondaryContainer: Color(0xFFDEE0FF),
+ onSecondaryContainer: Color(0xFF000F5D),
+ tertiary: Color(0xFF5555A9),
  onTertiary: Color(0xFFFFFFFF),
- tertiaryContainer: Color(0xFFFFD7F4),
- onTertiaryContainer: Color(0xFF390036),
+ tertiaryContainer: Color(0xFFE2DFFF),
+ onTertiaryContainer: Color(0xFF0D0664),
  error: Color(0xFFBA1A1A),
  errorContainer: Color(0xFFFFDAD6),
  onError: Color(0xFFFFFFFF),
  onErrorContainer: Color(0xFF410002),
- background: Color(0xFFF8FDFF),
- onBackground: Color(0xFF001F25),
- surface: Color(0xFFF8FDFF),
- onSurface: Color(0xFF001F25),
- surfaceVariant: Color(0xFFEFDEE6),
- onSurfaceVariant: Color(0xFF4F444A),
- outline: Color(0xFF80747B),
- onInverseSurface: Color(0xFFD6F6FF),
- inverseSurface: Color(0xFF00363F),
- inversePrimary: Color(0xFFFFACE9),
+ background: Color(0xFFFAFCFF),
+ onBackground: Color(0xFF001F2A),
+ surface: Color(0xFFFAFCFF),
+ onSurface: Color(0xFF001F2A),
+ surfaceVariant: Color(0xFFE3E1EC),
+ onSurfaceVariant: Color(0xFF46464F),
+ outline: Color(0xFF767680),
+ onInverseSurface: Color(0xFFE1F4FF),
+ inverseSurface: Color(0xFF003547),
+ inversePrimary: Color(0xFFB9C3FF),
  shadow: Color(0xFF000000),
- surfaceTint: Color(0xFF8F4280),
- outlineVariant: Color(0xFFD2C2CA),
+ surfaceTint: Color(0xFF3B54C5),
+ outlineVariant: Color(0xFFC6C5D0),
  scrim: Color(0xFF000000),
 );
 
 const darkColorScheme = ColorScheme(
  brightness: Brightness.dark,
- primary: Color(0xFFFFACE9),
- onPrimary: Color(0xFF58104E),
- primaryContainer: Color(0xFF732A66),
- onPrimaryContainer: Color(0xFFFFD7F1),
- secondary: Color(0xFFFCABF6),
- onSecondary: Color(0xFF531355),
- secondaryContainer: Color(0xFF6E2C6E),
- onSecondaryContainer: Color(0xFFFFD6F8),
- tertiary: Color(0xFFFFABF0),
- onTertiary: Color(0xFF551251),
- tertiaryContainer: Color(0xFF702C69),
- onTertiaryContainer: Color(0xFFFFD7F4),
+ primary: Color(0xFFB9C3FF),
+ onPrimary: Color(0xFF00218C),
+ primaryContainer: Color(0xFF1E39AC),
+ onPrimaryContainer: Color(0xFFDEE1FF),
+ secondary: Color(0xFFBBC3FF),
+ onSecondary: Color(0xFF17267A),
+ secondaryContainer: Color(0xFF313F92),
+ onSecondaryContainer: Color(0xFFDEE0FF),
+ tertiary: Color(0xFFC1C1FF),
+ onTertiary: Color(0xFF252477),
+ tertiaryContainer: Color(0xFF3D3C8F),
+ onTertiaryContainer: Color(0xFFE2DFFF),
  error: Color(0xFFFFB4AB),
  errorContainer: Color(0xFF93000A),
  onError: Color(0xFF690005),
  onErrorContainer: Color(0xFFFFDAD6),
- background: Color(0xFF001F25),
- onBackground: Color(0xFFA6EEFF),
- surface: Color(0xFF001F25),
- onSurface: Color(0xFFA6EEFF),
- surfaceVariant: Color(0xFF4F444A),
- onSurfaceVariant: Color(0xFFD2C2CA),
- outline: Color(0xFF9B8D94),
- onInverseSurface: Color(0xFF001F25),
- inverseSurface: Color(0xFFA6EEFF),
- inversePrimary: Color(0xFF8F4280),
+ background: Color(0xFF001F2A),
+ onBackground: Color(0xFFBFE9FF),
+ surface: Color(0xFF001F2A),
+ onSurface: Color(0xFFBFE9FF),
+ surfaceVariant: Color(0xFF46464F),
+ onSurfaceVariant: Color(0xFFC6C5D0),
+ outline: Color(0xFF90909A),
+ onInverseSurface: Color(0xFF001F2A),
+ inverseSurface: Color(0xFFBFE9FF),
+ inversePrimary: Color(0xFF3B54C5),
  shadow: Color(0xFF000000),
- surfaceTint: Color(0xFFFFACE9),
- outlineVariant: Color(0xFF4F444A),
+ surfaceTint: Color(0xFFB9C3FF),
+ outlineVariant: Color(0xFF46464F),
  scrim: Color(0xFF000000),
 );

lib/presentation/molecules/bottom_navigation_bar_molecule.dart

@@ -23,18 +23,18 @@ class BottomNavigationBarMolecule extends StatelessWidget {
  return Column(
  mainAxisSize: MainAxisSize.min,
  children: [
- const Align(
+ Align(
  alignment: Alignment.bottomLeft,
  child: Divider(
- color: Color(0xFF98A3B9),
+ color: colorScheme.onBackground,
  height: 1,
  thickness: 0.5,
  ),
  ),
  BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  showUnselectedLabels: true,
- selectedItemColor: colorScheme.primary,
+ selectedItemColor: colorScheme.tertiary,
  unselectedItemColor: colorScheme.onSurfaceVariant,
  backgroundColor: colorScheme.surface,
  items: bottomNaviList,

lib/presentation/molecules/devices/ac_molecule.dart

@@ -4,7 +4,6 @@ import 'package:another_flushbar/flushbar_helper.dart';
 import 'package:cbj_integrations_controller/integrations_controller.dart';
 import 'package:cybearjinni/domain/connections_service.dart';
 import 'package:cybearjinni/presentation/atoms/atoms.dart';
-import 'package:cybearjinni/presentation/molecules/molecules.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 
@@ -60,14 +59,18 @@ class _AcMoleculeState extends State<AcMolecule> {
 
  @override
  Widget build(BuildContext context) {
- return DeviceNameRowMolecule(
- widget.entity.cbjEntityName.getOrCrash()!,
- SwitchAtom(
- variant: SwitchVariant.ac,
- onToggle: _onChange,
- action: widget.entity.acSwitchState.action!,
- state: widget.entity.entityStateGRPC.state,
- ),
+ return Column(
+ children: [
+ TextAtom(
+ widget.entity.cbjEntityName.getOrCrash()!,
+ ),
+ SwitchAtom(
+ variant: SwitchVariant.ac,
+ onToggle: _onChange,
+ action: widget.entity.acSwitchState.action!,
+ state: widget.entity.entityStateGRPC.state,
+ ),
+ ],
  );
  }
 }

lib/presentation/molecules/devices/boiler_molecule.dart

@@ -4,7 +4,6 @@ import 'package:another_flushbar/flushbar_helper.dart';
 import 'package:cbj_integrations_controller/integrations_controller.dart';
 import 'package:cybearjinni/domain/connections_service.dart';
 import 'package:cybearjinni/presentation/atoms/atoms.dart';
-import 'package:cybearjinni/presentation/molecules/molecules.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 
@@ -60,14 +59,18 @@ class _BoilerMoleculeState extends State<BoilerMolecule> {
 
  @override
  Widget build(BuildContext context) {
- return DeviceNameRowMolecule(
- widget.entity.cbjEntityName.getOrCrash()!,
- SwitchAtom(
- variant: SwitchVariant.boiler,
- onToggle: _onChange,
- action: widget.entity.boilerSwitchState.action,
- state: widget.entity.entityStateGRPC.state,
- ),
+ return Column(
+ children: [
+ TextAtom(
+ widget.entity.cbjEntityName.getOrCrash()!,
+ ),
+ SwitchAtom(
+ variant: SwitchVariant.boiler,
+ onToggle: _onChange,
+ action: widget.entity.boilerSwitchState.action,
+ state: widget.entity.entityStateGRPC.state,
+ ),
+ ],
  );
  }
 }