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>[
SizedBox(
height: 40,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Icon(
DriverApp.logo,
size: 70,
color: Theme.of(context).primaryColor,
),
margin: EdgeInsets.only(
right:
MediaQuery.of(context).size.width * 0.15),
),
],
),
SizedBox(
height: 20,
),
Column(
children: <Widget>[
Text(
"Driver",
style: TextStyle(
fontSize: 50, fontWeight: FontWeight.bold),
),
Text(
"Delivery",
style: TextStyle(fontSize: 36, letterSpacing: 1),
),
Text(
"APP",
style: TextStyle(
fontSize: 33,
letterSpacing: 33,
fontWeight: FontWeight.w400),
),
],
),
SizedBox(
height: 30,
),
Row( Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[ children: <Widget>[
Icon(DriverApp.logo, CircleContainer(
size: 60, child: Text(
color: Colors.red,), "English",
style: TextStyle(
fontSize: 12, color: Colors.white),
),
color: Theme.of(context).primaryColor, borderWidth: 0,borderColor: Colors.transparent,),
SizedBox(
width: 20,
),
CircleContainer(
child: Text(
"Arabic",
style: TextStyle(
fontSize: 12, color: Colors.black),
),
color: Colors.transparent, borderColor: Theme.of(context).primaryColor,borderWidth: 3,),
], ],
), ),
Column(), SizedBox(
new Container( height: 10,
height: 22.28, ),
width: 139.13, Column(
decoration: BoxDecoration( mainAxisAlignment: MainAxisAlignment.spaceEvenly,
color: Color(0xffffffff), children: <Widget>[
border: Border.all( Padding(
width: 1.00, padding: const EdgeInsets.symmetric(horizontal: 20),
color: Color(0xff707070), child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
"Please insert username and password to login",
style: TextStyle(
fontSize: 13, color: Colors.grey),
), ),
borderRadius: BorderRadius.circular(6.00), SizedBox(
height: 10,
)
],
), ),
), ),
SizedBox(
height: 10,
),
Container( Container(
height: 22.28, child: TextFields(
width: 139.13, onChanged: (value) => {},
decoration: BoxDecoration( hintText: "User Name",
color: Color(0xffffffff),
border: Border.all(
width: 1.00,
color: Color(0xff707070),
), ),
borderRadius: BorderRadius.circular(6.00),
), ),
SizedBox(
height: 20,
), ),
new Container( Container(
height: 22.28, child: TextFields(
width: 139.13, borderRadiusValue: 6,
decoration: BoxDecoration( onChanged: (value) => {},
color: Color(0xffffffff), hintText: "Password",
border: Border.all(
width: 1.00,
color: Color(0xff707070),
), ),
borderRadius: BorderRadius.circular(6.00),
), ),
) SizedBox(
height: 25,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
"Forgot Password?",
style: TextStyle(
fontSize: 14,
color: Theme.of(context).primaryColor),
),
], ],
), ),
],
), ),
FractionallySizedBox( ],
widthFactor: 0.90, ),
child: SecondaryButton(label: "DFDf"), ),
SizedBox(
height: 20,
),
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,8 +39,7 @@ 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,
@ -58,6 +57,7 @@ class TextFields extends StatefulWidget {
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,
@ -68,9 +68,15 @@ class TextFields extends StatefulWidget {
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,23 +151,20 @@ class _TextFieldsState extends State<TextFields> {
Widget _buildSuffixIcon() { Widget _buildSuffixIcon() {
switch (widget.type) { switch (widget.type) {
case "password": case "password":
{
return Padding( return Padding(
padding: const EdgeInsets.only(right: 8.0), padding: const EdgeInsets.only(right: 8.0),
child: view child: view
? InkWell( ? InkWell(
onTap: () { onTap: () {
this.setState( this.setState(() {
() {
view = false; view = false;
});
}, },
); child: Icon(EvaIcons.eye,
}, size: 24.0, color: Theme
child: Icon( .of(context)
EvaIcons.eye, .primaryColor))
size: 24.0,
color: Color.fromRGBO(78, 62, 253, 1.0),
),
)
: InkWell( : InkWell(
onTap: () { onTap: () {
this.setState(() { this.setState(() {
@ -162,9 +172,16 @@ class _TextFieldsState extends State<TextFields> {
}); });
}, },
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(
@ -173,8 +190,7 @@ class _TextFieldsState extends State<TextFields> {
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;
} }
@ -197,14 +213,18 @@ class _TextFieldsState extends State<TextFields> {
? 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
@ -228,10 +248,14 @@ 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,
@ -244,7 +268,9 @@ class _TextFieldsState extends State<TextFields> {
hintStyle: TextStyle( hintStyle: TextStyle(
fontSize: widget.fontSize, fontSize: widget.fontSize,
fontWeight: widget.fontWeight, fontWeight: widget.fontWeight,
color: Theme.of(context).hintColor), color: Theme
.of(context)
.hintColor),
contentPadding: widget.padding != null contentPadding: widget.padding != null
? widget.padding ? widget.padding
: EdgeInsets.symmetric( : EdgeInsets.symmetric(
@ -253,7 +279,11 @@ class _TextFieldsState extends State<TextFields> {
filled: true, filled: true,
fillColor: widget.bare fillColor: widget.bare
? Colors.transparent ? Colors.transparent
: Theme.of(context).backgroundColor, : widget.fieldTextColor != null
? widget.fieldTextColor
: Theme
.of(context)
.backgroundColor,
suffixIcon: _buildSuffixIcon(), suffixIcon: _buildSuffixIcon(),
prefixIcon: widget.type != "search" prefixIcon: widget.type != "search"
? widget.prefixIcon != null ? widget.prefixIcon != null
@ -274,41 +304,62 @@ class _TextFieldsState extends State<TextFields> {
height: widget.borderOnlyError ? 0.0 : null), height: widget.borderOnlyError ? 0.0 : null),
errorBorder: OutlineInputBorder( errorBorder: OutlineInputBorder(
borderSide: BorderSide( borderSide: BorderSide(
color: Theme.of(context) color: Theme
.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
? BorderRadius.circular(0.0)
: widget.borderRadius != null
? widget.borderRadius
: BorderRadius.circular(widget.borderRadiusValue)),
focusedErrorBorder: OutlineInputBorder( focusedErrorBorder: OutlineInputBorder(
borderSide: BorderSide( borderSide: BorderSide(
color: Theme.of(context) color: Theme
.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
? BorderRadius.circular(0.0)
: widget.borderRadius != null
? widget.borderRadius
: BorderRadius.circular(widget.borderRadiusValue)),
focusedBorder: OutlineInputBorder( focusedBorder: 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
disabledBorder: OutlineInputBorder( ? BorderRadius.circular(0.0)
borderSide: BorderSide( : widget.borderRadius != null
color: Theme.of(context) ? widget.borderRadius
: BorderRadius.circular(widget.borderRadiusValue)),
disabledBorder:
OutlineInputBorder(borderSide: BorderSide(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 ? BorderRadius.circular(0.0) : widget
.borderRadius != null ? widget.borderRadius : BorderRadius
.circular(widget.borderRadiusValue)),
enabledBorder: OutlineInputBorder( 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
), ? BorderRadius.circular(0.0)
), : widget.borderRadius != null
? widget.borderRadius
: BorderRadius.circular(widget.borderRadiusValue),
)),
), ),
)); ));
} }

Loading…
Cancel
Save