monthly report ui redesigned.

merge-requests/390/head
Sikander Saleem 4 years ago
parent 120e6c166d
commit a09b43ef8c

@ -1,17 +1,15 @@
import 'package:diplomaticquarterapp/core/enum/viewstate.dart';
import 'package:diplomaticquarterapp/core/model/ImagesInfo.dart';
import 'package:diplomaticquarterapp/core/viewModels/medical/reports_monthly_view_model.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/pages/medical/reports/user_agreement_page.dart';
import 'package:diplomaticquarterapp/uitl/gif_loader_dialog_utils.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/buttons/secondary_button.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/buttons/defaultButton.dart';
import 'package:diplomaticquarterapp/widgets/input/custom_switch.dart';
import 'package:diplomaticquarterapp/widgets/input/text_field.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
class MonthlyReportsPage extends StatefulWidget {
@ -57,152 +55,191 @@ class _MonthlyReportsPageState extends State<MonthlyReportsPage> {
imagesInfo: imagesInfo,
description: TranslationBase.of(context).infoMonthReport,
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(12),
child: Form(
key: formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.all(9),
height: 55,
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(8)), shape: BoxShape.rectangle, border: Border.all(color: Colors.grey)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Texts(
TranslationBase.of(context).patientHealthSummaryReport,
bold: true,
),
CustomSwitch(
value: isSummary,
activeColor: Colors.red,
inactiveColor: Colors.grey,
onChanged: () async {
setState(() {
isSummary = !isSummary;
});
if (!isSummary) {
GifLoaderDialogUtils.showMyDialog(context);
await model.updatePatientHealthSummaryReport(message: TranslationBase.of(context).updateSuccessfully, isSummary: isSummary);
model.receiveHealthSummaryReport = isSummary;
isAgree = isSummary;
model.user.emailAddress = "";
GifLoaderDialogUtils.hideDialog(context);
}
},
)
],
),
),
SizedBox(
height: 15,
),
Container(
margin: EdgeInsets.all(8),
child: TextFields(
fillColor: Colors.red,
hintText: 'email@email.com',
fontSize: 20,
initialValue: email,
fontWeight: FontWeight.w600,
onChanged: (text) {
email = text;
},
validator: (value) {
if (value.isEmpty)
return TranslationBase.of(context).enterEmail;
else
return null;
},
),
),
Divider(
height: 10.4,
thickness: 1.0,
),
SizedBox(
height: 15,
),
Container(
margin: EdgeInsets.all(8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Texts(TranslationBase.of(context).toViewTheTermsAndConditions),
physics: BouncingScrollPhysics(),
padding: EdgeInsets.all(21),
child: Form(
key: formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(right: 12, left: 12, top: 14, bottom: 14),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
boxShadow: [
BoxShadow(
color: Color(0xff000000).withOpacity(.05),
//spreadRadius: 5,
blurRadius: 27,
offset: Offset(0, -3),
),
InkWell(
onTap: () {
Navigator.push(
context,
FadePage(
page: UserAgreementContent(),
),
);
},
child: Texts(
TranslationBase.of(context).clickHere,
color: Colors.blue,
),
)
],
),
),
SizedBox(
height: 5,
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
color: Colors.white),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Checkbox(
value: isAgree,
onChanged: (value) {
Expanded(
child: Text(
TranslationBase.of(context).patientHealthSummaryReport,
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.64, height: 25 / 16),
),
),
CustomSwitch(
value: isSummary,
activeColor: Color(0xffD02127),
inactiveColor: Color(0xff28323A).withOpacity(0.3),
onChanged: () async {
setState(() {
isAgree = !isAgree;
isSummary = !isSummary;
});
if (!isSummary) {
GifLoaderDialogUtils.showMyDialog(context);
await model.updatePatientHealthSummaryReport(message: TranslationBase.of(context).updateSuccessfully, isSummary: isSummary);
model.receiveHealthSummaryReport = isSummary;
isAgree = isSummary;
model.user.emailAddress = "";
GifLoaderDialogUtils.hideDialog(context);
}
},
activeColor: Colors.red,
)
],
),
),
SizedBox(
height: 15,
),
Container(
padding: EdgeInsets.only(left: 16, right: 16, bottom: 15, top: 15),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.white,
border: Border.all(
color: Color(0xffefefef),
width: 1,
),
),
child: Row(
children: [
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
TranslationBase.of(context).email,
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w600,
color: Color(0xff2B353E),
letterSpacing: -0.44,
),
),
TextFormField(
scrollPadding: EdgeInsets.zero,
keyboardType: TextInputType.number,
// controller: _controller,
onChanged: (value) => {email = value},
initialValue: email,
style: TextStyle(
fontSize: 14,
height: 21 / 14,
fontWeight: FontWeight.w400,
color: Color(0xff2B353E),
letterSpacing: -0.44,
),
validator: (value) {
if (value.isEmpty)
return TranslationBase.of(context).enterEmail;
else
return null;
},
decoration: InputDecoration(
isDense: true,
hintText: "email@email.com",
hintStyle: TextStyle(
fontSize: 14,
height: 21 / 14,
fontWeight: FontWeight.w400,
color: Color(0xff575757),
letterSpacing: -0.56,
),
contentPadding: EdgeInsets.zero,
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
),
),
],
),
),
Texts(TranslationBase.of(context).iAgreeToTheTermsAndConditions),
],
),
Container(
margin: EdgeInsets.all(8),
width: double.infinity,
child: SecondaryButton(
textColor: Colors.white,
label: TranslationBase.of(context).save,
disabled: (!isAgree || !isSummary),
onTap: () async {
final form = formKey.currentState;
if (form.validate()) {
GifLoaderDialogUtils.showMyDialog(context);
await model.updatePatientHealthSummaryReport(
message: TranslationBase.of(context).updateSuccessfully, isSummary: isSummary, isUpdateEmail: true, email: email.isNotEmpty ? email : model.user.emailAddress);
model.receiveHealthSummaryReport = isSummary;
model.user.emailAddress = email.isNotEmpty ? email : model.user.emailAddress;
GifLoaderDialogUtils.hideDialog(context);
}
),
SizedBox(
height: 12,
),
RichText(
text: TextSpan(
text: TranslationBase.of(context).toViewTheTermsAndConditions + " ",
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: Color(0xff2B353E), letterSpacing: -0.64, height: 23 / 16),
children: [
TextSpan(
text: TranslationBase.of(context).clickHere,
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.blue, letterSpacing: -0.64, height: 23 / 16),
recognizer: new TapGestureRecognizer()
..onTap = () => Navigator.push(
context,
FadePage(
page: UserAgreementContent(),
),
),
)
]),
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Checkbox(
value: isAgree,
onChanged: (value) {
setState(() {
isAgree = !isAgree;
});
},
activeColor: Color(0xffD02127),
),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: Texts(
TranslationBase.of(context).instructionAgree,
fontWeight: FontWeight.normal,
Text(
TranslationBase.of(context).iAgreeToTheTermsAndConditions,
style: TextStyle(fontSize: 14, fontWeight: FontWeight.w400, color: Color(0xff2B353E), letterSpacing: -0.56, height: 21 / 14),
),
),
SizedBox(
height: 12,
),
Center(child: Image.asset('assets/images/report.jpg'))
],
),
],
),
DefaultButton(
TranslationBase.of(context).save,
() async {
final form = formKey.currentState;
if (form.validate()) {
GifLoaderDialogUtils.showMyDialog(context);
await model.updatePatientHealthSummaryReport(
message: TranslationBase.of(context).updateSuccessfully, isSummary: isSummary, isUpdateEmail: true, email: email.isNotEmpty ? email : model.user.emailAddress);
model.receiveHealthSummaryReport = isSummary;
model.user.emailAddress = email.isNotEmpty ? email : model.user.emailAddress;
GifLoaderDialogUtils.hideDialog(context);
}
},
),
SizedBox(height: 12),
Text(
TranslationBase.of(context).instructionAgree,
style: TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.48, height: 18 / 12),
),
SizedBox(height: 12),
Center(child: Image.asset('assets/images/report.jpg'))
],
),
),
),

@ -13,11 +13,13 @@ class UserAgreementContent extends StatelessWidget {
builder: (_, model, w) => AppScaffold(
isShowAppBar: true,
baseViewModel: model,
showNewAppBar: true,
showNewAppBarTitle: true,
backgroundColor: Color(0xffF7F7F7),
appBarTitle: TranslationBase.of(context).userAgreement,
body: SingleChildScrollView(
child: Html(
data: model.userAgreementContent,
),
physics: BouncingScrollPhysics(),
child: Html(data: model.userAgreementContent),
),
),
);

@ -13,32 +13,21 @@ class CustomSwitch extends StatefulWidget {
final Color activeColor;
final Color inactiveColor;
CustomSwitch(
{Key key,
this.value,
this.onChanged,
this.activeColor,
this.inactiveColor})
: super(key: key);
CustomSwitch({Key key, this.value, this.onChanged, this.activeColor, this.inactiveColor}) : super(key: key);
@override
_CustomSwitchState createState() => _CustomSwitchState();
}
class _CustomSwitchState extends State<CustomSwitch>
with SingleTickerProviderStateMixin {
class _CustomSwitchState extends State<CustomSwitch> with SingleTickerProviderStateMixin {
Animation _circleAnimation;
AnimationController _animationController;
@override
void initState() {
super.initState();
_animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 500));
_circleAnimation = Tween(begin: 0.0, end: 30.0).animate(CurvedAnimation(
parent: _animationController,
curve: Curves.easeOutQuint,
reverseCurve: Curves.easeInQuint));
_animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 500));
_circleAnimation = Tween(begin: 0.0, end: 22.0).animate(CurvedAnimation(parent: _animationController, curve: Curves.easeOutQuint, reverseCurve: Curves.easeInQuint));
if (widget.value) _animationController.forward();
}
@ -47,6 +36,7 @@ class _CustomSwitchState extends State<CustomSwitch>
return AnimatedBuilder(
animation: _animationController,
builder: (context, child) {
bool _switchStatus = _circleAnimation.status == AnimationStatus.dismissed || _circleAnimation.status == AnimationStatus.reverse;
return GestureDetector(
onTap: Feedback.wrapForTap(() async {
if (widget.value) {
@ -58,29 +48,18 @@ class _CustomSwitchState extends State<CustomSwitch>
}, context),
child: AnimatedContainer(
duration: Duration(milliseconds: 200),
width: 60.0,
height: 30.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: _circleAnimation.status == AnimationStatus.dismissed ||
_circleAnimation.status == AnimationStatus.reverse
? widget.inactiveColor
: widget.activeColor),
width: 50.0,
height: 25.0,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(20.0), color: _switchStatus ? widget.inactiveColor : widget.activeColor),
child: Padding(
padding:
EdgeInsets.only(top: 6.0, bottom: 6.0, right: 6.0, left: 6.0),
padding: EdgeInsets.only(top: 4.0, bottom: 4.0, right: 6.0, left: 6.0),
child: Row(
children: <Widget>[
Container(width: _circleAnimation.value),
Container(
width: 16.0,
height: 16.0,
decoration: BoxDecoration(boxShadow: [
BoxShadow(
color: Colors.grey[800].withOpacity(0.15),
offset: Offset(0, 4.0),
blurRadius: 5.0)
], shape: BoxShape.circle, color: Colors.white),
decoration: BoxDecoration(boxShadow: [BoxShadow(color: Colors.grey[800].withOpacity(0.15), offset: Offset(0, 4.0), blurRadius: 5.0)], shape: BoxShape.circle, color: Colors.white),
)
],
),

Loading…
Cancel
Save