diplomatic-quarter/lib/pages/AlHabibMedicalService/h2o/today_page.dart

import 'package:diplomaticquarterapp/core/viewModels/AlHabibMedicalService/H2O_view_model.dart';
import 'package:diplomaticquarterapp/pages/AlHabibMedicalService/h2o/widgets/h20_floating_action_button.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';
import 'package:percent_indicator/circular_percent_indicator.dart';

class TodayPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BaseView<H2OViewModel>(
      onModelReady: (model) => model.getUserProgressForTodayData(),
      builder: (_, model, widget) => AppScaffold(
        isShowAppBar: false,
        appBarTitle: "Water Tracker",
        baseViewModel: model,
        body: SingleChildScrollView(
          padding: EdgeInsets.symmetric(vertical: 12),
          child: Container(
            margin: EdgeInsets.only(top: 60),
            child: Column(
              children: [
                Center(
                  child: CircularPercentIndicator(
                    radius: 180.0,
                    animation: true,
                    animationDuration: 1200,
                    lineWidth: 15.0,
                    percent: model.userProgressData == null
                        ? 0.0
                        : (model.userProgressData.percentageConsumed / 100) >= 1
                            ? 1
                            : (model.userProgressData.percentageConsumed / 100),
                    //,
                    center: Center(
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          // SizedBox(
                          //   height: 40,
                          // ),
                          Text(
                            "Consumed",
                            style: TextStyle(fontSize: 16.0),
                          ),
                          SizedBox(
                            height: 4,
                          ),
                          Text(
                            model.userProgressData == null ? "0.0" : model.userProgressData.quantityConsumed.toString() + 'ml',
                            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14.0, color: HexColor("#60BCF9")),
                          ),
                          SizedBox(
                            height: 4,
                          ),
                          SizedBox(
                            height: 5,
                            width: 50,
                            child: Container(),
                          ),
                          SizedBox(
                            height: 4,
                          ),
                          Text(
                            "Remaining",
                            style: TextStyle(fontSize: 16.0),
                          ),
                          SizedBox(
                            height: 4,
                          ),
                          Text(
                            model.userProgressData == null
                                ? "0.0"
                                : (model.userProgressData.quantityLimit - model.userProgressData.quantityConsumed) < 0
                                    ? "0 ml"
                                    : (model.userProgressData.quantityLimit - model.userProgressData.quantityConsumed).toString() + ' ml',
                            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14.0),
                          ),
                        ],
                      ),
                    ),
                    circularStrokeCap: CircularStrokeCap.butt,
                    backgroundColor: HexColor("#D1E3F6"),
                    progressColor: HexColor("#60BCF9"),
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Container(
                          margin: EdgeInsets.only(bottom: 16),
                          height: 30,
                          width: 70,
                          decoration: BoxDecoration(color: HexColor("#D1E3F6"), borderRadius: BorderRadius.all(Radius.circular(30))),
                        ),
                        Text(
                          "Remaining %",
                          style: TextStyle(fontSize: 16.0),
                        )
                      ],
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Container(
                          margin: EdgeInsets.only(bottom: 16),
                          height: 30,
                          width: 70,
                          decoration: BoxDecoration(color: HexColor("#60BCF9"), borderRadius: BorderRadius.all(Radius.circular(30))),
                        ),
                        Text(
                          "Consumed %",
                          style: TextStyle(fontSize: 16.0),
                        )
                      ],
                    )
                  ],
                ),
                SizedBox(
                  height: 30,
                ),
                SizedBox(
                  height: 0.5,
                  width: MediaQuery.of(context).size.width,
                  child: Container(
                    color: Colors.grey,
                  ),
                ),
              ],
            ),
          ),
        ),
        floatingActionButton: H20FloatingActionButton(
          // controller: _controller,
          model: model,
        ),
      ),
    );
  }
}