Login screen now looks very sexy

This commit is contained in:
Felix 2019-07-09 10:26:33 +01:00
parent ad5140e2e6
commit bd5ac307d3
5 changed files with 289 additions and 100 deletions

View File

@ -6,8 +6,6 @@ TODO
Splash screen transition - fade
Login
Full page/ popover
Colours
save login details option (checkbox or something)
Navigation
@ -16,7 +14,4 @@ TODO
Submit Receipt
Categories
Recurring
find button displays relevant dialog
Done
submit receipt API implemented more fully so now all transaction options can be submitted
'organisation name' dialog works

View File

@ -39,6 +39,7 @@ class _HomePageState extends State<HomePage> {
),
drawer: BasicDrawer(),
body: Container(
padding: EdgeInsets.fromLTRB(0, 15, 0, 0),
child: FadeIn(
duration: Duration(milliseconds: 500),
curve: Curves.easeIn,
@ -47,7 +48,6 @@ class _HomePageState extends State<HomePage> {
children: <Widget>[
ListTile(
contentPadding: EdgeInsets.fromLTRB(0, 15, 0, 0),
title: new Center(
child: new Text(
"Submit Receipt",

View File

@ -18,8 +18,8 @@ class LoginPage extends StatefulWidget {
}
class LoginPageState extends State<LoginPage> {
final TextEditingController _emailController = TextEditingController(text: 'test@example.com'); // remove
final TextEditingController _passwordController = TextEditingController(text: 'abc123'); // remove
final TextEditingController _emailController = TextEditingController(/*text: 'test@example.com'*/); // remove
final TextEditingController _passwordController = TextEditingController(/*text: 'abc123'*/); // remove
FocusNode focusNode; // added so focus can move automatically
@ -73,70 +73,39 @@ class LoginPageState extends State<LoginPage> {
},
child: PlatformScaffold(
// drawer: BasicDrawer(),
appBar: AppBar(
title: Text(
"LOGIN",
style: TextStyle(
fontSize: 30.0,
color: Colors.black,
),
),
centerTitle: true,
iconTheme: IconThemeData(color: Colors.black),
),
// body: Container(
// decoration: BoxDecoration(color: Colors.white),
// margin: const EdgeInsets.all(20),
// child: Padding(
// padding: EdgeInsets.fromLTRB(30.0, 170.0, 30.0, 0.0),
// child: ListView(
// children: <Widget>[
body: Container(
child: Padding(
padding: EdgeInsets.fromLTRB(30.0, 0.0, 30.0, 0.0),
child: ListView(
decoration: BoxDecoration(color: Colors.white),
child: Container(
margin: EdgeInsets.fromLTRB(60,0,60,0),
child: Column(
children: <Widget>[
Container(
alignment: Alignment.topCenter,
child: Padding(
padding: EdgeInsets.fromLTRB(0.0, 40.0, 0.0, 15.0),
child: Text(
"Local Loop",
style: TextStyle(fontSize: 40.0, color: Colors.black),
Expanded(
child: Container(
margin: EdgeInsets.fromLTRB(15,0,15,0),
// alignment: FractionalOffset(0.5, 0.3), // not sure what this does ngl :/
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/launch_image.png')
),
)),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 78.0),
child: RichText(
text: TextSpan(
children: [
TextSpan(
text:
'This is the logon page.',
style: new TextStyle(
fontSize: 20.0,
color: Colors.black,
),
),
TextSpan(
text:
' It is currently in development.',
style: new TextStyle(
fontSize: 20.0,
color: Colors.black,
),
),
],
),
),
),
Text(
"Email",
style: TextStyle(
fontSize: 18.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0),
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
child: TextField(
autocorrect: false,
textAlign: TextAlign.center,
controller: _emailController,
decoration: InputDecoration(
hintText: "Use your login email",
hintText: "EMAIL",
hintStyle: TextStyle(fontSize: 15),
),
style: TextStyle(
fontSize: 18.0,
@ -149,23 +118,15 @@ class LoginPageState extends State<LoginPage> {
),
),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 35.0, 0.0, 0.0),
child: Text(
"Password",
style: TextStyle(
fontSize: 18.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0),
padding: EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 0.0),
child: TextField(
autocorrect: false,
textAlign: TextAlign.center,
controller: _passwordController,
focusNode: focusNode,
decoration: InputDecoration(
hintText: 'Your password, keep it secret, keep it safe.',
hintText: 'PASSWORD',
hintStyle: TextStyle(fontSize: 15),
),
obscureText: true,
style: TextStyle(
@ -173,30 +134,54 @@ class LoginPageState extends State<LoginPage> {
color: Colors.grey[800],
fontWeight: FontWeight.bold,
),
onSubmitted: (_) {
login( _emailController.text,
_passwordController.text);
},
onSubmitted: (_) {
login( _emailController.text,
_passwordController.text);
},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 70.0, 0.0, 0.0),
child: Container(
height: 65.0,
child: RaisedButton(
onPressed: () {
login( _emailController.text,
_passwordController.text);
// showDialog(
// barrierDismissible: false,
// );
// print("pressed");
},
child: Text("LOGIN",
style:
TextStyle(color: Colors.white, fontSize: 22.0)),
color: Colors.blue,
// Padding(
// padding: EdgeInsets.fromLTRB(0.0, 25.0, 0.0, 100.0),
// child: Container(
// height: 45.0,
// child: RaisedButton(
//
// onPressed: () {
// login( _emailController.text,
// _passwordController.text);
// // showDialog(
// // barrierDismissible: false,
// // );
// // print("pressed");
// },
// child: Text("GO",
// style:
// TextStyle(color: Colors.white, fontSize: 20.0)),
// color: Colors.blue,
// ),
// ),
// ),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 35.0, 0.0, 100.0),
child : Material(
child : InkWell(
onTap: () => login( _emailController.text, _passwordController.text),
child: new Container(
width: 100,
height: 50,
decoration: new BoxDecoration(
// color: Colors.lightBlueAccent,
borderRadius: new BorderRadius.circular(0.0),
),
child: new Center(
child: new Text(
'GO', style: new TextStyle(fontSize: 18, color: Colors.white),),
),
),
splashColor: Colors.lightBlueAccent,
),
color: Colors.blueAccent,
),
),
],

View File

@ -0,0 +1,209 @@
import 'dart:async';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:local_spend/common/apifunctions/request_login_api.dart';
import 'package:local_spend/common/functions/show_dialog_single_button.dart';
import 'package:local_spend/common/platform/platform_scaffold.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:url_launcher/url_launcher.dart';
const URL = "https://flutter.io/";
class LoginPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new LoginPageState();
}
}
class LoginPageState extends State<LoginPage> {
final TextEditingController _emailController = TextEditingController(text: 'test@example.com'); // remove
final TextEditingController _passwordController = TextEditingController(text: 'abc123'); // remove
FocusNode focusNode; // added so focus can move automatically
Future launchURL(String url) async {
if (await canLaunch(url)) {
await launch(url, forceSafariVC: true, forceWebView: true);
} else {
showDialogSingleButton(
context,
"Unable to reach your website.",
"Currently unable to reach the website $URL. Please try again at a later time.",
"OK");
}
}
@override
void initState() {
super.initState();
_saveCurrentRoute("/LoginPage");
focusNode = FocusNode();
}
@override
void dispose() {
focusNode.dispose(); //disposes focus node when form disposed
super.dispose();
}
_saveCurrentRoute(String lastRoute) async {
SharedPreferences preferences = await SharedPreferences.getInstance();
await preferences.setString('LastPageRoute', lastRoute);
}
void login(String username, String password) {
SystemChannels.textInput.invokeMethod('TextInput.hide');
requestLoginAPI(context, username,
password);
}
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () {
if (Navigator.canPop(context)) {
Navigator.of(context).pushNamedAndRemoveUntil(
'/HomePage', (Route<dynamic> route) => false);
} else {
Navigator.of(context).pushReplacementNamed('/HomePage');
}
},
child: PlatformScaffold(
// drawer: BasicDrawer(),
appBar: AppBar(
title: Text(
"LOGIN",
style: TextStyle(
fontSize: 30.0,
color: Colors.black,
),
),
centerTitle: true,
iconTheme: IconThemeData(color: Colors.black),
),
body: Container(
child: Padding(
padding: EdgeInsets.fromLTRB(30.0, 0.0, 30.0, 0.0),
child: ListView(
children: <Widget>[
Container(
alignment: Alignment.topCenter,
child: Padding(
padding: EdgeInsets.fromLTRB(0.0, 40.0, 0.0, 15.0),
child: Text(
"Local Loop",
style: TextStyle(fontSize: 40.0, color: Colors.black),
),
)),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 78.0),
child: RichText(
text: TextSpan(
children: [
TextSpan(
text:
'This is the logon page.',
style: new TextStyle(
fontSize: 20.0,
color: Colors.black,
),
),
TextSpan(
text:
' It is currently in development.',
style: new TextStyle(
fontSize: 20.0,
color: Colors.black,
),
),
],
),
),
),
Text(
"EMAIL",
style: TextStyle(
fontSize: 16.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0),
child: TextField(
controller: _emailController,
decoration: InputDecoration(
hintText: "Use your login email",
),
style: TextStyle(
fontSize: 18.0,
color: Colors.grey[800],
fontWeight: FontWeight.bold,
),
onSubmitted: (_) {
FocusScope.of(context).requestFocus(focusNode);
},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 35.0, 0.0, 0.0),
child: Text(
"PASSWORD",
style: TextStyle(
fontSize: 16.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0),
child: TextField(
controller: _passwordController,
focusNode: focusNode,
decoration: InputDecoration(
hintText: 'Your password, keep it secret, keep it safe.',
),
obscureText: true,
style: TextStyle(
fontSize: 18.0,
color: Colors.grey[800],
fontWeight: FontWeight.bold,
),
onSubmitted: (_) {
login( _emailController.text,
_passwordController.text);
},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 70.0, 0.0, 0.0),
child: Container(
height: 65.0,
child: RaisedButton(
onPressed: () {
login( _emailController.text,
_passwordController.text);
// showDialog(
// barrierDismissible: false,
// );
// print("pressed");
},
child: Text("LOGIN",
style:
TextStyle(color: Colors.white, fontSize: 22.0)),
color: Colors.blue,
),
),
),
],
),
),
),
),
);
}
}

View File

@ -40,9 +40,9 @@ class _SplashScreenState extends State<SplashScreen> {
margin: EdgeInsets.all(15),
alignment: FractionalOffset(0.5, 0.3),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/launch_image.png')
),
image: DecorationImage(
image: AssetImage('assets/images/launch_image.png')
),
),
),
),