- Это главный экран, и на нем у меня есть виджет AuthCard, который я использую для переключения между входом в систему и регистрацией.
import 'package:Zabatnee/common_app/provider/auth_provider.dart';
import 'package:Zabatnee/common_app/widgets/auth_card.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class SignupScreen extends StatefulWidget {
static const routeName = '/signUpScreen';
@override
_SignupScreenState createState() => _SignupScreenState();
}
class _SignupScreenState extends State<SignupScreen> {
var isVerified = true;
var isInit = true;
var _isLogin = true;
@override
void didChangeDependencies() {
if(isInit){
isVerified = Provider.of<AuthProvider>(context, listen: false).isVerified;
}
isInit = false;
super.didChangeDependencies();
}
@override
Widget build(BuildContext context) {
final deviceSize = MediaQuery.of(context).size;
return Stack(
children: <Widget>[
Container(
height: deviceSize.height,
width: deviceSize.width,
child: Image.asset(
'assets/Images/Login-bg.png',
fit: BoxFit.cover,
),
),
Container(
color: Color.fromRGBO(224, 254, 240, 1).withOpacity(.5),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
child: Container(
margin: EdgeInsets.all(35),
padding:
EdgeInsets.symmetric(vertical: 8, horizontal: 70),
// transform: Matrix4.rotationZ(-8 * pi / 180)
// ..translate(-10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Theme.of(context).accentColor,
boxShadow: [
BoxShadow(blurRadius: 8, offset: Offset(0, 2))
]),
child: Image.asset(
'assets/Images/zabatnee_logo.png',
fit: BoxFit.cover,
),
),
),
Container(
height: _isLogin ? deviceSize.height*.35 :deviceSize.height*.6,
child: AuthCard(isVerified),)
],
),
],
);
}
}
- и под виджетом, который содержит логическое значение (_isLogin), мне нужно, когда я выбираю для входа высоту карты, равную deviceSize.height * .35, и когда я использую регистрацию, чтобы быть deviceSize.
@override
Widget build(BuildContext context) {
final deviceSize = MediaQuery.of(context).size;
return Container(
width: deviceSize.width * .85,
child: Column(
children: <Widget>[
Expanded(
child: Card(
color: Colors.black54,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
elevation: 8,
child: Container(
padding: EdgeInsets.all(16),
child: Form(
key: _formKey,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
if (!_isLogin)
TextFormField(
key: ValueKey('first name'),
style: TextStyle(color: Colors.white),
textInputAction: TextInputAction.next,
onFieldSubmitted: (_) {
FocusScope.of(context)
.requestFocus(_lastNameFocusNode);
},
autofocus: false,
validator: (value) {
if (value.isEmpty) {
return 'please enter your first name';
}
return null;
},
onSaved: (value) {
_signupModel.firstName = value;
},
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
border: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
focusColor: Theme.of(context).primaryColor,
hintText: 'Please enter your First Name ...',
hintStyle: TextStyle(color: Colors.white24),
labelText: 'First Name',
labelStyle: TextStyle(color: Colors.white),
),
keyboardType: TextInputType.text,
),
if (!_isLogin)
TextFormField(
key: ValueKey('Last Name'),
style: TextStyle(color: Colors.white),
textInputAction: TextInputAction.next,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
border: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
focusColor: Theme.of(context).primaryColor,
hintText: 'Please enter your Last Name ...',
hintStyle: TextStyle(color: Colors.white24),
labelText: 'Last Name',
labelStyle: TextStyle(color: Colors.white),
),
keyboardType: TextInputType.text,
focusNode: _lastNameFocusNode,
validator: (value) {
if (value.isEmpty) {
return 'please enter your last name';
}
return null;
},
onFieldSubmitted: (_) {
FocusScope.of(context)
.requestFocus(_emailFocusNode);
},
onSaved: (value) {
//_signupModel = SignUpModel(firstName: _signupModel.firstName, lastName: value,email: _signupModel.email, mobile: _signupModel.mobile, password: _signupModel.password, countryCode: _signupModel.countryCode, gender: _signupModel.gender,sms: _signupModel.sms);
_signupModel.lastName = value;
},
),
TextFormField(
key: ValueKey('email'),
autofocus: false,
style: TextStyle(color: Colors.white),
textInputAction: TextInputAction.next,
focusNode: _emailFocusNode,
onFieldSubmitted: (_) {
FocusScope.of(context)
.requestFocus(_phoneFocusScope);
},
onSaved: (value) {
_signupModel.email = value;
},
decoration: _isLogin
? InputDecoration(
prefixIcon: Icon(
Icons.person,
color: Colors.white,
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
border: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
focusColor: Theme.of(context).primaryColor,
hintText: 'Please enter your email...',
hintStyle: TextStyle(color: Colors.white24),
labelText: 'Email',
labelStyle: TextStyle(color: Colors.white),
)
: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
border: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
focusColor: Theme.of(context).primaryColor,
hintText: 'Please enter your email...',
hintStyle: TextStyle(color: Colors.white24),
labelText: 'Email',
labelStyle: TextStyle(color: Colors.white),
),
validator: (value) {
if (!validator.isEmail(value)) {
return 'please enter a valid email';
}
return null;
},
keyboardType: TextInputType.emailAddress,
),
if (!_isLogin)
Row(
children: <Widget>[
Container(
child: CountryCodePicker(
onInit: (code) {
_signupModel.countryCode = '+20';
},
onChanged: (code) {
_signupModel.countryCode = code.toString();
},
initialSelection: 'EG',
textStyle: TextStyle(color: Colors.white),
padding: EdgeInsets.only(right: 8, left: 8),
),
),
Expanded(
child: TextFormField(
key: ValueKey('phone number'),
autofocus: false,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.white),
),
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.white),
),
border: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.white),
),
hintText:
'Please enter your Phone Number...',
hintStyle: TextStyle(color: Colors.white24),
labelText: 'Phone Number',
labelStyle: TextStyle(color: Colors.white),
),
keyboardType: TextInputType.phone,
style: TextStyle(color: Colors.white),
textInputAction: TextInputAction.next,
focusNode: _phoneFocusScope,
onFieldSubmitted: (_) {
FocusScope.of(context)
.requestFocus(_passwordFocusNode);
},
maxLength: 10,
validator: (value) {
if (value.length != 10) {
return 'please enter a valid phone number';
}
return null;
},
onSaved: (value) {
_signupModel.mobile = value;
},
),
),
],
),
TextFormField(
key: ValueKey('password'),
style: TextStyle(color: Colors.white),
textInputAction: TextInputAction.done,
onFieldSubmitted: (_) {},
onSaved: (value) {
_signupModel.password = value;
},
focusNode: _passwordFocusNode,
obscureText: _showPassword ? false : true,
decoration: _isLogin
? InputDecoration(
suffixIcon: GestureDetector(
onTap: () {
_togglevisibility();
},
child: Icon(_showPassword
? Icons.visibility
: Icons.visibility_off),
),
prefixIcon: Icon(
Icons.lock,
color: Colors.white,
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
border: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
hintText: 'Please enter your password...',
hintStyle: TextStyle(color: Colors.white24),
labelText: 'Password',
labelStyle: TextStyle(color: Colors.white),
)
: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
border: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
hintText: 'Please enter your password...',
hintStyle: TextStyle(color: Colors.white24),
labelText: 'Password',
labelStyle: TextStyle(color: Colors.white),
),
validator: (value) {
if (value.length < 6) {
return 'please enter password lager that 6 character';
}
return null;
},
keyboardType: TextInputType.visiblePassword,
),
SizedBox(
height: 20,
),
if (!_isLogin)
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Date Of Birth',
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
Row(
children: <Widget>[
IconButton(
icon: Icon(
Icons.date_range,
color: Colors.white,
),
onPressed: () {
_selectDateOfBirth(context);
_removeFocus();
}),
FlatButton(
onPressed: () {
_selectDateOfBirth(context);
_removeFocus();
},
child: Text(
formatted == null
? 'No Date Choosen!'
: formatted,
style: TextStyle(
color: Colors.white, fontSize: 16),
),
)
],
)
],
),
),
SizedBox(
height: 20,
),
if (!_isLogin)
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'Gender',
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
RadioListTile(
value: 'Male',
activeColor: Theme.of(context).primaryColor,
groupValue: selectedRadioTile,
onChanged: (val) {
setSelectedRadioTile(val);
print(val);
},
title: Text(
'Male',
style: TextStyle(color: Colors.white),
),
),
RadioListTile(
value: 'Female',
activeColor: Theme.of(context).primaryColor,
groupValue: selectedRadioTile,
onChanged: (val) {
setSelectedRadioTile(val);
print(val);
},
title: Text(
'Female',
style: TextStyle(color: Colors.white),
),
),
]),
),
SizedBox(
height: 12,
),
],
),
),
),
),
),
),
if (_isLoading)
CircularProgressIndicator(
backgroundColor: Theme.of(context).primaryColor,
),
if (!_isLoading)
RaisedButton(
child: Text(
_isLogin ? 'LOGIN' : 'SIGN UP',
style: TextStyle(fontSize: 16),
),
onPressed: saveForm,
),
FlatButton(
child: Text(
'${_isLogin ? 'SIGN UP' : 'LOGIN'} INSTEAD',
style: TextStyle(color: Colors.white, fontSize: 16),
),
onPressed: () {
_switchAuthMode();
},
),
],
),
);
}
}
и это метод, который я использую для переключения между входом в систему и регистрацией:
void _switchAuthMode() {
if (_isLogin) {
setState(() {
_isLogin = false;
});
} else {
setState(() {
_isLogin = true;
});
}
}
