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,7 +9,18 @@ class AuthHeader extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( 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( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[ children: <Widget>[
@ -14,51 +28,73 @@ class AuthHeader extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[ children: <Widget>[
Container( Container(
margin: margin: isSmallScreen?EdgeInsetsDirectional.fromSTEB(0, 50, 0, 0):EdgeInsetsDirectional.fromSTEB(constraints.maxWidth*0.13, 0, 0, 0),
EdgeInsetsDirectional.fromSTEB(0, 50, 0, 0),
child: Image.asset( child: Image.asset(
'assets/images/login_icon.png', 'assets/images/login_icon.png',
fit: BoxFit.cover, fit: BoxFit.cover,
height: isSmallScreen?null: constraints.maxWidth*0.09,
), ),
), ),
SizedBox( SizedBox(
height: 10, height: 10,
), ),
Text( 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( Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
children: isSmallScreen?<Widget>[
SizedBox( SizedBox(
height: 10, height: 10,
), ),
Text( Text(
"Welcome to", "Welcome to",
style: TextStyle(fontSize: 24), style: TextStyle(fontSize: isSmallScreen?24:constraints.maxWidth*0.029),
), ),
Text( Text(
'Dr Sulaiman Al Habib', 'Dr Sulaiman Al Habib',
style: TextStyle( style: TextStyle(
fontSize: 24, fontSize: isSmallScreen?24:constraints.maxWidth*0.029,
color: Theme.of(context).primaryColor, color: Theme.of(context).primaryColor,
), ),
), ),
]:<Widget>[SizedBox(
height: 10,
),Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text( Text(
"Doctor App", "Welcome to ",
style: TextStyle(fontSize: isSmallScreen?24:constraints.maxWidth*0.029),
),
Text(
'Dr Sulaiman Al Habib',
style: TextStyle( style: TextStyle(
fontSize: 26, fontSize: isSmallScreen?24:constraints.maxWidth*0.029,
color: Theme.of(context).primaryColor), color: Theme.of(context).primaryColor,
) ),
),
], ],
),Container(
margin: isSmallScreen?null:EdgeInsetsDirectional.fromSTEB(constraints.maxWidth*0.13, 0, 0, 0),
child: Text(
"Doctor App",
style: TextStyle(
fontSize: isSmallScreen?26:constraints.maxWidth*0.030, 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,8 +9,13 @@ class LoginForm extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return LayoutBuilder(builder: (ctx, constraints) {
var smallScreenSize = 660;
bool isSmallScreen = constraints.maxWidth<=smallScreenSize;
return Container( return Container(
width: 320, width: constraints.maxWidth * 0.9,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[ children: <Widget>[
@ -20,13 +26,15 @@ class LoginForm extends StatelessWidget {
decoration: InputDecoration( decoration: InputDecoration(
prefixIcon: Image.asset('assets/images/user_id_icon.png'), prefixIcon: Image.asset('assets/images/user_id_icon.png'),
hintText: 'Enter ID', hintText: 'Enter ID',
hintStyle: TextStyle(fontSize:isSmallScreen?24:constraints.maxWidth*0.024) ,
enabledBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20)), borderRadius: BorderRadius.all(Radius.circular(20)),
borderSide: BorderSide(color: Hexcolor('#CCCCCC')), borderSide: BorderSide(color: Hexcolor('#CCCCCC')),
), ),
focusedBorder: OutlineInputBorder( focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)), borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Theme.of(context).primaryColor), borderSide:
BorderSide(color: Theme.of(context).primaryColor),
) )
//BorderRadius.all(Radius.circular(20)); //BorderRadius.all(Radius.circular(20));
), ),
@ -44,13 +52,15 @@ class LoginForm extends StatelessWidget {
decoration: InputDecoration( decoration: InputDecoration(
prefixIcon: Image.asset('assets/images/password_icon.png'), prefixIcon: Image.asset('assets/images/password_icon.png'),
hintText: 'Enter Password', hintText: 'Enter Password',
hintStyle: TextStyle(fontSize:isSmallScreen?24:constraints.maxWidth*0.024) ,
enabledBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20)), borderRadius: BorderRadius.all(Radius.circular(20)),
borderSide: BorderSide(color: Hexcolor('#CCCCCC')), borderSide: BorderSide(color: Hexcolor('#CCCCCC')),
), ),
focusedBorder: OutlineInputBorder( focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)), borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Theme.of(context).primaryColor), borderSide:
BorderSide(color: Theme.of(context).primaryColor),
) )
//BorderRadius.all(Radius.circular(20)); //BorderRadius.all(Radius.circular(20));
), ),
@ -68,13 +78,15 @@ class LoginForm extends StatelessWidget {
decoration: InputDecoration( decoration: InputDecoration(
prefixIcon: Image.asset('assets/images/hospital_icon.png'), prefixIcon: Image.asset('assets/images/hospital_icon.png'),
hintText: 'Select Project', hintText: 'Select Project',
hintStyle: TextStyle(fontSize:isSmallScreen?24:constraints.maxWidth*0.024) ,
enabledBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20)), borderRadius: BorderRadius.all(Radius.circular(20)),
borderSide: BorderSide(color: Hexcolor('#CCCCCC')), borderSide: BorderSide(color: Hexcolor('#CCCCCC')),
), ),
focusedBorder: OutlineInputBorder( focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)), borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Theme.of(context).primaryColor), borderSide:
BorderSide(color: Theme.of(context).primaryColor),
) )
//BorderRadius.all(Radius.circular(20)); //BorderRadius.all(Radius.circular(20));
), ),
@ -99,7 +111,7 @@ class LoginForm extends StatelessWidget {
value: true, value: true,
activeColor: Theme.of(context).primaryColor, activeColor: Theme.of(context).primaryColor,
onChanged: (bool newValue) {}), onChanged: (bool newValue) {}),
Text("Remember me", style: TextStyle(fontSize: 16)), Text("Remember me", style: TextStyle(fontSize:isSmallScreen?18:constraints.maxWidth*0.018)),
], ],
), ),
), ),
@ -110,7 +122,7 @@ class LoginForm extends StatelessWidget {
padding: const EdgeInsets.all(0.0), padding: const EdgeInsets.all(0.0),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
side: BorderSide(width:0.5,color: Hexcolor('#CCCCCC'))), side: BorderSide(width: 0.5, color: Hexcolor('#CCCCCC'))),
child: Container( child: Container(
padding: const EdgeInsets.all(10.0), padding: const EdgeInsets.all(10.0),
height: 50, height: 50,
@ -118,7 +130,7 @@ class LoginForm extends StatelessWidget {
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[ children: <Widget>[
const Text('LOG IN', style: TextStyle(fontSize: 20)), Text('LOG IN', style: TextStyle(fontSize:isSmallScreen?20:constraints.maxWidth*0.020)),
Image.asset('assets/images/login_btn_arrow_icon.png') Image.asset('assets/images/login_btn_arrow_icon.png')
], ],
), ),
@ -129,5 +141,6 @@ class LoginForm extends StatelessWidget {
], ],
), ),
); );
});
} }
} }

@ -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