summaryrefslogtreecommitdiffstats
path: root/lib/presentation/screens/dashboard/widgets/temperature.dart
blob: 1701c6840f7195267dc71f67ceac1e28daedf479 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
import '../../../../export.dart';

class TemperatureWidget extends ConsumerWidget {
  const TemperatureWidget({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final temperature = ref.watch(vehicleProvider.select((vehicle) => vehicle));
    // final outsideTemperature = ref
    //     .watch(vehicleProvider.select((vehicle) => vehicle.outsideTemperature));
    final tempUnit =
        ref.watch(unitStateProvider.select((unit) => unit.temperatureUnit));

    TextStyle temperatureTextStyle = const TextStyle(
      fontFamily: 'BrunoAce',
      color: Colors.white,
      fontSize: 44,
    );

    TextStyle unitTextStyle = const TextStyle(
      fontFamily: 'BrunoAce',
      color: Color(0xFFC1D8FF),
      fontSize: 38,
    );

    return Container(
      width:
          442, // needs to be adjusted after the celsius and farenheight symbols are fixed
      height: 130, // Height of the oval
      //padding: const EdgeInsets.all(10),
      decoration: ShapeDecoration(
        gradient: const RadialGradient(
          colors: [
            Color.fromARGB(255, 19, 24, 75),
            Color.fromARGB(127, 0, 0, 0)
          ],
          stops: [0.0, 0.7],
          radius: 1,
        ),
        //color: Colors.grey,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(
              65), // Half of the height for an oval effect
          side: const BorderSide(
            color: Color.fromARGB(156, 0, 0, 0),
            width: 2,
          ),
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // Inside temperature
          buildTemperatureRow(
            context,
            Icons.thermostat_outlined,
            "Inside",
            temperature.insideTemperature,
            tempUnit,
            temperatureTextStyle,
            unitTextStyle,
            false,
          ),
          const SizedBox(width: 10),
          // Outside temperature
          buildTemperatureRow(
            context,
            Icons.thermostat_outlined,
            "Outside",
            temperature.outsideTemperature,
            tempUnit,
            temperatureTextStyle,
            unitTextStyle,
            true,
          ),
        ],
      ),
    );
  }

  Widget buildTemperatureRow(
    BuildContext context,
    IconData icon,
    String label,
    double temperatureValue,
    TemperatureUnit tempUnit,
    TextStyle tempTextStyle,
    TextStyle unitTextStyle,
    bool isOutside,
  ) {
    int temperatureAsInt = temperatureValue.toInt();
    double convertedTemperature = tempUnit == TemperatureUnit.celsius
        ? temperatureAsInt.toDouble()
        : (temperatureAsInt * 9 / 5) + 32;

    // Format the temperature for display.
    String temperatureDisplay = tempUnit == TemperatureUnit.celsius
        ? '$temperatureAsInt'
        : convertedTemperature.toStringAsFixed(0);

    return Padding(
      padding: isOutside
          ? const EdgeInsets.only(
              right: 22) // Padding for the outside temperature
          : const EdgeInsets.only(
              left: 12), // Padding for the inside temperature
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(
            icon,
            color: const Color(0xFF2962FF),
            size: 48,
          ),
          const SizedBox(width: 4), // Space between icon and text
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                label,
                style: const TextStyle(
                  color: Color(0xFFC1D8FF),
                  fontSize: 26,
                ),
              ),
              RichText(
                text: TextSpan(
                  text: temperatureDisplay,
                  style: tempTextStyle,
                  children: <TextSpan>[
                    TextSpan(
                      text: tempUnit == TemperatureUnit.celsius ? '°C' : '°F',
                      style: unitTextStyle,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}