الگوی صفحه چینی فرم لاگین
تعداد بازدید ها : 1,518 بازدید
جهت صفحه چینی فرم های اپلیکیشن ، شما راه حل های زیادی را پیش روی خود دارید . در این مطلب یک روش ساخت یافته و اصولی جهت صفحه چینی فرم لاگین خدمت شما ارائه می دهم .جهت این منظور من از ویجت های Container ، ویجت Stack ، ویجت Column ، ویجت Form و ویجت TextFormField به ترتیبی که در تصویر زیر قابل مشاهده است ، استفاده کرده ام .
در این پروژه از انیمیشن ها ، قابلیت ذخیره در Shared Preferences و اتصال به سرور استفاده شده است . جهت ایجاد این پروژه ، ابتدا یک پروژه جدید ایجاد نمایید ، سپس فایل های زیر را ایجاد و کدهای هر فایل را در آن کپی نمایید . حال پروژه را اجرا و خروجی را مشاهده نمایید .
کدهای مربوط به فایل اصلی صفحه لاگین ( فایلی به نام LoginUser.dart ) :
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:whatsapp_roocket/WebServices/Auth_Service.dart';
import 'package:whatsapp_roocket/animations/SingIn_animation.dart';
import 'package:whatsapp_roocket/components/FormContainer.dart' as form;
class LoginUser extends StatefulWidget {
@override
_LoginUserState createState() => _LoginUserState();
}
class _LoginUserState extends State<LoginUser>
with SingleTickerProviderStateMixin {
AnimationController _loginButtonController;
final formKey = GlobalKey<FormState>(); // کلید فرم ورود
final scaffoldKey = GlobalKey<ScaffoldState>(); // کلید اسکفولد
var _emailValue;
var _passwordValue;
@override
void initState() {
// TODO: implement initState
super.initState();
_loginButtonController = AnimationController(
vsync: this, duration: Duration(milliseconds: 3000));
}
@override
void dispose() {
// TODO: implement dispose
_loginButtonController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final sizeScreen = MediaQuery.of(context).size;
return Scaffold(
key: scaffoldKey,
resizeToAvoidBottomPadding: false,
body: Container(
//width: sizeScreen.width,
//height: sizeScreen.height,
decoration: BoxDecoration(
gradient: LinearGradient(colors: <Color>[
Color(0xFF456c7d),
Color(0xFF113746),
], begin: Alignment.topCenter, end: Alignment.bottomCenter),
),
child: Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Opacity(
opacity: 0.1,
child: Container(
width: sizeScreen.width,
height: sizeScreen.height,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://javareshkian.ir/wp-content/uploads/2020/04/icon-background.png'),
repeat: ImageRepeat.repeat,
),
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 70),
child: Image(
width: 100,
height: 100,
image: NetworkImage(
'https://javareshkian.ir/wp-content/uploads/2020/03/javareshkian4.png'),
),
),
form.FormContainer(
formKey: formKey,
emailOnSaved: (String value) {
_emailValue = value;
//print(_emailValue);
},
passwordOnSaved: (String value) {
_passwordValue = value;
},
),
FlatButton(
onPressed: null,
child: Text(
'حساب کاربری ندارید ؟! ثبت نام',
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.w300,
letterSpacing: 1.5),
),
)
],
),
GestureDetector(
onTap: () async {
if (formKey.currentState.validate()) {
formKey.currentState.save();
await checkUserForServer();
}
},
child: SingInAnimation(
controller: _loginButtonController.view,
sizeWidthScreen: sizeScreen.width,
))
],
),
),
);
}
checkUserForServer() async {
await _loginButtonController.animateTo(0.350);
var response = await (new AuthService())
.checkLoginUser({'email': _emailValue, 'password': _passwordValue});
if (response['status'] == 'success') {
// ذخیره اطلاعات در شیردرفرنسز
await storeUserData(response['data']);
await _loginButtonController.forward();
Navigator.pushReplacementNamed(context, '/');
} else {
await _loginButtonController.reverse();
scaffoldKey.currentState.showSnackBar(new SnackBar(
content: Text(
response['data'],
style: TextStyle(fontFamily: 'Vazir'),
)));
}
}
// تابع ذخیره اطلاعات در شیردرفرنسز
storeUserData(Map userData) async {
SharedPreferences sharedUserData = await SharedPreferences.getInstance();
sharedUserData.setString('user.api_token', userData['api_token']);
sharedUserData.setInt('user.user_id', userData['user_id']);
}
}
کدهای مربوط به فایل FormContainer.dart :
import 'package:flutter/material.dart';
import 'package:whatsapp_roocket/components/InputFieldArea.dart';
import 'package:validators/validators.dart' as validDart;
class FormContainer extends StatelessWidget {
final formKey;
final emailOnSaved;
final passwordOnSaved;
FormContainer(
{@required this.formKey,
@required this.emailOnSaved,
@required this.passwordOnSaved,
});
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 50),
child: Form(
key: formKey,
child: Column(
children: <Widget>[
new InputFieldArea(
obscureText: false,
hintText: 'ایمیل نام کاربری خود را وارد نمایید',
hintFontSize: 15,
hintColorText: Colors.grey[500],
textColor: Colors.white,
textFontSize: 15,
iconInput: Icons.person_outline,
iconColor: Colors.white,
textValidator: null,
// ignore: missing_return
validate: (String value) {
print('value : $value');
print('contains : ${value.contains('@') && value.contains('.')}');
if (value.contains('@') && value.contains('.')) {
}else
return 'نام کاربری نامعتبر است !';
},
onSaved: emailOnSaved,
),
new InputFieldArea(
obscureText: true,
hintText: 'رمز ورود خود را وارد نمایید',
hintFontSize: 15,
hintColorText: Colors.grey[500],
textColor: Colors.white,
textFontSize: 15,
iconInput: Icons.lock_outline,
iconColor: Colors.white,
textValidator: null,
// ignore: missing_return
validate: (String value) {
if (value.length < 6) {
return 'طول کلمه عبور باید حداقل ۶ کاراکتر باشد .';
}
},
onSaved: passwordOnSaved,
),
],
),
),
);
}
}
کدهای مربوط به فایل InputFieldArea.dart :
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class InputFieldArea extends StatelessWidget {
final bool obscureText;
final String hintText;
final double hintFontSize;
final Color hintColorText;
final Color textColor;
final double textFontSize;
final IconData iconInput;
final Color iconColor;
final textValidator;
final validate;
final onSaved;
InputFieldArea(
{@required this.obscureText,
@required this.hintText,
@required this.hintFontSize,
@required this.hintColorText,
@required this.textColor,
@required this.textFontSize,
@required this.iconInput,
@required this.iconColor,
@required this.textValidator,
@required this.validate,
@required this.onSaved,
});
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(bottom: 10),
child: TextFormField(
// ignore: missing_return
validator: validate,
onSaved: onSaved,
obscureText: obscureText,
textAlign: TextAlign.center,
style: TextStyle(color: textColor, fontSize: textFontSize,),
decoration: InputDecoration(
icon: Icon(
iconInput,
color: iconColor,
),
hintText: hintText,
hintStyle:
TextStyle(color: hintColorText, fontSize: hintFontSize),
contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 5),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white30),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
errorBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.yellow),
),
focusedErrorBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.yellow),
),
errorStyle: TextStyle(color: Colors.yellow, fontSize: 12)
),
));
}
}
class MyText extends StatelessWidget {
final onSaveValue;
MyText({this.onSaveValue});
@override
Widget build(BuildContext context) {
return TextFormField(
onSaved: onSaveValue,
);
}
}
کدهای مربوط به فایل SingIn_animation.dart :
import 'package:flutter/material.dart';
class SingInAnimation extends StatelessWidget {
final Animation<double> controller;
final Animation<double> buttonSizeReduction; // انیمیشن کاهش سایز دکمه
final Animation<double> buttonFullScreen; // انیمیشن تمام صفحه شدن دکمه
final double sizeWidthScreen;
SingInAnimation({this.controller, this.sizeWidthScreen})
: buttonSizeReduction =
Tween(begin: (sizeWidthScreen * 60) / 100, end: 60.0).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.0, 0.350, curve: Curves.bounceOut))),
buttonFullScreen = Tween(begin: 70.0, end: 1000.0).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.700, 0.950, curve: Curves.easeOutSine)));
Widget _animationBuilder(BuildContext context, Widget child) {
return buttonFullScreen.value <= 300
? Container(
margin: buttonFullScreen.value == 70
? EdgeInsets.only(bottom: 30)
: buttonFullScreen.value <= 100
? EdgeInsets.only(bottom: 20)
: buttonFullScreen.value <= 200
? EdgeInsets.only(bottom: 10)
: EdgeInsets.only(bottom: 0),
width: buttonFullScreen.value == 70.0
? buttonSizeReduction.value
: buttonFullScreen.value,
height:
buttonFullScreen.value == 70.0 ? 60.0 : buttonFullScreen.value,
alignment: Alignment.center,
child: buttonSizeReduction.value >= 120
? Text(
'ورود',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w300,
),
)
: buttonFullScreen.value <= 120
? CircularProgressIndicator(
backgroundColor: Colors.white,
)
: null,
decoration: BoxDecoration(
color: Color(0xff2258a6),
// borderRadius: BorderRadius.circular(30),
borderRadius: buttonFullScreen.value <= 200
? BorderRadius.circular(30)
: null,
),
)
: Container(
width: buttonFullScreen.value,
height: buttonFullScreen.value,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Color(0xff2258a6),
),
);
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: controller,
builder: _animationBuilder,
);
}
}
کدهای مربوط به فایل Auth_Service.dart :
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';
class AuthService {
// تابع بررسی اطلاعات کاربری با سرور
Future<Map> checkLoginUser(Map bodyValue) async {
http.Response response = await http.post(
'http://roocket.org/api/login',
//headers: {"Content-Type": "application/json"},
encoding: Encoding.getByName('utf-8'),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded'
},
body: bodyValue,
);
var userValue = json.decode(utf8.decode(response.bodyBytes));
return userValue;
}
static Future<bool> checkApiToken(String userToken) async{
http.Response response = await http.get('http://roocket.org/api/user?api_token=$userToken', headers: {'Accept' : 'aplication/json'});
print((response.statusCode));
return response.statusCode == 200;
}
}
خروجی کدهای فوق به شکل زیر است :
امیدوارم این مطلب برای شما مفید باشد .
4+
