diff --git a/assets/images/PElogo2.png b/assets/images/PElogo2.png new file mode 100644 index 0000000..67c6979 Binary files /dev/null and b/assets/images/PElogo2.png differ diff --git a/lib/login_page/login_credentials.dart b/lib/login_page/login_credentials.dart new file mode 100644 index 0000000..17f0f3c --- /dev/null +++ b/lib/login_page/login_credentials.dart @@ -0,0 +1,74 @@ +import 'package:flutter/material.dart'; +import './login_form.dart'; + +// Class for the credential pad on the login page, including the form +// containing two text inputs and the login button +class LoginCredentials extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Container( + height: MediaQuery.of(context).size.height * 0.45, + width: MediaQuery.of(context).size.width, + decoration: BoxDecoration( + //gradient color for the rectangle + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + colors: [ + Color.fromARGB(255, 217, 188, 240), + Color.fromARGB(255, 237, 210, 240) + ]), + borderRadius: BorderRadius.only( + topLeft: const Radius.circular(25.0), + topRight: const Radius.circular(25.0), + )), + child: Column( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.center, + textDirection: TextDirection.ltr, + children: [ + Padding( + padding: EdgeInsets.fromLTRB(20, 20, 20, 10), + child: LoginForm(), + ), + Padding( + padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0), + child: Align( + alignment: Alignment.centerRight, + child: Container( + child: Text( + 'Forgot password?', + style: TextStyle(decoration: TextDecoration.underline), + ), + ), + ), + ), + Padding( + padding: EdgeInsets.symmetric(horizontal: 10), + child: LoginButton(), + ), + Text('By Poly Team', textDirection: TextDirection.ltr) + ], + ), + ); + } +} + +/// Sign up button for the welcome page, use the raised button. +/// TODO: Replace this (PE1-24) +class LoginButton extends StatelessWidget { + @override + Widget build(BuildContext context) { + return GestureDetector( + child: Image( + height: MediaQuery.of(context).size.height * 0.1, + width: MediaQuery.of(context).size.width * 0.8, + image: AssetImage('assets/images/PElogin2.png'), + fit: BoxFit.fitWidth), + onTap: () { + //Todo: link it to different page up page + print('hi\n'); + }, + ); + } +} diff --git a/lib/login_page/login_form.dart b/lib/login_page/login_form.dart new file mode 100644 index 0000000..5707795 --- /dev/null +++ b/lib/login_page/login_form.dart @@ -0,0 +1,49 @@ +import 'package:flutter/material.dart'; + +// Class for the login form consisting of two text inputs +class LoginForm extends StatefulWidget { + @override + LoginFormState createState() { + return LoginFormState(); + } +} + +class LoginFormState extends State { + @override + Widget build(BuildContext context) { + return Container( + decoration: BoxDecoration( + color: Color.fromARGB(255, 248, 236, 252), + borderRadius: BorderRadius.only( + topLeft: const Radius.circular(25.0), + topRight: const Radius.circular(25.0), + bottomLeft: const Radius.circular(25.0), + bottomRight: const Radius.circular(25.0), + )), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Padding( + padding: EdgeInsets.fromLTRB(20, 20, 20, 0), + child: TextFormField( + decoration: InputDecoration( + border: UnderlineInputBorder(), + labelText: 'Email', + ), + ), + ), + Padding( + padding: EdgeInsets.fromLTRB(20, 10, 20, 20), + child: TextFormField( + decoration: InputDecoration( + border: UnderlineInputBorder(), + labelText: 'Password', + ), + obscureText: true, + ), + ), + ], + ), + ); + } +} diff --git a/lib/login_page/login_page.dart b/lib/login_page/login_page.dart new file mode 100644 index 0000000..94e7dce --- /dev/null +++ b/lib/login_page/login_page.dart @@ -0,0 +1,35 @@ +import 'package:flutter/material.dart'; +import './login_title.dart'; +import './login_picture.dart'; +import '../widgets/circle_overlay.dart'; +import './login_credentials.dart'; + +class LoginPage extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + body: Stack( + textDirection: TextDirection.ltr, + children: [ + Positioned( + child: CircleOverlays(), + ), + Positioned( + child: LoginCredentials(), + bottom: 0, + ), + Positioned( + child: LoginPicture(), + bottom: MediaQuery.of(context).size.height * 0.35, + left: MediaQuery.of(context).size.width * 0.1, + ), + Positioned( + child: LoginTitle(), + left: MediaQuery.of(context).size.width * 0.07, + top: MediaQuery.of(context).size.height * 0.07, + ), + ], + ), + ); + } +} diff --git a/lib/login_page/login_picture.dart b/lib/login_page/login_picture.dart new file mode 100644 index 0000000..b5e27be --- /dev/null +++ b/lib/login_page/login_picture.dart @@ -0,0 +1,14 @@ +import 'package:flutter/material.dart'; + +// Image widget on the login page +class LoginPicture extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Image( + image: AssetImage('assets/images/PEloginImage.png'), + fit: BoxFit.contain, + height: MediaQuery.of(context).size.height * 0.4, + width: MediaQuery.of(context).size.width * 0.8, + ); + } +} diff --git a/lib/login_page/login_title.dart b/lib/login_page/login_title.dart new file mode 100644 index 0000000..d9e966e --- /dev/null +++ b/lib/login_page/login_title.dart @@ -0,0 +1,31 @@ +import 'package:flutter/material.dart'; + +class LoginTitle extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Container( + height: MediaQuery.of(context).size.height * 0.2, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + textDirection: TextDirection.ltr, + children: [ + Image( + image: AssetImage('assets/images/PElogo2.png'), + fit: BoxFit.contain, + height: MediaQuery.of(context).size.height * 0.08, + ), + Text('LOGIN', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 27, + fontFamily: 'Montserrat'), + textDirection: TextDirection.ltr), + Text('Welcome back!', + style: TextStyle(fontSize: 20, fontFamily: 'Montserrat'), + textDirection: TextDirection.ltr), + ], + ), + ); + } +} diff --git a/lib/widgets/circle_overlay.dart b/lib/widgets/circle_overlay.dart new file mode 100644 index 0000000..22197d9 --- /dev/null +++ b/lib/widgets/circle_overlay.dart @@ -0,0 +1,52 @@ +import 'package:flutter/material.dart'; + +class CircleOverlays extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Container( + width: MediaQuery.of(context).size.height, + child: Stack( + textDirection: TextDirection.ltr, + children: [ + Positioned( + child: CircleContainer( + assetLocation: 'assets/images/PEcircle2.png', + width: 0.6, + height: 0.33), + left: 0, + ), + Positioned( + child: CircleContainer( + assetLocation: 'assets/images/PEcircle1.png', + width: 0.6, + height: 0.216), + right: 0, + ) + ], + ), + ); + } +} + +// this class is use to hold the circles +class CircleContainer extends StatelessWidget { + final String assetLocation; + final double width; + final double height; + + CircleContainer( + {Key key, + @required this.assetLocation, + @required this.width, + @required this.height}); + + @override + Widget build(BuildContext context) { + return Image( + width: MediaQuery.of(context).size.width * width, + height: MediaQuery.of(context).size.height * height, + image: AssetImage(assetLocation), + fit: BoxFit.contain, + ); + } +} diff --git a/pubspec.yaml b/pubspec.yaml index 15a4bfd..e83e5c6 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -50,9 +50,8 @@ flutter: uses-material-design: true # To add assets to your application, add an assets section, like this: - # assets: - # - images/a_dot_burr.jpeg - # - images/a_dot_ham.jpeg + assets: + - assets/images/ # An image asset can refer to one or more resolution-specific "variants", see # https://flutter.dev/assets-and-images/#resolution-aware.