Finish login page

merge-requests/11/merge
Elham Rababah 6 years ago
parent 3aec62dceb
commit 8a8dd6457d

@ -5,10 +5,10 @@ import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'config/size_config.dart'; import 'config/size_config.dart';
import 'core/service/authentication_service.dart';
import 'core/viewModels/project_view_model.dart'; import 'core/viewModels/project_view_model.dart';
import 'locator.dart'; import 'locator.dart';
import 'pages/landing/landing_page.dart';
void main() { void main() {
setupLocator(); setupLocator();
@ -56,6 +56,9 @@ class MyApp extends StatelessWidget {
scaffoldBackgroundColor:Color.fromRGBO(239, 245, 245, 1) , scaffoldBackgroundColor:Color.fromRGBO(239, 245, 245, 1) ,
hintColor: Colors.grey[400], hintColor: Colors.grey[400],
disabledColor: Colors.grey[300], disabledColor: Colors.grey[300],
bottomSheetTheme: BottomSheetThemeData(
backgroundColor: Color.fromRGBO(239, 245, 245, 1)
),
errorColor: Color.fromRGBO(235, 80, 60, 1.0), errorColor: Color.fromRGBO(235, 80, 60, 1.0),
textSelectionColor: Color.fromRGBO(80, 100, 253, 0.5), textSelectionColor: Color.fromRGBO(80, 100, 253, 0.5),
textSelectionHandleColor: Color.fromRGBO(80, 100, 253, 1.0), textSelectionHandleColor: Color.fromRGBO(80, 100, 253, 1.0),
@ -63,9 +66,10 @@ class MyApp extends StatelessWidget {
backgroundColor: Color.fromRGBO(255, 255, 255, 1), backgroundColor: Color.fromRGBO(255, 255, 255, 1),
highlightColor: Colors.grey[100].withOpacity(0.4), highlightColor: Colors.grey[100].withOpacity(0.4),
splashColor: Colors.transparent, splashColor: Colors.transparent,
primaryColor: Colors.grey, primaryColor: Color.fromRGBO(69, 183, 174, 1.0),
cursorColor: Color.fromRGBO(78, 62, 253, 1.0), cursorColor: Color.fromRGBO(78, 62, 253, 1.0),
iconTheme: IconThemeData(), iconTheme: IconThemeData(),
dividerColor: Color.fromRGBO(112, 112, 112, 1.0),
appBarTheme: AppBarTheme( appBarTheme: AppBarTheme(
color: Colors.grey, color: Colors.grey,
brightness: Brightness.light, brightness: Brightness.light,

@ -2,9 +2,11 @@ import 'package:driverapp/app-icons/driver_app_icons.dart';
import 'package:driverapp/core/viewModels/authentication_view_model.dart'; import 'package:driverapp/core/viewModels/authentication_view_model.dart';
import 'package:driverapp/pages/base/base_view.dart'; import 'package:driverapp/pages/base/base_view.dart';
import 'package:driverapp/widgets/buttons/secondary_button.dart'; import 'package:driverapp/widgets/buttons/secondary_button.dart';
import 'package:driverapp/widgets/others/app_scaffold_widget.dart'; import 'package:driverapp/widgets/input/text_field.dart';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:hexcolor/hexcolor.dart';
class LoginPage extends StatelessWidget { class LoginPage extends StatelessWidget {
@override @override
@ -12,74 +14,192 @@ class LoginPage extends StatelessWidget {
return AnimatedSwitcher( return AnimatedSwitcher(
duration: Duration(microseconds: 350), duration: Duration(microseconds: 350),
child: BaseView<AuthenticationViewModel>( child: BaseView<AuthenticationViewModel>(
builder: (_, model, widget) => AppScaffold( builder: (_, model, widget) => Scaffold(
baseViewModel: model, //baseViewModel: model,
body: Center( body: Center(
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[ children: <Widget>[
FractionallySizedBox( FractionallySizedBox(
widthFactor: 0.9, widthFactor: 0.80,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[ children: <Widget>[
Row( SizedBox(
mainAxisAlignment: MainAxisAlignment.center, height: 40,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[ children: <Widget>[
Icon(DriverApp.logo, Container(
size: 60, child: Icon(
color: Colors.red,), DriverApp.logo,
size: 70,
color: Theme.of(context).primaryColor,
),
margin: EdgeInsets.only(
right:
MediaQuery.of(context).size.width * 0.15),
),
], ],
), ),
Column(), SizedBox(
new Container( height: 20,
height: 22.28, ),
width: 139.13, Column(
decoration: BoxDecoration( children: <Widget>[
color: Color(0xffffffff), Text(
border: Border.all( "Driver",
width: 1.00, style: TextStyle(
color: Color(0xff707070), fontSize: 50, fontWeight: FontWeight.bold),
),
Text(
"Delivery",
style: TextStyle(fontSize: 36, letterSpacing: 1),
),
Text(
"APP",
style: TextStyle(
fontSize: 33,
letterSpacing: 33,
fontWeight: FontWeight.w400),
), ),
borderRadius: BorderRadius.circular(6.00), ],
), ),
SizedBox(
height: 30,
), ),
Container( Row(
height: 22.28, mainAxisAlignment: MainAxisAlignment.center,
width: 139.13, children: <Widget>[
decoration: BoxDecoration( CircleContainer(
color: Color(0xffffffff), child: Text(
border: Border.all( "English",
width: 1.00, style: TextStyle(
color: Color(0xff707070), fontSize: 12, color: Colors.white),
),
color: Theme.of(context).primaryColor, borderWidth: 0,borderColor: Colors.transparent,),
SizedBox(
width: 20,
), ),
borderRadius: BorderRadius.circular(6.00), CircleContainer(
), child: Text(
"Arabic",
style: TextStyle(
fontSize: 12, color: Colors.black),
),
color: Colors.transparent, borderColor: Theme.of(context).primaryColor,borderWidth: 3,),
],
),
SizedBox(
height: 10,
), ),
new Container( Column(
height: 22.28, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
width: 139.13, children: <Widget>[
decoration: BoxDecoration( Padding(
color: Color(0xffffffff), padding: const EdgeInsets.symmetric(horizontal: 20),
border: Border.all( child: Row(
width: 1.00, mainAxisAlignment: MainAxisAlignment.end,
color: Color(0xff707070), children: <Widget>[
Text(
"Please insert username and password to login",
style: TextStyle(
fontSize: 13, color: Colors.grey),
),
SizedBox(
height: 10,
)
],
),
),
SizedBox(
height: 10,
), ),
borderRadius: BorderRadius.circular(6.00), Container(
), child: TextFields(
) onChanged: (value) => {},
hintText: "User Name",
),
),
SizedBox(
height: 20,
),
Container(
child: TextFields(
borderRadiusValue: 6,
onChanged: (value) => {},
hintText: "Password",
),
),
SizedBox(
height: 25,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
"Forgot Password?",
style: TextStyle(
fontSize: 14,
color: Theme.of(context).primaryColor),
),
],
),
],
),
], ],
), ),
), ),
FractionallySizedBox( SizedBox(
widthFactor: 0.90, height: 20,
child: SecondaryButton(label: "DFDf"), ),
SizedBox(
height: 10,
) )
], ],
), ),
), ),
bottomSheet: Container(
margin: EdgeInsets.all(10),
height: MediaQuery.of(context).size.height * 0.12,
child: Column(
children: <Widget>[
SecondaryButton(label: "Login"),
SizedBox(
height: 30,
)
],
)),
), ),
), ),
); );
} }
} }
class CircleContainer extends StatelessWidget {
const CircleContainer(
{this.child,
this.color = Colors.white,
this.borderColor,
this.borderWidth = 2.0});
final Widget child;
final Color color;
final Color borderColor;
final double borderWidth;
@override
Widget build(BuildContext context) {
return Container(
child: Center(child: child),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: color,
border: Border.all(
color: borderColor ?? Hexcolor("#707070"),
width: borderWidth)),
height: 60,
width: 60,
);
}
}

@ -39,38 +39,44 @@ class NumberTextInputFormatter extends TextInputFormatter {
final _mobileFormatter = NumberTextInputFormatter(); final _mobileFormatter = NumberTextInputFormatter();
class TextFields extends StatefulWidget { class TextFields extends StatefulWidget {
TextFields( TextFields({Key key,
{Key key, this.type,
this.type, this.hintText,
this.hintText, this.suffixIcon,
this.suffixIcon, this.autoFocus,
this.autoFocus, this.onChanged,
this.onChanged, this.initialValue,
this.initialValue, this.minLines,
this.minLines, this.maxLines,
this.maxLines, this.inputFormatters,
this.inputFormatters, this.padding,
this.padding, this.focus = false,
this.focus = false, this.maxLengthEnforced = true,
this.maxLengthEnforced = true, this.suffixIconColor,
this.suffixIconColor, this.inputAction,
this.inputAction, this.onSubmit,
this.onSubmit, this.keepPadding = true,
this.keepPadding = true, this.textCapitalization = TextCapitalization.none,
this.textCapitalization = TextCapitalization.none, this.onTap,
this.controller, this.controller,
this.keyboardType, this.keyboardType,
this.validator, this.validator,
this.borderOnlyError = false, this.borderOnlyError = false,
this.onSaved, this.onSaved,
this.onSuffixTap, this.onSuffixTap,
this.readOnly: false, this.readOnly: false,
this.maxLength, this.maxLength,
this.prefixIcon, this.prefixIcon,
this.bare = false, this.bare = false,
this.fontSize = 16.0, this.fontSize = 14.0,
this.fontWeight = FontWeight.w700, this.color = Colors.black,
this.autoValidate = false}) this.fontWeight = FontWeight.w600,
this.autoValidate = false,
this.borderRadiusValue = 8.0,
this.borderWidth = 1.5,
this.fieldTextColor,
this.textAlign = TextAlign.start,
this.borderRadius})
: super(key: key); : super(key: key);
final String hintText; final String hintText;
@ -80,6 +86,7 @@ class TextFields extends StatefulWidget {
final IconData suffixIcon; final IconData suffixIcon;
final Color suffixIconColor; final Color suffixIconColor;
final IconData prefixIcon; final IconData prefixIcon;
final VoidCallback onTap;
final TextEditingController controller; final TextEditingController controller;
final TextInputType keyboardType; final TextInputType keyboardType;
final FormFieldValidator validator; final FormFieldValidator validator;
@ -96,6 +103,7 @@ class TextFields extends StatefulWidget {
final TextInputAction inputAction; final TextInputAction inputAction;
final double fontSize; final double fontSize;
final FontWeight fontWeight; final FontWeight fontWeight;
final Color color;
final bool keepPadding; final bool keepPadding;
final TextCapitalization textCapitalization; final TextCapitalization textCapitalization;
final List<TextInputFormatter> inputFormatters; final List<TextInputFormatter> inputFormatters;
@ -103,6 +111,11 @@ class TextFields extends StatefulWidget {
final EdgeInsets padding; final EdgeInsets padding;
final bool focus; final bool focus;
final bool borderOnlyError; final bool borderOnlyError;
final double borderRadiusValue;
final BorderRadius borderRadius;
final double borderWidth;
final Color fieldTextColor;
final TextAlign textAlign;
@override @override
_TextFieldsState createState() => _TextFieldsState(); _TextFieldsState createState() => _TextFieldsState();
@ -138,43 +151,46 @@ class _TextFieldsState extends State<TextFields> {
Widget _buildSuffixIcon() { Widget _buildSuffixIcon() {
switch (widget.type) { switch (widget.type) {
case "password": case "password":
return Padding( {
padding: const EdgeInsets.only(right: 8.0), return Padding(
child: view padding: const EdgeInsets.only(right: 8.0),
? InkWell( child: view
? InkWell(
onTap: () { onTap: () {
this.setState( this.setState(() {
() { view = false;
view = false; });
},
);
}, },
child: Icon( child: Icon(EvaIcons.eye,
EvaIcons.eye, size: 24.0, color: Theme
size: 24.0, .of(context)
color: Color.fromRGBO(78, 62, 253, 1.0), .primaryColor))
), : InkWell(
)
: InkWell(
onTap: () { onTap: () {
this.setState(() { this.setState(() {
view = true; view = true;
}); });
}, },
child: Icon(EvaIcons.eyeOff, child: Icon(EvaIcons.eyeOff,
size: 24.0, color: Colors.grey[500]), size: 24.0, color: Colors.grey[500])));
), }
); case "hourly":
return Align(
alignment: Alignment.centerRight,
child: Text(
'/ hr ',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w700),
));
break;
default: default:
if (widget.suffixIcon != null) if (widget.suffixIcon != null)
return InkWell( return InkWell(
onTap: widget.onSuffixTap, onTap: widget.onSuffixTap,
child: Icon(widget.suffixIcon, child: Icon(widget.suffixIcon,
size: 22.0, size: 22.0,
color: widget.suffixIconColor != null color: widget.suffixIconColor != null
? widget.suffixIconColor ? widget.suffixIconColor
: Colors.grey[500]), : Colors.grey[500]));
);
else else
return null; return null;
} }
@ -196,22 +212,26 @@ class _TextFieldsState extends State<TextFields> {
decoration: widget.bare decoration: widget.bare
? null ? null
: BoxDecoration(boxShadow: [ : BoxDecoration(boxShadow: [
BoxShadow( BoxShadow(
color: Color.fromRGBO(110, 68, 80, focus ? 0.20 : 0), color: Color.fromRGBO(70, 68, 167, focus ? 0.20 : 0),
offset: Offset(0.0, 13.0), offset: Offset(0.0, 13.0),
blurRadius: focus ? 34.0 : 12.0) blurRadius: focus ? 34.0 : 12.0)
]), ]),
child: TextFormField( child: TextFormField(
keyboardAppearance: Theme.of(context).brightness, keyboardAppearance: Theme
.of(context)
.brightness,
scrollPhysics: BouncingScrollPhysics(), scrollPhysics: BouncingScrollPhysics(),
autovalidate: widget.autoValidate, autovalidate: widget.autoValidate,
onTap: widget.onTap,
textAlign: widget.textAlign,
textCapitalization: widget.textCapitalization, textCapitalization: widget.textCapitalization,
onFieldSubmitted: widget.inputAction == TextInputAction.next onFieldSubmitted: widget.inputAction == TextInputAction.next
? (widget.onSubmit != null ? (widget.onSubmit != null
? widget.onSubmit ? widget.onSubmit
: (val) { : (val) {
_focusNode.nextFocus(); _focusNode.nextFocus();
}) })
: widget.onSubmit, : widget.onSubmit,
textInputAction: widget.inputAction, textInputAction: widget.inputAction,
minLines: widget.minLines ?? 1, minLines: widget.minLines ?? 1,
@ -228,87 +248,118 @@ class _TextFieldsState extends State<TextFields> {
autofocus: widget.autoFocus ?? false, autofocus: widget.autoFocus ?? false,
validator: widget.validator, validator: widget.validator,
onSaved: widget.onSaved, onSaved: widget.onSaved,
style: Theme.of(context) style: Theme
.of(context)
.textTheme .textTheme
.body2 .body2
.copyWith(fontSize: widget.fontSize, fontWeight: widget.fontWeight), .copyWith(
fontSize: widget.fontSize,
fontWeight: widget.fontWeight,
color: widget.color),
inputFormatters: widget.keyboardType == TextInputType.phone inputFormatters: widget.keyboardType == TextInputType.phone
? <TextInputFormatter>[ ? <TextInputFormatter>[
WhitelistingTextInputFormatter.digitsOnly, WhitelistingTextInputFormatter.digitsOnly,
_mobileFormatter, _mobileFormatter,
] ]
: widget.inputFormatters, : widget.inputFormatters,
decoration: InputDecoration( decoration: InputDecoration(
counterText: "", counterText: "",
hintText: widget.hintText, hintText: widget.hintText,
hintStyle: TextStyle( hintStyle: TextStyle(
fontSize: widget.fontSize, fontSize: widget.fontSize,
fontWeight: widget.fontWeight, fontWeight: widget.fontWeight,
color: Theme.of(context).hintColor), color: Theme
contentPadding: widget.padding != null .of(context)
? widget.padding .hintColor),
: EdgeInsets.symmetric( contentPadding: widget.padding != null
vertical: (widget.bare && !widget.keepPadding) ? 0.0 : 10.0, ? widget.padding
horizontal: 16.0), : EdgeInsets.symmetric(
filled: true, vertical: (widget.bare && !widget.keepPadding) ? 0.0 : 10.0,
fillColor: widget.bare horizontal: 16.0),
? Colors.transparent filled: true,
: Theme.of(context).backgroundColor, fillColor: widget.bare
suffixIcon: _buildSuffixIcon(), ? Colors.transparent
prefixIcon: widget.type != "search" : widget.fieldTextColor != null
? widget.prefixIcon != null ? widget.fieldTextColor
? Padding( : Theme
padding: EdgeInsets.only( .of(context)
left: 28.0, top: 14.0, bottom: 14.0, right: 0), .backgroundColor,
child: Text( suffixIcon: _buildSuffixIcon(),
"\$", prefixIcon: widget.type != "search"
style: TextStyle( ? widget.prefixIcon != null
fontSize: 14, fontWeight: FontWeight.w800), ? Padding(
), padding: EdgeInsets.only(
) left: 28.0, top: 14.0, bottom: 14.0, right: 0),
: null child: Text(
: Icon(EvaIcons.search, size: 20.0, color: Colors.grey[500]), "\$",
errorStyle: TextStyle( style: TextStyle(
fontSize: 14.0, fontSize: 14, fontWeight: FontWeight.w800),
fontWeight: widget.fontWeight, ),
height: widget.borderOnlyError ? 0.0 : null), )
errorBorder: OutlineInputBorder( : null
borderSide: BorderSide( : Icon(EvaIcons.search, size: 20.0, color: Colors.grey[500]),
color: Theme.of(context) errorStyle: TextStyle(
.errorColor fontSize: 14.0,
.withOpacity(widget.bare ? 0.0 : 0.5), fontWeight: widget.fontWeight,
width: 2.0), height: widget.borderOnlyError ? 0.0 : null),
borderRadius: BorderRadius.circular(widget.bare ? 0.0 : 8.0)), errorBorder: OutlineInputBorder(
focusedErrorBorder: OutlineInputBorder( borderSide: BorderSide(
borderSide: BorderSide( color: Theme
color: Theme.of(context) .of(context)
.errorColor .errorColor
.withOpacity(widget.bare ? 0.0 : 0.5), .withOpacity(widget.bare ? 0.0 : 0.5),
width: 2.0), width: widget.borderWidth),
borderRadius: BorderRadius.circular(widget.bare ? 0.0 : 8.0)), borderRadius: widget.bare
focusedBorder: OutlineInputBorder( ? BorderRadius.circular(0.0)
borderSide: BorderSide( : widget.borderRadius != null
color: Theme.of(context) ? widget.borderRadius
.dividerColor : BorderRadius.circular(widget.borderRadiusValue)),
.withOpacity(widget.bare ? 0.0 : 1.0), focusedErrorBorder: OutlineInputBorder(
width: 2.0), borderSide: BorderSide(
borderRadius: BorderRadius.circular(widget.bare ? 0.0 : 8.0)), color: Theme
disabledBorder: OutlineInputBorder( .of(context)
.errorColor
.withOpacity(widget.bare ? 0.0 : 0.5),
width: widget.borderWidth),
borderRadius: widget.bare
? BorderRadius.circular(0.0)
: widget.borderRadius != null
? widget.borderRadius
: BorderRadius.circular(widget.borderRadiusValue)),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme
.of(context)
.dividerColor
.withOpacity(widget.bare ? 0.0 : 1.0),
width: widget.borderWidth),
borderRadius: widget.bare
? BorderRadius.circular(0.0)
: widget.borderRadius != null
? widget.borderRadius
: BorderRadius.circular(widget.borderRadiusValue)),
disabledBorder:
OutlineInputBorder(borderSide: BorderSide(color: Theme
.of(context)
.dividerColor
.withOpacity(widget.bare ? 0.0 : 1.0),
width: widget.borderWidth),
borderRadius: widget.bare ? BorderRadius.circular(0.0) : widget
.borderRadius != null ? widget.borderRadius : BorderRadius
.circular(widget.borderRadiusValue)),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide( borderSide: BorderSide(
color: Theme.of(context) color: Theme
.of(context)
.dividerColor .dividerColor
.withOpacity(widget.bare ? 0.0 : 1.0), .withOpacity(widget.bare ? 0.0 : 1.0),
width: 2.0), width: widget.borderWidth),
borderRadius: BorderRadius.circular(widget.bare ? 0.0 : 8.0)), borderRadius: widget.bare
enabledBorder: OutlineInputBorder( ? BorderRadius.circular(0.0)
borderSide: BorderSide( : widget.borderRadius != null
color: Theme.of(context) ? widget.borderRadius
.dividerColor : BorderRadius.circular(widget.borderRadiusValue),
.withOpacity(widget.bare ? 0.0 : 1.0), )),
width: 2.0),
borderRadius: BorderRadius.circular(widget.bare ? 0.0 : 8.0),
),
),
), ),
)); ));
} }

Loading…
Cancel
Save