electric-sensor-app/lib/ui/views/monitoring/monitoring_view.dart

import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';

import '../../../app/themes/app_colors.dart';
import '../../../app/themes/app_text.dart';
import '../../../model/electric_model.dart';
import './monitoring_view_model.dart';

class MonitoringView extends StatelessWidget {
  const MonitoringView({super.key});

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<MonitoringViewModel>.reactive(
      viewModelBuilder: () => MonitoringViewModel(),
      onViewModelReady: (MonitoringViewModel model) async {
        await model.init();
      },
      builder: (
        BuildContext context,
        MonitoringViewModel model,
        Widget? child,
      ) {
        return Scaffold(
          appBar: AppBar(
            automaticallyImplyLeading: false,
            backgroundColor: mainColor,
            title: const Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image(
                  image: AssetImage("assets/logo.png"),
                  width: 30,
                  height: 30,
                ),
                SizedBox(width: 10),
                Text(
                  'Electric Monitoring',
                  style: TextStyle(
                    color: backgroundColor,
                  ),
                ),
              ],
            ),
          ),
          body: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Column(
                children: [
                  MyContainer(
                    electricModel: model.faseR,
                    color: Colors.red,
                    fontColor: Colors.white,
                  ),
                  const SizedBox(height: 20),
                  MyContainer(
                    electricModel: model.faseS,
                    color: Colors.yellow,
                    fontColor: Colors.black,
                  ),
                  const SizedBox(height: 20),
                  MyContainer(
                    electricModel: model.faseT,
                    color: Colors.green,
                    fontColor: Colors.white,
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

class MyContainer extends StatelessWidget {
  const MyContainer({
    super.key,
    required this.electricModel,
    required this.color,
    required this.fontColor,
  });

  final ElectricModel? electricModel;
  final Color color;
  final Color fontColor;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10.0),
      width: double.infinity,
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(10.0),
      ),
      child: electricModel == null
          ? Center(
              child: CircularProgressIndicator(
                color: fontColor,
              ),
            )
          : Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  electricModel?.fase ?? '',
                  style: boldTextStyle.copyWith(
                    color: fontColor,
                    fontSize: 15,
                    fontStyle: FontStyle.italic,
                  ),
                ),
                const SizedBox(height: 5),
                MyText(
                  title: 'Voltage : ',
                  text: electricModel?.voltage != ' NAN'
                      ? "${electricModel?.voltage} V"
                      : "Error getting voltage",
                  fontColor: fontColor,
                ),
                MyText(
                  title: 'Current : ',
                  text: electricModel?.current != ' NAN'
                      ? "${electricModel?.current} A"
                      : "Error getting current",
                  fontColor: fontColor,
                ),
                MyText(
                  title: 'Power : ',
                  text: electricModel?.power != ' NAN'
                      ? "${electricModel?.power} W"
                      : "Error getting power",
                  fontColor: fontColor,
                ),
                MyText(
                  title: 'Energy : ',
                  text: electricModel?.energy != ' NAN'
                      ? "${electricModel?.energy} kWh"
                      : "Error getting energy",
                  fontColor: fontColor,
                ),
                MyText(
                  title: 'Power Factor : ',
                  text: electricModel?.pf != ' NAN'
                      ? "${electricModel?.pf} %"
                      : "Error getting power factor",
                  fontColor: fontColor,
                ),
              ],
            ),
    );
  }
}

class MyText extends StatelessWidget {
  const MyText({
    super.key,
    required this.title,
    required this.text,
    required this.fontColor,
  });

  final String title;
  final String text;
  final Color fontColor;

  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
        children: [
          TextSpan(
            text: title,
            style: boldTextStyle.copyWith(
              color: fontColor,
              fontSize: 15,
            ),
          ),
          TextSpan(
            text: text,
            style: italicTextStyle.copyWith(
              color: fontColor,
              fontSize: 15,
            ),
          ),
        ],
      ),
    );
  }
}