Commit f2067cff authored by Dio Maulana's avatar Dio Maulana

add responsive web

parent b0dd22fa
...@@ -4,8 +4,10 @@ import 'package:flutter/material.dart'; ...@@ -4,8 +4,10 @@ import 'package:flutter/material.dart';
import 'package:tour_travel_agr/helper/components_widget/custom_appbar.dart'; import 'package:tour_travel_agr/helper/components_widget/custom_appbar.dart';
import 'package:tour_travel_agr/helper/components_widget/widget_button.dart'; import 'package:tour_travel_agr/helper/components_widget/widget_button.dart';
import 'package:tour_travel_agr/helper/components_widget/widget_text_field.dart'; import 'package:tour_travel_agr/helper/components_widget/widget_text_field.dart';
import 'package:tour_travel_agr/helper/widget_responsive.dart';
import 'package:tour_travel_agr/resource/assets.dart'; import 'package:tour_travel_agr/resource/assets.dart';
import 'package:tour_travel_agr/resource/colors.dart'; import 'package:tour_travel_agr/resource/colors.dart';
import 'package:tour_travel_agr/resource/routes.dart';
import 'package:tour_travel_agr/resource/size.dart'; import 'package:tour_travel_agr/resource/size.dart';
import 'package:tour_travel_agr/resource/style.dart'; import 'package:tour_travel_agr/resource/style.dart';
...@@ -35,119 +37,130 @@ class _ForgotPasswordViewState extends State<ForgotPasswordView> { ...@@ -35,119 +37,130 @@ class _ForgotPasswordViewState extends State<ForgotPasswordView> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
backgroundColor: ColorManager.backgroundColor, backgroundColor: ColorManager.backgroundColor,
body: Stack( body: ScreenResponsive(
children: [ widget: bodyWidget(context),
Positioned( widthScreen: MediaQuery.of(context).size.width,
top: 0, ),
left: 0, );
child: Image( }
height: 100,
image: AssetImage( Stack bodyWidget(BuildContext context) {
Assets.elipse, return Stack(
), children: [
Positioned(
top: 0,
left: 0,
child: Image(
height: 100,
image: AssetImage(
Assets.elipse,
), ),
), ),
Container( ),
padding: EdgeInsets.only( Container(
top: AppPadding.safeAreaTop(context), padding: EdgeInsets.only(
left: AppPadding.p20, top: AppPadding.safeAreaTop(context),
right: AppPadding.p20, left: AppPadding.p20,
bottom: AppPadding.safeAreaBot(context), right: AppPadding.p20,
), bottom: AppPadding.safeAreaBot(context),
child: Column( ),
children: [ child: Column(
const CustomAppBar( children: [
text: "ForgotPassword", const CustomAppBar(
), text: "ForgotPassword",
Expanded( ),
child: SingleChildScrollView( Expanded(
child: Column( child: SingleChildScrollView(
crossAxisAlignment: CrossAxisAlignment.start, child: Column(
children: [ crossAxisAlignment: CrossAxisAlignment.start,
Container( children: [
child: Center( Container(
child: Image( child: Center(
width: 216, child: Image(
height: 216, width: 216,
image: AssetImage( height: 216,
Assets.forgotPassword, image: AssetImage(
), Assets.forgotPassword,
), ),
), ),
), ),
Container( ),
margin: EdgeInsets.only( Container(
top: AppMargin.m25, margin: EdgeInsets.only(
), top: AppMargin.m25,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Forgot",
style: getSemiBoldStyle(
color: Colors.black,
fontSize: 32,
),
),
Text(
"Password",
style: getSemiBoldStyle(
color: Colors.black,
fontSize: 32,
),
)
],
),
), ),
Container( child: Column(
margin: EdgeInsets.only( crossAxisAlignment: CrossAxisAlignment.start,
top: AppMargin.m12, children: [
), Text(
child: Text( "Forgot",
"Dont worry! It happens. Please enter your number phone", style: getSemiBoldStyle(
style: getMediumStyle( color: Colors.black,
color: ColorManager.grey, fontSize: 32,
),
), ),
), Text(
), "Password",
SizedBox( style: getSemiBoldStyle(
height: AppMargin.m20, color: Colors.black,
fontSize: 32,
),
)
],
), ),
InputTextField( ),
controller: whatsappController, Container(
labelText: "No Whatsapp", margin: EdgeInsets.only(
inputType: TextInputType.number, top: AppMargin.m12,
onChanged: (val) {
if (val.length > 7) {
setState(() {
buttonActive = true;
});
} else {
setState(() {
buttonActive = false;
});
}
},
), ),
SizedBox( child: Text(
height: AppMargin.m20, "Dont worry! It happens. Please enter your number phone",
style: getMediumStyle(
color: ColorManager.grey,
),
), ),
CustomButton( ),
text: "Submit", SizedBox(
colorButton: (!buttonActive) ? Colors.grey : null, height: AppMargin.m20,
onTap: () { ),
// TODO: dosomething here InputTextField(
}, controller: whatsappController,
) labelText: "No Whatsapp",
], inputType: TextInputType.number,
), onChanged: (val) {
if (val.length > 7) {
setState(() {
buttonActive = true;
});
} else {
setState(() {
buttonActive = false;
});
}
},
),
SizedBox(
height: AppMargin.m20,
),
CustomButton(
text: "Submit",
colorButton: (!buttonActive) ? Colors.grey : null,
onTap: () {
// TODO: dosomething here
if (buttonActive) {
Navigator.pushNamed(
context, Routes.resetPasswordRoute);
}
},
)
],
), ),
) ),
], )
), ],
), ),
], ),
), ],
); );
} }
} }
...@@ -2,7 +2,7 @@ import 'package:flutter/material.dart'; ...@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:tour_travel_agr/helper/components_widget/custom_appbar.dart'; import 'package:tour_travel_agr/helper/components_widget/custom_appbar.dart';
import 'package:tour_travel_agr/helper/components_widget/password_input.dart'; import 'package:tour_travel_agr/helper/components_widget/password_input.dart';
import 'package:tour_travel_agr/helper/components_widget/widget_button.dart'; import 'package:tour_travel_agr/helper/components_widget/widget_button.dart';
import 'package:tour_travel_agr/helper/components_widget/widget_text_field.dart'; import 'package:tour_travel_agr/helper/widget_responsive.dart';
import 'package:tour_travel_agr/resource/assets.dart'; import 'package:tour_travel_agr/resource/assets.dart';
import 'package:tour_travel_agr/resource/colors.dart'; import 'package:tour_travel_agr/resource/colors.dart';
import 'package:tour_travel_agr/resource/size.dart'; import 'package:tour_travel_agr/resource/size.dart';
...@@ -24,113 +24,120 @@ class _ResetPasswordViewState extends State<ResetPasswordView> { ...@@ -24,113 +24,120 @@ class _ResetPasswordViewState extends State<ResetPasswordView> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
backgroundColor: ColorManager.backgroundColor, backgroundColor: ColorManager.backgroundColor,
body: Container( body: ScreenResponsive(
padding: EdgeInsets.only( widget: bodyWidget(context),
top: AppPadding.safeAreaTop(context), widthScreen: MediaQuery.of(context).size.width,
left: AppPadding.p20, ),
right: AppPadding.p20, );
bottom: AppPadding.safeAreaBot(context), }
),
child: Column( Container bodyWidget(BuildContext context) {
children: [ return Container(
const CustomAppBar( padding: EdgeInsets.only(
text: "Reset Password", top: AppPadding.safeAreaTop(context),
), left: AppPadding.p20,
Expanded( right: AppPadding.p20,
child: SingleChildScrollView( bottom: AppPadding.safeAreaBot(context),
child: Column( ),
crossAxisAlignment: CrossAxisAlignment.start, child: Column(
children: [ children: [
Container( const CustomAppBar(
margin: EdgeInsets.only( text: "Reset Password",
top: AppMargin.m10, ),
), Expanded(
child: Center( child: SingleChildScrollView(
child: Image( child: Column(
width: 216, crossAxisAlignment: CrossAxisAlignment.start,
height: 216, children: [
image: AssetImage( Container(
Assets.resetPassword, margin: EdgeInsets.only(
), top: AppMargin.m10,
),
),
), ),
Container( child: Center(
margin: EdgeInsets.only( child: Image(
top: AppMargin.m25, width: 216,
), height: 216,
child: Column( image: AssetImage(
crossAxisAlignment: CrossAxisAlignment.start, Assets.resetPassword,
children: [ ),
Text(
"Reset",
style: getSemiBoldStyle(
color: Colors.black,
fontSize: 32,
),
),
Text(
"Password",
style: getSemiBoldStyle(
color: Colors.black,
fontSize: 32,
),
)
],
), ),
), ),
PasswordInput( ),
passwordController: passwordController, Container(
labelText: "New Password", margin: EdgeInsets.only(
marginTop: AppMargin.m20, top: AppMargin.m25,
onChanged: (val) {
if (passwordController.text.isNotEmpty &&
newPasswordController.text.isNotEmpty) {
setState(() {
buttonActive = true;
});
} else {
setState(() {
buttonActive = false;
});
}
},
),
PasswordInput(
passwordController: newPasswordController,
labelText: "Confirm New Password",
marginTop: AppMargin.m20,
onChanged: (val) {
if (passwordController.text.isNotEmpty &&
newPasswordController.text.isNotEmpty) {
setState(() {
buttonActive = true;
});
} else {
setState(() {
buttonActive = false;
});
}
},
), ),
SizedBox( child: Column(
height: AppMargin.m20, crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Reset",
style: getSemiBoldStyle(
color: Colors.black,
fontSize: 32,
),
),
Text(
"Password",
style: getSemiBoldStyle(
color: Colors.black,
fontSize: 32,
),
)
],
), ),
CustomButton( ),
text: "Submit", PasswordInput(
colorButton: (!buttonActive) ? Colors.grey : null, passwordController: passwordController,
onTap: () { labelText: "New Password",
if (buttonActive) { marginTop: AppMargin.m20,
// TODO: do something here onChanged: (val) {
} if (passwordController.text.isNotEmpty &&
}, newPasswordController.text.isNotEmpty) {
) setState(() {
], buttonActive = true;
), });
} else {
setState(() {
buttonActive = false;
});
}
},
),
PasswordInput(
passwordController: newPasswordController,
labelText: "Confirm New Password",
marginTop: AppMargin.m20,
onChanged: (val) {
if (passwordController.text.isNotEmpty &&
newPasswordController.text.isNotEmpty) {
setState(() {
buttonActive = true;
});
} else {
setState(() {
buttonActive = false;
});
}
},
),
SizedBox(
height: AppMargin.m20,
),
CustomButton(
text: "Submit",
colorButton: (!buttonActive) ? Colors.grey : null,
onTap: () {
if (buttonActive) {
// TODO: do something here
}
},
)
],
), ),
) ),
], )
), ],
), ),
); );
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment