WEEK 5

import 'package:flutter/material.dart';

void main(){
runApp(MyApp());
}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
title: 'Login Instagram',
home: HomePage(),
);
}
}

class HomePage extends StatefulWidget {

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

String dropdownValue = 'English';

TextEditingController usernameController = TextEditingController();

TextEditingController passwordController = TextEditingController();

int buttonColor = 0xff26A9FF;

bool inputTextNotNull = false;

@override
Widget build(BuildContext context) {

double deviseWidth = MediaQuery.of(context).size.width;

return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: ConstrainedBox(constraints: BoxConstraints(
minHeight: MediaQuery.of(context).size.height - 90,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: MediaQuery.of(context).size.width,
alignment: Alignment.topCenter,
child: DropdownButton<String>(
dropdownColor: Colors.white70,
value: dropdownValue,
icon: Icon(Icons.arrow_drop_down),
iconSize: 24,
elevation: 10,
style: TextStyle(color: Colors.black54),
underline: Container(),
onChanged: (String? newValue) {
 setState(() {
dropdownValue = newValue!;
});
},
items: <String>['English', 'Arabic', 'Italian', 'French']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value, style: TextStyle(fontSize: 16),),
);
}).toList(),
)
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('assets/instagram.png',
height: deviseWidth * .20,
),
SizedBox(height: deviseWidth * .05,),
Container(
width: deviseWidth * .90,
height: deviseWidth * .14,
decoration: BoxDecoration(
color: Color(0xffE8E8E8),
borderRadius: BorderRadius.all(Radius.circular(5)),
),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 15),
child: Center(
child: TextField(
onChanged: (text){
setState(() {
if(usernameController.text.length >= 2 &&
passwordController.text.length >= 2){
 inputTextNotNull = true;
}else{
inputTextNotNull = false;
}
});
},
controller: usernameController,
style: TextStyle(
fontSize: deviseWidth * .040,
),
decoration: InputDecoration.collapsed(
hintText: 'Phone number, email or username',
),
),
),
),
),
SizedBox(height: deviseWidth * .04,),
Container(
width: deviseWidth * .90,
height: deviseWidth * .14,
decoration: BoxDecoration(
color: Color(0xffE8E8E8),
borderRadius: BorderRadius.all(Radius.circular(5)),
),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 15),
child: Center(
child: TextField(
onChanged: (text){
setState(() {
if(usernameController.text.length >= 2 &&
passwordController.text.length >= 2){
inputTextNotNull = true;
}else{
 inputTextNotNull = false;
}
});
},
controller: passwordController,
obscureText: true,
style: TextStyle(
fontSize: deviseWidth * .040,
),
decoration: InputDecoration.collapsed(
hintText: 'Password',
),
),
),
),
),
SizedBox(height: deviseWidth * .04,),
inputTextNotNull?
GestureDetector(
onLongPressStart: (s){
setState(() {
buttonColor = 0xff78C9FF;
});
},
onLongPressEnd: (s){
setState(() {
buttonColor = 0xff26A9FF;
});
},
onTap: (){
print('Log In');
},

child: Container(
width: deviseWidth * .90,
 height: deviseWidth * .14,
decoration: BoxDecoration(
color: Color(buttonColor),
borderRadius: BorderRadius.all(Radius.circular(5)),
),
child: Center(
child: Text(
'Log In',
style: TextStyle(
color: Colors.white,
fontSize: deviseWidth * .040,
fontWeight: FontWeight.bold,
),
),
),
),
):
Container(
width: deviseWidth * .90,
height: deviseWidth * .14,
decoration: BoxDecoration(
color: Color(0xff78C9FF),
borderRadius: BorderRadius.all(Radius.circular(5)),
),
child: Center(
child: Text(
'Log In',
style: TextStyle(
color: Colors.white,
fontSize: deviseWidth * .040,
fontWeight: FontWeight.bold,
),
),
),
),
SizedBox(height: deviseWidth * .035,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Forgot your login details? ',
style: TextStyle(
fontSize: deviseWidth * .035,
),
),
GestureDetector(
onTap: (){
print('Get help');
},
child: Text('Get help',
style: TextStyle(
fontSize: deviseWidth * .035,
color: Color(0xff002588),
fontWeight: FontWeight.bold,
),
),
),
],
),
SizedBox(height: deviseWidth * .040,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 1,
width: deviseWidth * .40,
color: Color(0xffA2A2A2),
),
SizedBox(width: 10,),
Text('OR',
style: TextStyle(
 fontSize: deviseWidth * .040,
),
),
SizedBox(width: 10,),
Container(
height: 1,
width: deviseWidth * .40,
color: Color(0xffA2A2A2),
),
],
),
SizedBox(height: deviseWidth * .06,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('assets/facebook.png',
height: deviseWidth * .060,
),
SizedBox(width: 5,),
Text('Login with facebook',
style: TextStyle(
color: Color(0xff1877f2),
fontSize: deviseWidth * .040,
fontWeight: FontWeight.w800,
),
),
],
),
SizedBox(height: deviseWidth * .06,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('assets/google.png',
height: deviseWidth * .060,
),
 SizedBox(width: 5,),
Text('Login with Google',
style: TextStyle(
color: Color(0xff1877f2),
fontSize: deviseWidth * .040,
fontWeight: FontWeight.w800,
),
),
],
),
],
),
Container(
width: deviseWidth,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: deviseWidth,
height: 1,
color: Color(0xffA2A2A2),
),
SizedBox(height: 5,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Don't have an account? ",
style: TextStyle(
fontSize: deviseWidth * .040,
),
),
GestureDetector(
onTap: (){
print('Sign Up');
},
 child: Text('Sign Up',
style: TextStyle(
color: Color(0xff00258B),
fontSize: deviseWidth * .040,
fontWeight: FontWeight.bold,
),
),
),
],
),
],
),
),
],
),
),
),
),
);
}
}