diff --git a/lib/widgets/auth/auth_header.dart b/lib/widgets/auth/auth_header.dart index 4054dbb1..65bebb66 100644 --- a/lib/widgets/auth/auth_header.dart +++ b/lib/widgets/auth/auth_header.dart @@ -1,4 +1,7 @@ import 'package:flutter/material.dart'; +import 'package:flutter/rendering.dart'; +import 'package:flutter_device_type/flutter_device_type.dart'; + class AuthHeader extends StatelessWidget { const AuthHeader({ Key key, @@ -6,59 +9,92 @@ class AuthHeader extends StatelessWidget { @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, + print(Device.get().isPhone); + print(Device.get().isAndroid); + print(Device.get().isIos); + + + + var smallScreenSize = 660; + return LayoutBuilder(builder: (ctx, constraints) { + + bool isSmallScreen = constraints.maxWidth<=smallScreenSize; + var screen = Container( + margin: isSmallScreen?null:EdgeInsetsDirectional.fromSTEB(constraints.maxWidth*0.30, constraints.maxWidth*0.1, 0, 0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + margin: isSmallScreen?EdgeInsetsDirectional.fromSTEB(0, 50, 0, 0):EdgeInsetsDirectional.fromSTEB(constraints.maxWidth*0.13, 0, 0, 0), + child: Image.asset( + 'assets/images/login_icon.png', + fit: BoxFit.cover, + height: isSmallScreen?null: constraints.maxWidth*0.09, ), - Text( + ), + SizedBox( + height: 10, + ), + Container( + margin: isSmallScreen?null:EdgeInsetsDirectional.fromSTEB(constraints.maxWidth*0.13, 0, 0, 0), + child: Text( "LOGIN", - style: TextStyle( - fontSize: 30, fontWeight: FontWeight.w800), - ) - ], - ), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SizedBox( - height: 10, + style: TextStyle(fontSize: isSmallScreen?30:constraints.maxWidth*0.035, fontWeight: FontWeight.w800), ), - Text( - "Welcome to", - style: TextStyle(fontSize: 24), + ) + ], + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + + children: isSmallScreen?[ + SizedBox( + height: 10, + ), + Text( + "Welcome to", + style: TextStyle(fontSize: isSmallScreen?24:constraints.maxWidth*0.029), + ), + Text( + 'Dr Sulaiman Al Habib', + style: TextStyle( + fontSize: isSmallScreen?24:constraints.maxWidth*0.029, + color: Theme.of(context).primaryColor, ), - Text( - 'Dr Sulaiman Al Habib', - style: TextStyle( - fontSize: 24, - color: Theme.of(context).primaryColor, - ), + ), + + ]:[SizedBox( + height: 10, + ),Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Text( + "Welcome to ", + style: TextStyle(fontSize: isSmallScreen?24:constraints.maxWidth*0.029), + ), + Text( + 'Dr Sulaiman Al Habib', + style: TextStyle( + fontSize: isSmallScreen?24:constraints.maxWidth*0.029, + color: Theme.of(context).primaryColor, ), - Text( + ), + ], + ),Container( + margin: isSmallScreen?null:EdgeInsetsDirectional.fromSTEB(constraints.maxWidth*0.13, 0, 0, 0), + child: Text( "Doctor App", style: TextStyle( - fontSize: 26, - color: Theme.of(context).primaryColor), - ) - ], - ) - ], - ), - ); + fontSize: isSmallScreen?26:constraints.maxWidth*0.030, color: Theme.of(context).primaryColor), + ), + )], + ) + ], + )); + return screen; + }); } } - diff --git a/lib/widgets/auth/login_form.dart b/lib/widgets/auth/login_form.dart index 739d8155..6e5c0f99 100644 --- a/lib/widgets/auth/login_form.dart +++ b/lib/widgets/auth/login_form.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:flutter/rendering.dart'; import 'package:hexcolor/hexcolor.dart'; class LoginForm extends StatelessWidget { @@ -8,126 +9,138 @@ class LoginForm extends StatelessWidget { @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: [ - Container( - child: Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Checkbox( - value: true, - activeColor: Theme.of(context).primaryColor, - onChanged: (bool newValue) {}), - Text("Remember me", style: TextStyle(fontSize: 16)), - ], - ), - ), - RaisedButton( - onPressed: () {}, - textColor: Colors.white, - elevation: 0.0, - padding: const EdgeInsets.all(0.0), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(10), - side: BorderSide(width:0.5,color: Hexcolor('#CCCCCC'))), - child: Container( - padding: const EdgeInsets.all(10.0), - height: 50, - width: 140, + + + return LayoutBuilder(builder: (ctx, constraints) { + var smallScreenSize = 660; + bool isSmallScreen = constraints.maxWidth<=smallScreenSize; + return Container( + width: constraints.maxWidth * 0.9, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox( + height: 20, + ), + TextFormField( + decoration: InputDecoration( + prefixIcon: Image.asset('assets/images/user_id_icon.png'), + hintText: 'Enter ID', + hintStyle: TextStyle(fontSize:isSmallScreen?24:constraints.maxWidth*0.024) , + 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', + hintStyle: TextStyle(fontSize:isSmallScreen?24:constraints.maxWidth*0.024) , + 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', + hintStyle: TextStyle(fontSize:isSmallScreen?24:constraints.maxWidth*0.024) , + 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: [ + Container( child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + mainAxisAlignment: MainAxisAlignment.start, children: [ - const Text('LOG IN', style: TextStyle(fontSize: 20)), - Image.asset('assets/images/login_btn_arrow_icon.png') + Checkbox( + value: true, + activeColor: Theme.of(context).primaryColor, + onChanged: (bool newValue) {}), + Text("Remember me", style: TextStyle(fontSize:isSmallScreen?18:constraints.maxWidth*0.018)), ], ), ), - ) - ], - ), - ], - ), - ); + RaisedButton( + onPressed: () {}, + textColor: Colors.white, + elevation: 0.0, + padding: const EdgeInsets.all(0.0), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(10), + side: BorderSide(width: 0.5, color: Hexcolor('#CCCCCC'))), + child: Container( + padding: const EdgeInsets.all(10.0), + height: 50, + width: 140, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text('LOG IN', style: TextStyle(fontSize:isSmallScreen?20:constraints.maxWidth*0.020)), + Image.asset('assets/images/login_btn_arrow_icon.png') + ], + ), + ), + ) + ], + ), + ], + ), + ); + }); } } diff --git a/pubspec.lock b/pubspec.lock index 947e42fa..9ada890a 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -69,6 +69,13 @@ packages: description: flutter source: sdk version: "0.0.0" + flutter_device_type: + dependency: "direct main" + description: + name: flutter_device_type + url: "https://pub.dartlang.org" + source: hosted + version: "0.2.0" flutter_test: dependency: "direct dev" description: flutter diff --git a/pubspec.yaml b/pubspec.yaml index 64a4d7f0..9d2cc48b 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -20,7 +20,7 @@ dependencies: flutter: sdk: flutter hexcolor: ^1.0.1 - + flutter_device_type: ^0.2.0 # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.2