design updates

design_update
hussam al-habibeh 5 years ago
parent a6f86572e6
commit 3fc3a0fe4b

@ -28,9 +28,8 @@ 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) => builder: (_, model, widget) => AppScaffold(
AppScaffold( isShowAppBar: false,
isShowAppBar: false,
body: SingleChildScrollView( body: SingleChildScrollView(
child: Center( child: Center(
child: Column( child: Column(
@ -55,10 +54,12 @@ class LoginPage extends StatelessWidget {
margin: EdgeInsets.only( margin: EdgeInsets.only(
right: projectViewModel.isArabic right: projectViewModel.isArabic
? 0 ? 0
: MediaQuery.of(context).size.width * 0.15, : MediaQuery.of(context).size.width *
0.15,
left: !projectViewModel.isArabic left: !projectViewModel.isArabic
? 0 ? 0
: MediaQuery.of(context).size.width * 0.15), : MediaQuery.of(context).size.width *
0.15),
), ),
], ],
), ),
@ -88,50 +89,52 @@ class LoginPage extends StatelessWidget {
SizedBox( SizedBox(
height: 30, height: 30,
), ),
Row(
mainAxisAlignment: MainAxisAlignment.center, // Row(
children: <Widget>[ // mainAxisAlignment: MainAxisAlignment.center,
CircleContainer( // children: <Widget>[
onTap: () => projectViewModel.changeLanguage('en'), // CircleContainer(
child: Text( // onTap: () =>
TranslationBase.of(context).lanEnglish, // projectViewModel.changeLanguage('en'),
style: TextStyle( // child: Text(
fontSize: 12, // TranslationBase.of(context).lanEnglish,
color: projectViewModel.isArabic // style: TextStyle(
? Colors.black // fontSize: 12,
: Colors.white), // color: projectViewModel.isArabic
), // ? Colors.black
color: projectViewModel.isArabic // : Colors.white),
? Colors.transparent // ),
: Theme.of(context).primaryColor, // color: projectViewModel.isArabic
borderWidth: projectViewModel.isArabic ? 3 : 0, // ? Colors.transparent
borderColor: projectViewModel.isArabic // : Theme.of(context).primaryColor,
? Theme.of(context).primaryColor // borderWidth: projectViewModel.isArabic ? 3 : 0,
: Colors.transparent, // borderColor: projectViewModel.isArabic
), // ? Theme.of(context).primaryColor
SizedBox( // : Colors.transparent,
width: 20, // ),
), // SizedBox(
CircleContainer( // width: 20,
onTap: () => // ),
projectViewModel.changeLanguage('ar'), // CircleContainer(
child: Text( // onTap: () =>
TranslationBase.of(context).lanArabic, // projectViewModel.changeLanguage('ar'),
style: TextStyle( // child: Text(
fontSize: 12, // TranslationBase.of(context).lanArabic,
color: !projectViewModel.isArabic // style: TextStyle(
? Colors.black // fontSize: 12,
: Colors.white), // color: !projectViewModel.isArabic
), // ? Colors.black
color: !projectViewModel.isArabic // : Colors.white),
? Colors.transparent // ),
: Theme.of(context).primaryColor, // color: !projectViewModel.isArabic
borderWidth: !projectViewModel.isArabic ? 3 : 0, // ? Colors.transparent
borderColor: !projectViewModel.isArabic // : Theme.of(context).primaryColor,
? Theme.of(context).primaryColor // borderWidth: !projectViewModel.isArabic ? 3 : 0,
: Colors.transparent), // borderColor: !projectViewModel.isArabic
], // ? Theme.of(context).primaryColor
), // : Colors.transparent),
// ],
// ),
SizedBox( SizedBox(
height: 10, height: 10,
), ),
@ -148,7 +151,8 @@ class LoginPage extends StatelessWidget {
children: <Widget>[ children: <Widget>[
Expanded( Expanded(
child: Text( child: Text(
TranslationBase.of(context).enterCredentialsMsg, TranslationBase.of(context)
.enterCredentialsMsg,
style: TextStyle( style: TextStyle(
fontSize: 13, color: Colors.grey), fontSize: 13, color: Colors.grey),
), ),
@ -173,7 +177,8 @@ class LoginPage extends StatelessWidget {
return null; return null;
}, },
onSaved: (value) { onSaved: (value) {
loginRequest.userID = int.parse(value.trim()); loginRequest.userID =
int.parse(value.trim());
}, },
), ),
), ),
@ -195,6 +200,7 @@ class LoginPage extends StatelessWidget {
onSaved: (value) { onSaved: (value) {
loginRequest.password = value; loginRequest.password = value;
}, },
type: 'password',
), ),
), ),
SizedBox( SizedBox(
@ -222,7 +228,8 @@ class LoginPage extends StatelessWidget {
), ),
SizedBox( SizedBox(
height: 10, height: 10,
),Container( ),
Container(
margin: EdgeInsets.all(10), margin: EdgeInsets.all(10),
height: MediaQuery.of(context).size.height * 0.22, height: MediaQuery.of(context).size.height * 0.22,
child: Column( child: Column(
@ -244,7 +251,6 @@ class LoginPage extends StatelessWidget {
), ),
), ),
), ),
), ),
), ),
); );
@ -257,10 +263,9 @@ class LoginPage extends StatelessWidget {
if (model.state == ViewState.ErrorLocal) { if (model.state == ViewState.ErrorLocal) {
Utils.showErrorToast(model.error); Utils.showErrorToast(model.error);
} else { } else {
Navigator.push( Navigator.push(context,
context, MaterialPageRoute(builder: (context) => DashboardScreen())); MaterialPageRoute(builder: (context) => DashboardScreen()));
} }
} }
} }
} }

@ -475,7 +475,7 @@ class _DashboardScreenState extends State<DashboardScreen> {
raduis: 25.0, raduis: 25.0,
height: MediaQuery.of(context).orientation == height: MediaQuery.of(context).orientation ==
Orientation.portrait Orientation.portrait
? MediaQuery.of(context).size.height * 0.109 ? MediaQuery.of(context).size.height * 0.120
: MediaQuery.of(context).size.height * 0.209, : MediaQuery.of(context).size.height * 0.209,
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
@ -543,12 +543,23 @@ class _DashboardScreenState extends State<DashboardScreen> {
fontSize: 15.0, fontSize: 15.0,
), ),
), ),
Expanded(
child: Text(
model.orders[index].orderID
.toString(),
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w400,
letterSpacing: 8.0),
),
),
], ],
), ),
), ),
Padding( Padding(
padding: EdgeInsets.all(8.0), padding: EdgeInsets.all(8.0),
child: CircleContainer( child: CircleContainer(
borderWidth: 0.9,
child: Text( child: Text(
model.orders[index].distanceInKilometers model.orders[index].distanceInKilometers
.toString() + .toString() +

@ -38,7 +38,7 @@ class _OrdersListScreenState extends State<OrdersListScreen> {
raduis: 25.0, raduis: 25.0,
height: MediaQuery.of(context).orientation == height: MediaQuery.of(context).orientation ==
Orientation.portrait Orientation.portrait
? MediaQuery.of(context).size.height * 0.109 ? MediaQuery.of(context).size.height * 0.120
: MediaQuery.of(context).size.height * 0.209, : MediaQuery.of(context).size.height * 0.209,
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
@ -96,12 +96,22 @@ class _OrdersListScreenState extends State<OrdersListScreen> {
fontSize: 15.0, fontSize: 15.0,
), ),
), ),
Expanded(
child: Text(
model.orders[index].orderID.toString(),
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w400,
letterSpacing: 8.0),
),
),
], ],
), ),
), ),
Padding( Padding(
padding: EdgeInsets.all(8.0), padding: EdgeInsets.all(8.0),
child: CircleContainer( child: CircleContainer(
borderWidth: 0.8,
child: Text( child: Text(
model.orders[index].distanceInKilometers model.orders[index].distanceInKilometers
.toString() + .toString() +

@ -14,7 +14,7 @@ class RootPage extends StatelessWidget {
Widget buildRoot(APP_STATUS status) { Widget buildRoot(APP_STATUS status) {
switch (status) { switch (status) {
case APP_STATUS.UNAUTHENTICATED: case APP_STATUS.UNAUTHENTICATED:
return LoginPage (); return LoginPage();
break; break;
case APP_STATUS.AUTHENTICATED: case APP_STATUS.AUTHENTICATED:
return DashboardScreen(); return DashboardScreen();

@ -39,7 +39,8 @@ class NumberTextInputFormatter extends TextInputFormatter {
final _mobileFormatter = NumberTextInputFormatter(); final _mobileFormatter = NumberTextInputFormatter();
class TextFields extends StatefulWidget { class TextFields extends StatefulWidget {
TextFields({Key key, TextFields({
Key key,
this.type, this.type,
this.hintText, this.hintText,
this.suffixIcon, this.suffixIcon,
@ -76,8 +77,9 @@ class TextFields extends StatefulWidget {
this.borderWidth = 1.5, this.borderWidth = 1.5,
this.fieldTextColor, this.fieldTextColor,
this.textAlign = TextAlign.start, this.textAlign = TextAlign.start,
this.borderRadius}) this.borderRadius,
: super(key: key); this.obscureText,
}) : super(key: key);
final String hintText; final String hintText;
final String initialValue; final String initialValue;
@ -116,6 +118,7 @@ class TextFields extends StatefulWidget {
final double borderWidth; final double borderWidth;
final Color fieldTextColor; final Color fieldTextColor;
final TextAlign textAlign; final TextAlign textAlign;
final bool obscureText;
@override @override
_TextFieldsState createState() => _TextFieldsState(); _TextFieldsState createState() => _TextFieldsState();
@ -156,23 +159,21 @@ class _TextFieldsState extends State<TextFields> {
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, child: Icon(EvaIcons.eye,
size: 24.0, color: Theme size: 24.0, color: Theme.of(context).primaryColor))
.of(context)
.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": case "hourly":
return Align( return Align(
@ -212,15 +213,13 @@ class _TextFieldsState extends State<TextFields> {
decoration: widget.bare decoration: widget.bare
? null ? null
: BoxDecoration(boxShadow: [ : BoxDecoration(boxShadow: [
BoxShadow( BoxShadow(
color: Color.fromRGBO(70, 68, 167, 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 keyboardAppearance: Theme.of(context).brightness,
.of(context)
.brightness,
scrollPhysics: BouncingScrollPhysics(), scrollPhysics: BouncingScrollPhysics(),
autovalidate: widget.autoValidate, autovalidate: widget.autoValidate,
onTap: widget.onTap, onTap: widget.onTap,
@ -228,10 +227,10 @@ class _TextFieldsState extends State<TextFields> {
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,
@ -248,19 +247,15 @@ 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 style: Theme.of(context).textTheme.body2.copyWith(
.of(context)
.textTheme
.body2
.copyWith(
fontSize: widget.fontSize, fontSize: widget.fontSize,
fontWeight: widget.fontWeight, fontWeight: widget.fontWeight,
color: widget.color), 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: "",
@ -268,35 +263,31 @@ class _TextFieldsState extends State<TextFields> {
hintStyle: TextStyle( hintStyle: TextStyle(
fontSize: widget.fontSize, fontSize: widget.fontSize,
fontWeight: widget.fontWeight, fontWeight: widget.fontWeight,
color: Theme color: Theme.of(context).hintColor),
.of(context)
.hintColor),
contentPadding: widget.padding != null contentPadding: widget.padding != null
? widget.padding ? widget.padding
: EdgeInsets.symmetric( : EdgeInsets.symmetric(
vertical: (widget.bare && !widget.keepPadding) ? 0.0 : 10.0, vertical: (widget.bare && !widget.keepPadding) ? 0.0 : 10.0,
horizontal: 16.0), horizontal: 16.0),
filled: true, filled: true,
fillColor: widget.bare fillColor: widget.bare
? Colors.transparent ? Colors.transparent
: widget.fieldTextColor != null : widget.fieldTextColor != null
? widget.fieldTextColor ? widget.fieldTextColor
: Theme : Theme.of(context).backgroundColor,
.of(context)
.backgroundColor,
suffixIcon: _buildSuffixIcon(), suffixIcon: _buildSuffixIcon(),
prefixIcon: widget.type != "search" prefixIcon: widget.type != "search"
? widget.prefixIcon != null ? widget.prefixIcon != null
? Padding( ? Padding(
padding: EdgeInsets.only( padding: EdgeInsets.only(
left: 28.0, top: 14.0, bottom: 14.0, right: 0), left: 28.0, top: 14.0, bottom: 14.0, right: 0),
child: Text( child: Text(
"\$", "\$",
style: TextStyle( style: TextStyle(
fontSize: 14, fontWeight: FontWeight.w800), fontSize: 14, fontWeight: FontWeight.w800),
), ),
) )
: null : null
: Icon(EvaIcons.search, size: 20.0, color: Colors.grey[500]), : Icon(EvaIcons.search, size: 20.0, color: Colors.grey[500]),
errorStyle: TextStyle( errorStyle: TextStyle(
fontSize: 14.0, fontSize: 14.0,
@ -304,61 +295,50 @@ 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 color: Theme.of(context)
.of(context)
.errorColor .errorColor
.withOpacity(widget.bare ? 0.0 : 0.5), .withOpacity(widget.bare ? 0.0 : 0.5),
width: widget.borderWidth), width: widget.borderWidth),
borderRadius: widget.bare borderRadius: widget.bare
? BorderRadius.circular(0.0) ? BorderRadius.circular(0.0)
: widget.borderRadius != null : widget.borderRadius != null
? widget.borderRadius ? widget.borderRadius
: BorderRadius.circular(widget.borderRadiusValue)), : BorderRadius.circular(widget.borderRadiusValue)),
focusedErrorBorder: 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: widget.borderWidth), width: widget.borderWidth),
borderRadius: widget.bare borderRadius: widget.bare
? BorderRadius.circular(0.0) ? BorderRadius.circular(0.0)
: widget.borderRadius != null : widget.borderRadius != null
? widget.borderRadius ? widget.borderRadius
: BorderRadius.circular(widget.borderRadiusValue)), : BorderRadius.circular(widget.borderRadiusValue)),
focusedBorder: OutlineInputBorder( focusedBorder: OutlineInputBorder(
borderSide: BorderSide( borderSide: BorderSide(
color: Theme color: Theme.of(context)
.of(context)
.dividerColor .dividerColor
.withOpacity(widget.bare ? 0.0 : 1.0), .withOpacity(widget.bare ? 0.0 : 1.0),
width: widget.borderWidth), width: widget.borderWidth),
borderRadius: widget.bare borderRadius: widget.bare
? BorderRadius.circular(0.0) ? BorderRadius.circular(0.0)
: widget.borderRadius != null : widget.borderRadius != null
? widget.borderRadius ? widget.borderRadius
: BorderRadius.circular(widget.borderRadiusValue)), : BorderRadius.circular(widget.borderRadiusValue)),
disabledBorder: disabledBorder:
OutlineInputBorder(borderSide: BorderSide(color: Theme 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)),
.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( enabledBorder: OutlineInputBorder(
borderSide: BorderSide( borderSide: BorderSide(
color: Theme color: Theme.of(context)
.of(context)
.dividerColor .dividerColor
.withOpacity(widget.bare ? 0.0 : 1.0), .withOpacity(widget.bare ? 0.0 : 1.0),
width: widget.borderWidth), width: widget.borderWidth),
borderRadius: widget.bare borderRadius: widget.bare
? BorderRadius.circular(0.0) ? BorderRadius.circular(0.0)
: widget.borderRadius != null : widget.borderRadius != null
? widget.borderRadius ? widget.borderRadius
: BorderRadius.circular(widget.borderRadiusValue), : BorderRadius.circular(widget.borderRadiusValue),
)), )),
), ),
)); ));

Loading…
Cancel
Save