Skip to content

Commit

Permalink
Merge pull request #1 from tongvantruong/login-register
Browse files Browse the repository at this point in the history 
UI for login, register
  • Loading branch information
@tongvantruong
tongvantruong authored Jul 26, 2020
2 parents 3fa25b2 + 6b0bc60 commit 7a7fea1
Show file tree
Hide file tree
Showing 17 changed files with 370 additions and 150 deletions.
6 changes: 6 additions & 0 deletions lib/models/user.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
class User {
final String email;
final String password;

const User(this.email, this.password);
}
5 changes: 3 additions & 2 deletions lib/routing/router.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ import 'package:flutter/widgets.dart';
import 'package:flutter_web_responsive_layout/routing/route_name.dart';
import 'package:flutter_web_responsive_layout/views/about/about_view.dart';
import 'package:flutter_web_responsive_layout/views/home/home_view.dart';
import 'package:flutter_web_responsive_layout/views/layout_template/layout_template.dart';
import 'package:flutter_web_responsive_layout/views/login/login_view.dart';
import 'package:flutter_web_responsive_layout/views/pricing/pricing_view.dart';
import 'package:flutter_web_responsive_layout/views/register/register_view.dart';

Route<dynamic> generateRoute(RouteSettings settings) {
Route<dynamic> generateRoute(RouteSettings settings, LayoutTemplateState parentState) {
switch (settings.name) {
case HomeRoute:
return _getPageRoute(HomeView());
Expand All @@ -16,7 +17,7 @@ Route<dynamic> generateRoute(RouteSettings settings) {
case AboutRoute:
return _getPageRoute(AboutView());
case LoginRoute:
return _getPageRoute(LoginView());
return _getPageRoute(LoginView(parentState));
case RegisterRoute:
return _getPageRoute(RegisterView());
default:
Expand Down
17 changes: 11 additions & 6 deletions lib/views/layout_template/layout_template.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,28 +12,29 @@ class LayoutTemplate extends StatefulWidget {
const LayoutTemplate({Key key}) : super(key: key);

@override
_LayoutTemplateState createState() => new _LayoutTemplateState();
LayoutTemplateState createState() => LayoutTemplateState();
}

class _LayoutTemplateState extends State<LayoutTemplate> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
class LayoutTemplateState extends State<LayoutTemplate> {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
String currentEmail = "";

@override
Widget build(BuildContext context) {
return ResponsiveBuilder(
builder: (context, sizingInformation) =>
Scaffold(
key: _scaffoldKey,
drawer: sizingInformation.deviceScreenType == DeviceScreenType.mobile ? NavigationDrawer() : null,
drawer: sizingInformation.deviceScreenType == DeviceScreenType.mobile ? NavigationDrawer(this) : null,
backgroundColor: Colors.white,
body: CenteredView(
child: Column(
children: <Widget>[
NavigationBar(_scaffoldKey),
NavigationBar(this, _scaffoldKey),
Expanded(
child: Navigator(
key: locator<NavigationService>().navigatorKey,
onGenerateRoute: generateRoute,
onGenerateRoute: _generateRoute,
initialRoute: HomeRoute,
)
)
Expand All @@ -43,4 +44,8 @@ class _LayoutTemplateState extends State<LayoutTemplate> {
)
);
}

Route<dynamic> _generateRoute(RouteSettings settings) {
return generateRoute(settings, this);
}
}
72 changes: 37 additions & 35 deletions lib/views/login/login_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,29 @@ import 'dart:html';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_web_responsive_layout/constants/app_colors.dart';
import 'package:flutter_web_responsive_layout/routing/route_name.dart';
import 'package:flutter_web_responsive_layout/services/navigation_service.dart';
import 'package:flutter_web_responsive_layout/views/layout_template/layout_template.dart';
import 'package:flutter_web_responsive_layout/widgets/buttons/button_type.dart';
import 'package:flutter_web_responsive_layout/widgets/buttons/primary_button.dart';

import '../../locator.dart';

class LoginView extends StatefulWidget {
const LoginView({Key key}) : super(key: key);
final LayoutTemplateState parentState;
const LoginView(this.parentState);

@override
_LoginViewStatefulWidgetState createState() => _LoginViewStatefulWidgetState();
_LoginViewStatefulWidgetState createState() => _LoginViewStatefulWidgetState(parentState);
}

class _LoginViewStatefulWidgetState extends State<LoginView> {
final LayoutTemplateState parentState;
_LoginViewStatefulWidgetState(this.parentState);

final _formKey = GlobalKey<FormState>();
final _emailController = TextEditingController();
final _passwordController = TextEditingController();

@override
Widget build(BuildContext context) {
Expand All @@ -34,6 +42,7 @@ class _LoginViewStatefulWidgetState extends State<LoginView> {
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextFormField(
controller: _emailController,
decoration: const InputDecoration(
hintText: 'Enter your email',
),
Expand All @@ -44,43 +53,30 @@ class _LoginViewStatefulWidgetState extends State<LoginView> {
return null;
},
),
TextFormField(
decoration: const InputDecoration(
hintText: 'Enter your password',
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter your password';
}
return null;
},
),
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: MaterialButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6)
child: TextFormField(
controller: _passwordController,
obscureText: true,
decoration: const InputDecoration(
hintText: 'Enter your password',
),
color: primaryColor,
onPressed: () {
if (_formKey.currentState.validate()) {
// Process data.
validator: (value) {
if (value.isEmpty) {
return 'Please enter your password';
}
return null;
},
child: Container(
height: 50,
alignment: Alignment.center,
child: Text("Login",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w800,
color: Colors.white,
),
),

)
)
),
Padding(
padding: const EdgeInsets.only(top: 30.0),
child: PrimaryButton("Login", ButtonType.Small, () {
if (_formKey.currentState.validate()) {
_login();
}
})
),
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Center(
Expand Down Expand Up @@ -112,7 +108,13 @@ class _LoginViewStatefulWidgetState extends State<LoginView> {
)
)
)
);

);
}

Future<void> _login() async {
parentState.setState(() {
parentState.currentEmail = _emailController.text;
locator<NavigationService>().navigateTo(HomeRoute);
});
}
}
72 changes: 30 additions & 42 deletions lib/views/register/register_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import 'package:flutter_web_responsive_layout/constants/app_colors.dart';
import 'package:flutter_web_responsive_layout/routing/route_name.dart';
import 'package:flutter_web_responsive_layout/services/navigation_service.dart';
import 'package:flutter_web_responsive_layout/views/login/login_view.dart';
import 'package:flutter_web_responsive_layout/widgets/buttons/button_type.dart';
import 'package:flutter_web_responsive_layout/widgets/buttons/primary_button.dart';

import '../../locator.dart';

Expand Down Expand Up @@ -43,54 +45,41 @@ class _LoginViewStatefulWidgetState extends State<RegisterView> {
return null;
},
),
TextFormField(
decoration: const InputDecoration(
hintText: 'Enter your password',
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter your password';
}
return null;
},
),
TextFormField(
decoration: const InputDecoration(
hintText: 'Enter your name',
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter your name';
}
return null;
},
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: TextFormField(
decoration: const InputDecoration(
hintText: 'Enter your password',
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter your password';
}
return null;
},
)
),
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: MaterialButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6)
child: TextFormField(
decoration: const InputDecoration(
hintText: 'Enter your name',
),
color: primaryColor,
onPressed: () {
if (_formKey.currentState.validate()) {
// Process data.
validator: (value) {
if (value.isEmpty) {
return 'Please enter your name';
}
return null;
},
child: Container(
height: 50,
alignment: Alignment.center,
child: Text("Register",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w800,
color: Colors.white,
),
),

)
)
),
Padding(
padding: const EdgeInsets.only(top: 30.0),
child: PrimaryButton("Register", ButtonType.Small, () {
if (_formKey.currentState.validate()) {
}
})
),
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Center(
Expand Down Expand Up @@ -122,7 +111,6 @@ class _LoginViewStatefulWidgetState extends State<RegisterView> {
)
)
)
);

);
}
}
5 changes: 5 additions & 0 deletions lib/widgets/buttons/button_type.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
enum ButtonType {
Large,
Medium,
Small
}
74 changes: 74 additions & 0 deletions lib/widgets/buttons/primary_button.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import 'package:flutter/material.dart';
import 'package:flutter_web_responsive_layout/constants/app_colors.dart';
import 'package:flutter_web_responsive_layout/widgets/buttons/button_type.dart';

class PrimaryButton extends StatelessWidget {
final ButtonType type;
final String title;
final VoidCallback onPressed;
const PrimaryButton(this.title, this.type, this.onPressed);

@override
Widget build(Object context) {
return MaterialButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5)
),
color: primaryColor,
onPressed: () {
onPressed();
},
child: Container(
height: _initHeight(),
alignment: Alignment.center,
child: Text(title,
style: TextStyle(
fontSize: _initFontSize(),
fontWeight: _initFontWeight(),
color: Colors.white,
),
),
)
);
}

FontWeight _initFontWeight() {
switch (type) {
case ButtonType.Large:
return FontWeight.w800;
case ButtonType.Medium:
return FontWeight.w800;
case ButtonType.Small:
return FontWeight.w800;
default:
return FontWeight.w800;
}
}

double _initFontSize() {
switch (type) {
case ButtonType.Large:
return 16;
case ButtonType.Medium:
return 16;
case ButtonType.Small:
return 16;
default:
return 16;
}
}

double _initHeight() {
switch (type) {
case ButtonType.Large:
return 70;
case ButtonType.Medium:
return 60;
case ButtonType.Small:
return 50;
default:
return 50;
}
}

}
2 changes: 1 addition & 1 deletion lib/widgets/call_to_action/call_to_action_tablet_desktop.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ class CallToActionTabletDesktop extends StatelessWidget {
color: primaryColor,
onPressed: _launchURL,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 15),
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Text(
title,
style: TextStyle(
Expand Down
Loading

0 comments on commit 7a7fea1

Please sign in to comment.