Haroon6138
/
doctor_app_flutter
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Improve login page structure

Browse Source
merge-requests/1/merge
Elham Rababah 6 years ago
parent 11cf9fd4b3
commit 47134da6ff
4 changed files with 194 additions and 154 deletions
Show Stats Download Patch File Download Diff File

161
lib/screens/auth/login_screen.dart
Unescape Escape View File

@ -1,5 +1,6 @@
import '../../widgets/auth/auth_header.dart';
import '../../widgets/auth/login_form.dart';
import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';
class Loginsreen extends StatelessWidget {
@override
@ -10,162 +11,14 @@ class Loginsreen extends StatelessWidget {
child: Container(
margin: EdgeInsetsDirectional.fromSTEB(30, 0, 0, 0),
alignment: Alignment.topLeft,
child:
Column(crossAxisAlignment: CrossAxisAlignment.start, children: <
Widget>[
Column(
children: <Widget>[
Container(
margin: EdgeInsetsDirectional.fromSTEB(0, 50, 0, 0),
child: Image.asset(
'assets/images/login_icon.png',
fit: BoxFit.cover,
),
),
SizedBox(
height: 10,
),
Text(
"LOGIN",
style: TextStyle(fontSize: 30, fontWeight: FontWeight.w800),
)
],
),
Column(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 10,
),
Text(
"Welcome to",
style: TextStyle(fontSize: 24),
),
Text(
'Dr Sulaiman Al Habib',
style: TextStyle(
fontSize: 24, color: Theme.of(context).primaryColor),
),
Text(
"Doctor App",
style: TextStyle(
fontSize: 26, color: Theme.of(context).primaryColor),
)
],
),
Container(
width: 320,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 20,
),
TextFormField(
decoration: InputDecoration(
prefixIcon: Image.asset('assets/images/user_id_icon.png'),
hintText: 'Enter ID',
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20)),
borderSide: BorderSide(color: Hexcolor('#CCCCCC')),
),
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color:Theme.of(context).primaryColor),
)
//BorderRadius.all(Radius.circular(20));
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
SizedBox(
height: 20,
),
TextFormField(
decoration: InputDecoration(
prefixIcon: Image.asset('assets/images/password_icon.png'),
hintText: 'Enter Password',
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20)),
borderSide: BorderSide(color: Hexcolor('#CCCCCC')),
),
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color:Theme.of(context).primaryColor),
)
//BorderRadius.all(Radius.circular(20));
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
SizedBox(
height: 20,
),
TextFormField(
decoration: InputDecoration(
prefixIcon: Image.asset('assets/images/hospital_icon.png'),
hintText: 'Select Project',
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20)),
borderSide: BorderSide(color: Hexcolor('#CCCCCC')),
),
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color:Theme.of(context).primaryColor),
)
//BorderRadius.all(Radius.circular(20));
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Remember me", style: TextStyle(fontSize: 16)),
RaisedButton(
onPressed: () {},
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(color: Hexcolor('#CCCCCC'))),
child: Container(
decoration: const BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(10)),
),
padding: const EdgeInsets.all(10.0),
height: 42,
width: 134,
child: const Text('LOG IN',
style: TextStyle(fontSize: 20)),
),
)
],
),
],
),
),
])),
AuthHeader(),
LoginForm(),
])),
),
);
}
}

63
lib/widgets/auth/auth_header.dart
Unescape Escape View File

@ -0,0 +1,63 @@
import 'package:flutter/material.dart';
class AuthHeader extends StatelessWidget {
const AuthHeader({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
margin:
EdgeInsetsDirectional.fromSTEB(0, 50, 0, 0),
child: Image.asset(
'assets/images/login_icon.png',
fit: BoxFit.cover,
),
),
SizedBox(
height: 10,
),
Text(
"LOGIN",
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.w800),
)
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 10,
),
Text(
"Welcome to",
style: TextStyle(fontSize: 24),
),
Text(
'Dr Sulaiman Al Habib',
style: TextStyle(
fontSize: 24,
color: Theme.of(context).primaryColor),
),
Text(
"Doctor App",
style: TextStyle(
fontSize: 26,
color: Theme.of(context).primaryColor),
)
],
)
],
),
);
}
}

123
lib/widgets/auth/login_form.dart
Unescape Escape View File

@ -0,0 +1,123 @@
import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';
class LoginForm extends StatelessWidget {
const LoginForm({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
width: 320,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 20,
),
TextFormField(
decoration: InputDecoration(
prefixIcon: Image.asset('assets/images/user_id_icon.png'),
hintText: 'Enter ID',
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20)),
borderSide: BorderSide(color: Hexcolor('#CCCCCC')),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Theme.of(context).primaryColor),
)
//BorderRadius.all(Radius.circular(20));
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
SizedBox(
height: 20,
),
TextFormField(
decoration: InputDecoration(
prefixIcon: Image.asset('assets/images/password_icon.png'),
hintText: 'Enter Password',
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20)),
borderSide: BorderSide(color: Hexcolor('#CCCCCC')),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Theme.of(context).primaryColor),
)
//BorderRadius.all(Radius.circular(20));
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
SizedBox(
height: 20,
),
TextFormField(
decoration: InputDecoration(
prefixIcon: Image.asset('assets/images/hospital_icon.png'),
hintText: 'Select Project',
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20)),
borderSide: BorderSide(color: Hexcolor('#CCCCCC')),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Theme.of(context).primaryColor),
)
//BorderRadius.all(Radius.circular(20));
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("Remember me", style: TextStyle(fontSize: 16)),
RaisedButton(
onPressed: () {},
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(color: Hexcolor('#CCCCCC'))),
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
),
padding: const EdgeInsets.all(10.0),
height: 50,
width: 140,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
const Text('LOG IN', style: TextStyle(fontSize: 20)),
Image.asset('assets/images/login_btn_arrow_icon.png')
],
),
),
)
],
),
],
),
);
}
}

1
pubspec.yaml
Unescape Escape View File

@ -47,6 +47,7 @@ flutter:
- assets/images/hospital_icon.png
- assets/images/password_icon.png
- assets/images/user_id_icon.png
- assets/images/login_btn_arrow_icon.png
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see

Write Preview
Loading…
Cancel
Save