diff --git a/lib/screens/auth/login_screen.dart b/lib/screens/auth/login_screen.dart index 34c2935a..62aae00b 100644 --- a/lib/screens/auth/login_screen.dart +++ b/lib/screens/auth/login_screen.dart @@ -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: [ - 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: [ - 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: [ - 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: [ - 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(), + ])), ), ); } } + diff --git a/lib/widgets/auth/auth_header.dart b/lib/widgets/auth/auth_header.dart new file mode 100644 index 00000000..1fa7cc40 --- /dev/null +++ b/lib/widgets/auth/auth_header.dart @@ -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: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + 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: [ + 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), + ) + ], + ) + ], + ), + ); + } +} + diff --git a/lib/widgets/auth/login_form.dart b/lib/widgets/auth/login_form.dart new file mode 100644 index 00000000..e21f0ace --- /dev/null +++ b/lib/widgets/auth/login_form.dart @@ -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: [ + 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: [ + 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: [ + const Text('LOG IN', style: TextStyle(fontSize: 20)), + Image.asset('assets/images/login_btn_arrow_icon.png') + ], + ), + ), + ) + ], + ), + ], + ), + ); + } +} diff --git a/pubspec.yaml b/pubspec.yaml index a6a6a5f8..164abeeb 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -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