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

import 'package:diplomaticquarterapp/core/enum/viewstate.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:diplomaticquarterapp/widgets/progress_indicator/app_circular_progress_Indeicator.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 StatefulWidget {
  @override
  _TodayPageState createState() => _TodayPageState();
}

class _TodayPageState extends State<TodayPage> with TickerProviderStateMixin {
  static const List<IconData> icons = const [
    Icons.sms,
    Icons.mail,
    Icons.phone
  ];
  AnimationController _controller;

  @override
  void initState() {
    _controller = new AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500),
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    Color backgroundColor = Theme.of(context).cardColor;
    Color foregroundColor = Theme.of(context).accentColor;
    return BaseView<H2OViewModel>(
      onModelReady: (model) => model.getUserProgressForTodayData(),
      builder: (_, model, widget) => AppScaffold(
          isShowAppBar: false,
          appBarTitle: "Water Tracker",
          body: SingleChildScrollView(
            padding: EdgeInsets.symmetric(vertical: 12),
            child: model.state == ViewState.BusyLocal
                ? Center(
                    child: Container(
                        margin: EdgeInsets.only(top: 90),
                        child: AppCircularProgressIndicator()))
                : 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.percentageConsumed /
                                    100),
                            //,
                            center: Center(
                              child: Column(
                                children: [
                                  SizedBox(
                                    height: 40,
                                  ),
                                  Text(
                                    "Consumed",
                                    style: TextStyle(fontSize: 20.0),
                                  ),
                                  SizedBox(
                                    height: 4,
                                  ),
                                  Text(
                                    model.userProgressData.quantityConsumed
                                        .toString(),
                                    style: TextStyle(
                                        fontWeight: FontWeight.bold,
                                        fontSize: 20.0,
                                        color: Hexcolor("#60BCF9")),
                                  ),
                                  SizedBox(
                                    height: 4,
                                  ),
                                  SizedBox(
                                    height: 5,
                                    width: 50,
                                    child: Container(
                                      color: Colors.grey,
                                    ),
                                  ),
                                  Text(
                                    "Remaining",
                                    style: TextStyle(fontSize: 20.0),
                                  ),
                                  SizedBox(
                                    height: 4,
                                  ),
                                  Text(
                                    (model.userProgressData.quantityLimit -
                                            model.userProgressData
                                                .quantityConsumed)
                                        .toString(),
                                    style: TextStyle(
                                        fontWeight: FontWeight.bold,
                                        fontSize: 20.0),
                                  ),
                                ],
                              ),
                            ),
                            circularStrokeCap: CircularStrokeCap.butt,
                            backgroundColor: Hexcolor("#D1E3F6"),
                            progressColor: Hexcolor("#60BCF9"),
                          ),
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: [
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Center(
                                  child: Container(
                                    margin: EdgeInsets.only(left: 20),
                                    height: 30,
                                    width: 70,
                                    decoration: BoxDecoration(
                                        color: Hexcolor("#D1E3F6"),
                                        borderRadius: BorderRadius.all(
                                            Radius.circular(30))),
                                  ),
                                ),
                                Text(
                                  "Remaining % ",
                                  style: TextStyle(fontSize: 20.0),
                                )
                              ],
                            ),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Center(
                                  child: Container(
                                    margin: EdgeInsets.only(left: 20),
                                    height: 30,
                                    width: 70,
                                    decoration: BoxDecoration(
                                        color: Hexcolor("#60BCF9"),
                                        borderRadius: BorderRadius.all(
                                            Radius.circular(30))),
                                  ),
                                ),
                                Text(
                                  "Consumed % ",
                                  style: TextStyle(fontSize: 20.0),
                                )
                              ],
                            )
                          ],
                        ),
                        SizedBox(
                          height: 30,
                        ),
                        SizedBox(
                          height: 0.5,
                          width: MediaQuery.of(context).size.width,
                          child: Container(
                            color: Colors.grey,
                          ),
                        ),
                      ],
                    ),
                  ),
          ),
          floatingActionButton: H20FloatingActionButton(
              controller: _controller,
              backgroundColor: backgroundColor,
              foregroundColor: foregroundColor)),
    );
  }
}