Update UI for IoT Monitoring Page

- Add telemetry data cards with respective icons
- Add reload bar

lib/ui/IoT/IoT_monitoring_page.dart

@@ -1,3 +1,6 @@
+import 'package:farmassist/ui/IoT/reload_bar.dart';
+import 'package:farmassist/ui/IoT/telemetry_data_card.dart';
+import 'package:farmassist/ui/IoT/telemetry_data_card_item.dart';
 import 'package:farmassist/ui/widgets/tab_page.dart';
 import 'package:flutter/material.dart';
 
@@ -10,6 +13,17 @@ class IoTMonitoringPage extends TabPage {
 }
 
 class _IoTMonitoringPageState extends TabPageState<IoTMonitoringPage> {
+  List<TelemetryDataCardItem> _cardItems = TelemetryDataCardItem.cardItems;
+
+  @override
+  void initState() {
+    tabListView.add(ReloadBar());
+    _cardItems.forEach((i) {
+      tabListView.add(TelemetryDataCard(cardItem: i));
+    });
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
     return super.build(context);

lib/ui/IoT/reload_bar.dart

@@ -0,0 +1,57 @@
+import 'package:farmassist/app_theme.dart';
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+
+class ReloadBar extends StatefulWidget {
+  @override
+  _ReloadBarState createState() => _ReloadBarState();
+}
+
+class _ReloadBarState extends State<ReloadBar> {
+  String _now = DateFormat.yMd().add_jm().format(DateTime.now());
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: Padding(
+        padding: const EdgeInsets.only(left: 24.0, right: 24.0),
+        child: Row(
+          children: <Widget>[
+            InkWell(
+              highlightColor: AppTheme.notWhite,
+              borderRadius: BorderRadius.all(Radius.circular(28.0)),
+              onTap: () {
+                setState(() {
+                  _now = DateFormat.yMd().add_jm().format(DateTime.now());
+                });
+              },
+              child: SizedBox(
+                child: Icon(
+                  Icons.autorenew,
+                  color: AppTheme.darkText,
+                  size: 28,
+                ),
+              ),
+            ),
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.only(left: 8.0),
+                child: Text(
+                  'Last update: $_now',
+                  textAlign: TextAlign.left,
+                  style: TextStyle(
+                    fontFamily: AppTheme.fontName,
+                    fontWeight: FontWeight.w500,
+                    fontSize: 16,
+                    letterSpacing: 0.5,
+                    color: AppTheme.lightText,
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/ui/IoT/telemetry_data_card.dart

@@ -0,0 +1,140 @@
+import 'package:farmassist/app_theme.dart';
+import 'package:farmassist/ui/IoT/telemetry_data_card_item.dart';
+import 'package:flutter/material.dart';
+
+class TelemetryDataCard extends StatelessWidget {
+  const TelemetryDataCard({Key key, this.cardItem}) : super(key: key);
+
+  final TelemetryDataCardItem cardItem;
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: <Widget>[
+        Padding(
+          padding: const EdgeInsets.only(
+            left: 24.0,
+            right: 24.0,
+            top: 16.0,
+            bottom: 18.0,
+          ),
+          child: Container(
+            decoration: BoxDecoration(
+              gradient: LinearGradient(
+                colors: [
+                  cardItem.color1,
+                  cardItem.color2,
+                ],
+                begin: Alignment.topLeft,
+                end: Alignment.bottomRight,
+              ),
+              borderRadius: BorderRadius.only(
+                topLeft: Radius.circular(8.0),
+                bottomLeft: Radius.circular(8.0),
+                bottomRight: Radius.circular(8.0),
+                topRight: Radius.circular(68.0),
+              ),
+              boxShadow: <BoxShadow>[
+                BoxShadow(
+                  color: AppTheme.grey.withOpacity(0.6),
+                  offset: Offset(1.1, 1.1),
+                  blurRadius: 10.0,
+                ),
+              ],
+            ),
+            child: Padding(
+              padding: const EdgeInsets.all(16.0),
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: <Widget>[
+                  Text(
+                    cardItem.title,
+                    textAlign: TextAlign.left,
+                    style: TextStyle(
+                      fontFamily: AppTheme.fontName,
+                      fontWeight: FontWeight.normal,
+                      fontSize: 20,
+                      letterSpacing: 0.0,
+                      color: AppTheme.white,
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.only(top: 8.0),
+                    child: FractionallySizedBox(
+                      widthFactor: 0.8,
+                      child: Text(
+                        cardItem.description,
+                        textAlign: TextAlign.left,
+                        style: TextStyle(
+                          fontFamily: AppTheme.fontName,
+                          fontWeight: FontWeight.normal,
+                          fontSize: 16,
+                          letterSpacing: 0.0,
+                          color: AppTheme.white,
+                        ),
+                      ),
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.only(top: 16.0),
+                    child: Row(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: <Widget>[
+                        SizedBox(
+                          height: 30,
+                          width: 30,
+                          child: 1 == 1 // TODO: temporary dummy placeholder
+                              ? Icon(
+                                  Icons.warning_rounded,
+                                  color: AppTheme.white,
+                                  size: 30,
+                                )
+                              : null,
+                        ),
+                        Expanded(
+                          child: Text(
+                            '68.9', // TODO: temporary dummy placeholder
+                            textAlign: TextAlign.right,
+                            style: TextStyle(
+                              fontFamily: AppTheme.fontName,
+                              fontWeight: FontWeight.w500,
+                              fontSize: 50,
+                              letterSpacing: 0.0,
+                              color: AppTheme.white,
+                            ),
+                          ),
+                        ),
+                        Expanded(
+                          child: Text(
+                            cardItem.unit,
+                            textAlign: TextAlign.left,
+                            style: TextStyle(
+                              fontFamily: AppTheme.fontName,
+                              fontWeight: FontWeight.w500,
+                              fontSize: 22,
+                              letterSpacing: 0.0,
+                              color: AppTheme.white,
+                            ),
+                          ),
+                        ),
+                      ],
+                    ),
+                  )
+                ],
+              ),
+            ),
+          ),
+        ),
+        Positioned(
+          top: 4.0,
+          right: 20.0,
+          height: 80,
+          width: 80,
+          child: Image.asset(cardItem.imagePath),
+        )
+      ],
+    );
+  }
+}

lib/ui/IoT/telemetry_data_card_item.dart

@@ -0,0 +1,69 @@
+import 'dart:ui';
+
+class TelemetryDataCardItem {
+  TelemetryDataCardItem({
+    this.title,
+    this.description,
+    this.unit,
+    this.imagePath,
+    this.color1,
+    this.color2,
+    this.index,
+  });
+
+  String title;
+  String description;
+  String unit;
+  String imagePath;
+  Color color1;
+  Color color2;
+  int index;
+
+  static List<TelemetryDataCardItem> cardItems = [
+    TelemetryDataCardItem(
+      title: 'Air Humidity',
+      description: 'Relative percentage of water vapour present in air',
+      unit: '%',
+      imagePath: 'assets/images/air_humidity.png',
+      color1: const Color(0xFF6F56E8),
+      color2: const Color(0xFF79D1FB),
+      index: 0,
+    ),
+    TelemetryDataCardItem(
+      title: 'Air Temperature',
+      description: 'Weather parameter that measures how hot or cold the air is',
+      unit: '°C',
+      imagePath: 'assets/images/air_temperature.png',
+      color1: const Color(0xFF006400),
+      color2: const Color(0xFF1FDF39),
+      index: 1,
+    ),
+    TelemetryDataCardItem(
+      title: 'Soil Moisture',
+      description: 'Percentage of volumetric water content in soil',
+      unit: '%',
+      imagePath: 'assets/images/soil_moisture.png',
+      color1: const Color(0xFF800000),
+      color2: const Color(0xFFD2691E),
+      index: 2,
+    ),
+    TelemetryDataCardItem(
+      title: 'Soil pH',
+      description: 'Measure of acidity or alkalinity of soil',
+      unit: 'pH',
+      imagePath: 'assets/images/soil_pH.png',
+      color1: const Color(0xFFFF3F34),
+      color2: const Color(0xFFFFA334),
+      index: 3,
+    ),
+    TelemetryDataCardItem(
+      title: 'Soil Salinity',
+      description: 'Measure of salt content of soil in milliSiemens per cm',
+      unit: 'mS/cm',
+      imagePath: 'assets/images/soil_salinity.png',
+      color1: const Color(0xFF9700CB),
+      color2: const Color(0xFFF410D9),
+      index: 4,
+    ),
+  ];
+}