monthly report ui redesigned.

merge-update-with-lab-changes
Sikander Saleem 5 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/model/ImagesInfo.dart';
import 'package:diplomaticquarterapp/core/viewModels/medical/reports_monthly_view_model.dart'; import 'package:diplomaticquarterapp/core/viewModels/medical/reports_monthly_view_model.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart'; import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:diplomaticquarterapp/pages/medical/reports/user_agreement_page.dart'; import 'package:diplomaticquarterapp/pages/medical/reports/user_agreement_page.dart';
import 'package:diplomaticquarterapp/uitl/gif_loader_dialog_utils.dart'; import 'package:diplomaticquarterapp/uitl/gif_loader_dialog_utils.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:diplomaticquarterapp/widgets/buttons/secondary_button.dart'; import 'package:diplomaticquarterapp/widgets/buttons/defaultButton.dart';
import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
import 'package:diplomaticquarterapp/widgets/input/custom_switch.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/others/app_scaffold_widget.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart'; import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class MonthlyReportsPage extends StatefulWidget { class MonthlyReportsPage extends StatefulWidget {
@ -57,28 +55,41 @@ class _MonthlyReportsPageState extends State<MonthlyReportsPage> {
imagesInfo: imagesInfo, imagesInfo: imagesInfo,
description: TranslationBase.of(context).infoMonthReport, description: TranslationBase.of(context).infoMonthReport,
body: SingleChildScrollView( body: SingleChildScrollView(
child: Container( physics: BouncingScrollPhysics(),
padding: EdgeInsets.all(12), padding: EdgeInsets.all(21),
child: Form( child: Form(
key: formKey, key: formKey,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Container( Container(
padding: EdgeInsets.all(9), padding: EdgeInsets.only(right: 12, left: 12, top: 14, bottom: 14),
height: 55, decoration: BoxDecoration(
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(8)), shape: BoxShape.rectangle, border: Border.all(color: Colors.grey)), borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
boxShadow: [
BoxShadow(
color: Color(0xff000000).withOpacity(.05),
//spreadRadius: 5,
blurRadius: 27,
offset: Offset(0, -3),
),
],
color: Colors.white),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Texts( Expanded(
child: Text(
TranslationBase.of(context).patientHealthSummaryReport, TranslationBase.of(context).patientHealthSummaryReport,
bold: true, style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.64, height: 25 / 16),
),
), ),
CustomSwitch( CustomSwitch(
value: isSummary, value: isSummary,
activeColor: Colors.red, activeColor: Color(0xffD02127),
inactiveColor: Colors.grey, inactiveColor: Color(0xff28323A).withOpacity(0.3),
onChanged: () async { onChanged: () async {
setState(() { setState(() {
isSummary = !isSummary; isSummary = !isSummary;
@ -100,59 +111,93 @@ class _MonthlyReportsPageState extends State<MonthlyReportsPage> {
height: 15, height: 15,
), ),
Container( Container(
margin: EdgeInsets.all(8), padding: EdgeInsets.only(left: 16, right: 16, bottom: 15, top: 15),
child: TextFields( alignment: Alignment.center,
fillColor: Colors.red, decoration: BoxDecoration(
hintText: 'email@email.com', borderRadius: BorderRadius.circular(15),
fontSize: 20, color: Colors.white,
initialValue: email, 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, fontWeight: FontWeight.w600,
onChanged: (text) { color: Color(0xff2B353E),
email = text; 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) { validator: (value) {
if (value.isEmpty) if (value.isEmpty)
return TranslationBase.of(context).enterEmail; return TranslationBase.of(context).enterEmail;
else else
return null; 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,
), ),
), ),
Divider( ],
height: 10.4, ),
thickness: 1.0, ),
],
),
), ),
SizedBox( SizedBox(
height: 15, height: 12,
), ),
Container( RichText(
margin: EdgeInsets.all(8), text: TextSpan(
child: Row( text: TranslationBase.of(context).toViewTheTermsAndConditions + " ",
mainAxisAlignment: MainAxisAlignment.spaceBetween, style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: Color(0xff2B353E), letterSpacing: -0.64, height: 23 / 16),
crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
Expanded( TextSpan(
child: Texts(TranslationBase.of(context).toViewTheTermsAndConditions), text: TranslationBase.of(context).clickHere,
), style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.blue, letterSpacing: -0.64, height: 23 / 16),
InkWell( recognizer: new TapGestureRecognizer()
onTap: () { ..onTap = () => Navigator.push(
Navigator.push(
context, context,
FadePage( FadePage(
page: UserAgreementContent(), page: UserAgreementContent(),
), ),
);
},
child: Texts(
TranslationBase.of(context).clickHere,
color: Colors.blue,
), ),
) )
], ]),
),
),
SizedBox(
height: 5,
), ),
Row( Row(
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
@ -165,19 +210,17 @@ class _MonthlyReportsPageState extends State<MonthlyReportsPage> {
isAgree = !isAgree; isAgree = !isAgree;
}); });
}, },
activeColor: Colors.red, activeColor: Color(0xffD02127),
),
Text(
TranslationBase.of(context).iAgreeToTheTermsAndConditions,
style: TextStyle(fontSize: 14, fontWeight: FontWeight.w400, color: Color(0xff2B353E), letterSpacing: -0.56, height: 21 / 14),
), ),
Texts(TranslationBase.of(context).iAgreeToTheTermsAndConditions),
], ],
), ),
Container( DefaultButton(
margin: EdgeInsets.all(8), TranslationBase.of(context).save,
width: double.infinity, () async {
child: SecondaryButton(
textColor: Colors.white,
label: TranslationBase.of(context).save,
disabled: (!isAgree || !isSummary),
onTap: () async {
final form = formKey.currentState; final form = formKey.currentState;
if (form.validate()) { if (form.validate()) {
GifLoaderDialogUtils.showMyDialog(context); GifLoaderDialogUtils.showMyDialog(context);
@ -189,23 +232,17 @@ class _MonthlyReportsPageState extends State<MonthlyReportsPage> {
} }
}, },
), ),
), SizedBox(height: 12),
Padding( Text(
padding: const EdgeInsets.all(5.0),
child: Texts(
TranslationBase.of(context).instructionAgree, TranslationBase.of(context).instructionAgree,
fontWeight: FontWeight.normal, style: TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.48, height: 18 / 12),
),
),
SizedBox(
height: 12,
), ),
SizedBox(height: 12),
Center(child: Image.asset('assets/images/report.jpg')) Center(child: Image.asset('assets/images/report.jpg'))
], ],
), ),
), ),
), ),
),
); );
}); });
} }

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

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