fix tablet and font size

merge-requests/1/merge
Elham Rababah 6 years ago
parent 23b8c93201
commit 76c83b86fa

@ -1,4 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_device_type/flutter_device_type.dart';
class AuthHeader extends StatelessWidget { class AuthHeader extends StatelessWidget {
const AuthHeader({ const AuthHeader({
Key key, Key key,
@ -6,59 +9,92 @@ class AuthHeader extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( print(Device.get().isPhone);
child: Column( print(Device.get().isAndroid);
crossAxisAlignment: CrossAxisAlignment.start, print(Device.get().isIos);
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[ var smallScreenSize = 660;
Container( return LayoutBuilder(builder: (ctx, constraints) {
margin:
EdgeInsetsDirectional.fromSTEB(0, 50, 0, 0), bool isSmallScreen = constraints.maxWidth<=smallScreenSize;
child: Image.asset( var screen = Container(
'assets/images/login_icon.png', margin: isSmallScreen?null:EdgeInsetsDirectional.fromSTEB(constraints.maxWidth*0.30, constraints.maxWidth*0.1, 0, 0),
fit: BoxFit.cover, child: Column(
), crossAxisAlignment: CrossAxisAlignment.start,
), children: <Widget>[
SizedBox( Column(
height: 10, crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
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", "LOGIN",
style: TextStyle( style: TextStyle(fontSize: isSmallScreen?30:constraints.maxWidth*0.035, fontWeight: FontWeight.w800),
fontSize: 30, fontWeight: FontWeight.w800),
)
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 10,
), ),
Text( )
"Welcome to", ],
style: TextStyle(fontSize: 24), ),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: isSmallScreen?<Widget>[
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( ]:<Widget>[SizedBox(
fontSize: 24, height: 10,
color: Theme.of(context).primaryColor, ),Row(
), mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
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", "Doctor App",
style: TextStyle( style: TextStyle(
fontSize: 26, fontSize: isSmallScreen?26:constraints.maxWidth*0.030, color: Theme.of(context).primaryColor),
color: Theme.of(context).primaryColor), ),
) )],
], )
) ],
], ));
), return screen;
); });
} }
} }

@ -1,4 +1,5 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:hexcolor/hexcolor.dart'; import 'package:hexcolor/hexcolor.dart';
class LoginForm extends StatelessWidget { class LoginForm extends StatelessWidget {
@ -8,126 +9,138 @@ class LoginForm extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container(
width: 320,
child: Column( return LayoutBuilder(builder: (ctx, constraints) {
crossAxisAlignment: CrossAxisAlignment.start, var smallScreenSize = 660;
children: <Widget>[ bool isSmallScreen = constraints.maxWidth<=smallScreenSize;
SizedBox( return Container(
height: 20, width: constraints.maxWidth * 0.9,
), child: Column(
TextFormField( crossAxisAlignment: CrossAxisAlignment.start,
decoration: InputDecoration( children: <Widget>[
prefixIcon: Image.asset('assets/images/user_id_icon.png'), SizedBox(
hintText: 'Enter ID', height: 20,
enabledBorder: OutlineInputBorder( ),
borderRadius: BorderRadius.all(Radius.circular(20)), TextFormField(
borderSide: BorderSide(color: Hexcolor('#CCCCCC')), decoration: InputDecoration(
), prefixIcon: Image.asset('assets/images/user_id_icon.png'),
focusedBorder: OutlineInputBorder( hintText: 'Enter ID',
borderRadius: BorderRadius.all(Radius.circular(10.0)), hintStyle: TextStyle(fontSize:isSmallScreen?24:constraints.maxWidth*0.024) ,
borderSide: BorderSide(color: Theme.of(context).primaryColor), enabledBorder: OutlineInputBorder(
) borderRadius: BorderRadius.all(Radius.circular(20)),
//BorderRadius.all(Radius.circular(20)); borderSide: BorderSide(color: Hexcolor('#CCCCCC')),
), ),
validator: (value) { focusedBorder: OutlineInputBorder(
if (value.isEmpty) { borderRadius: BorderRadius.all(Radius.circular(10.0)),
return 'Please enter some text'; borderSide:
} BorderSide(color: Theme.of(context).primaryColor),
return null; )
}, //BorderRadius.all(Radius.circular(20));
), ),
SizedBox( validator: (value) {
height: 20, if (value.isEmpty) {
), return 'Please enter some text';
TextFormField( }
decoration: InputDecoration( return null;
prefixIcon: Image.asset('assets/images/password_icon.png'), },
hintText: 'Enter Password', ),
enabledBorder: OutlineInputBorder( SizedBox(
borderRadius: BorderRadius.all(Radius.circular(20)), height: 20,
borderSide: BorderSide(color: Hexcolor('#CCCCCC')), ),
), TextFormField(
focusedBorder: OutlineInputBorder( decoration: InputDecoration(
borderRadius: BorderRadius.all(Radius.circular(10.0)), prefixIcon: Image.asset('assets/images/password_icon.png'),
borderSide: BorderSide(color: Theme.of(context).primaryColor), hintText: 'Enter Password',
) hintStyle: TextStyle(fontSize:isSmallScreen?24:constraints.maxWidth*0.024) ,
//BorderRadius.all(Radius.circular(20)); enabledBorder: OutlineInputBorder(
), borderRadius: BorderRadius.all(Radius.circular(20)),
validator: (value) { borderSide: BorderSide(color: Hexcolor('#CCCCCC')),
if (value.isEmpty) { ),
return 'Please enter some text'; focusedBorder: OutlineInputBorder(
} borderRadius: BorderRadius.all(Radius.circular(10.0)),
return null; borderSide:
}, BorderSide(color: Theme.of(context).primaryColor),
), )
SizedBox( //BorderRadius.all(Radius.circular(20));
height: 20, ),
), validator: (value) {
TextFormField( if (value.isEmpty) {
decoration: InputDecoration( return 'Please enter some text';
prefixIcon: Image.asset('assets/images/hospital_icon.png'), }
hintText: 'Select Project', return null;
enabledBorder: OutlineInputBorder( },
borderRadius: BorderRadius.all(Radius.circular(20)), ),
borderSide: BorderSide(color: Hexcolor('#CCCCCC')), SizedBox(
), height: 20,
focusedBorder: OutlineInputBorder( ),
borderRadius: BorderRadius.all(Radius.circular(10.0)), TextFormField(
borderSide: BorderSide(color: Theme.of(context).primaryColor), decoration: InputDecoration(
) prefixIcon: Image.asset('assets/images/hospital_icon.png'),
//BorderRadius.all(Radius.circular(20)); hintText: 'Select Project',
), hintStyle: TextStyle(fontSize:isSmallScreen?24:constraints.maxWidth*0.024) ,
validator: (value) { enabledBorder: OutlineInputBorder(
if (value.isEmpty) { borderRadius: BorderRadius.all(Radius.circular(20)),
return 'Please enter some text'; borderSide: BorderSide(color: Hexcolor('#CCCCCC')),
} ),
return null; focusedBorder: OutlineInputBorder(
}, borderRadius: BorderRadius.all(Radius.circular(10.0)),
), borderSide:
SizedBox( BorderSide(color: Theme.of(context).primaryColor),
height: 20, )
), //BorderRadius.all(Radius.circular(20));
Row( ),
mainAxisAlignment: MainAxisAlignment.spaceBetween, validator: (value) {
children: <Widget>[ if (value.isEmpty) {
Container( return 'Please enter some text';
child: Row( }
mainAxisAlignment: MainAxisAlignment.start, return null;
children: <Widget>[ },
Checkbox( ),
value: true, SizedBox(
activeColor: Theme.of(context).primaryColor, height: 20,
onChanged: (bool newValue) {}), ),
Text("Remember me", style: TextStyle(fontSize: 16)), Row(
], mainAxisAlignment: MainAxisAlignment.spaceBetween,
), children: <Widget>[
), Container(
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( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[ children: <Widget>[
const Text('LOG IN', style: TextStyle(fontSize: 20)), Checkbox(
Image.asset('assets/images/login_btn_arrow_icon.png') 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: <Widget>[
Text('LOG IN', style: TextStyle(fontSize:isSmallScreen?20:constraints.maxWidth*0.020)),
Image.asset('assets/images/login_btn_arrow_icon.png')
],
),
),
)
],
),
],
),
);
});
} }
} }

@ -69,6 +69,13 @@ packages:
description: flutter description: flutter
source: sdk source: sdk
version: "0.0.0" 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: flutter_test:
dependency: "direct dev" dependency: "direct dev"
description: flutter description: flutter

@ -20,7 +20,7 @@ dependencies:
flutter: flutter:
sdk: flutter sdk: flutter
hexcolor: ^1.0.1 hexcolor: ^1.0.1
flutter_device_type: ^0.2.0
# The following adds the Cupertino Icons font to your application. # The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons. # Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2 cupertino_icons: ^0.1.2

Loading…
Cancel
Save