Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import 'dart:async';
- import 'package:flutter/material.dart';
- import 'package:flutter/services.dart';
- import 'package:font_awesome_flutter/font_awesome_flutter.dart';
- import 'package:the_gorgeous_login/style/theme.dart' as Theme;
- import 'package:the_gorgeous_login/ui/dashboard.dart';
- import 'package:the_gorgeous_login/utils/bubble_indication_painter.dart';
- import 'package:firebase_auth/firebase_auth.dart';
- import 'package:google_sign_in/google_sign_in.dart';
- class LoginPage extends StatefulWidget {
- LoginPage({Key key}) : super(key: key);
- @override
- _LoginPageState createState() => new _LoginPageState();
- }
- class _LoginPageState extends State<LoginPage>
- with SingleTickerProviderStateMixin {
- final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
- final FocusNode myFocusNodeEmailLogin = FocusNode();
- final FocusNode myFocusNodePasswordLogin = FocusNode();
- final FocusNode myFocusNodePassword = FocusNode();
- final FocusNode myFocusNodeEmail = FocusNode();
- final FocusNode myFocusNodeName = FocusNode();
- TextEditingController loginEmailController = new TextEditingController();
- TextEditingController loginPasswordController = new TextEditingController();
- bool _obscureTextLogin = true;
- bool _obscureTextSignup = true;
- bool _obscureTextSignupConfirm = true;
- TextEditingController signupEmailController = new TextEditingController();
- TextEditingController signupNameController = new TextEditingController();
- TextEditingController signupPasswordController = new TextEditingController();
- TextEditingController signupConfirmPasswordController =
- new TextEditingController();
- PageController _pageController;
- Color left = Colors.black;
- Color right = Colors.white;
- final FirebaseAuth _auth = FirebaseAuth.instance;
- final GoogleSignIn googleSignIn = GoogleSignIn();
- String name;
- String email;
- String imageUrl;
- Future<String> signInWithGoogle() async {
- final GoogleSignInAccount googleSignInAccount = await googleSignIn.signIn();
- final GoogleSignInAuthentication googleSignInAuthentication =
- await googleSignInAccount.authentication;
- final AuthCredential credential = GoogleAuthProvider.getCredential(
- accessToken: googleSignInAuthentication.accessToken,
- idToken: googleSignInAuthentication.idToken,
- );
- final AuthResult authResult = await _auth.signInWithCredential(credential);
- final FirebaseUser user = authResult.user;
- // Checking if email and name is null
- assert(user.email != null);
- assert(user.displayName != null);
- assert(user.photoUrl != null);
- name = user.displayName;
- email = user.email;
- imageUrl = user.photoUrl;
- // Only taking the first part of the name, i.e., First Name
- if (name.contains(" ")) {
- name = name.substring(0, name.indexOf(" "));
- }
- assert(!user.isAnonymous);
- assert(await user.getIdToken() != null);
- final FirebaseUser currentUser = await _auth.currentUser();
- assert(user.uid == currentUser.uid);
- return 'signInWithGoogle succeeded: $user';
- }
- void signOutGoogle() async {
- await googleSignIn.signOut();
- print("User Sign Out");
- }
- @override
- Widget build(BuildContext context) {
- return new Scaffold(
- key: _scaffoldKey,
- body: NotificationListener<OverscrollIndicatorNotification>(
- onNotification: (overscroll) {
- overscroll.disallowGlow();
- },
- child: SingleChildScrollView(
- child: Container(
- width: MediaQuery.of(context).size.width,
- height: MediaQuery.of(context).size.height >= 775.0
- ? MediaQuery.of(context).size.height
- : 775.0,
- decoration: new BoxDecoration(
- gradient: new LinearGradient(
- colors: [
- Theme.Colors.loginGradientStart,
- Theme.Colors.loginGradientEnd
- ],
- begin: const FractionalOffset(0.0, 0.0),
- end: const FractionalOffset(1.0, 1.0),
- stops: [0.0, 1.0],
- tileMode: TileMode.clamp),
- ),
- child: Column(
- mainAxisSize: MainAxisSize.max,
- children: <Widget>[
- Padding(
- padding: EdgeInsets.only(top: 75.0),
- child: new Image(
- width: 250.0,
- height: 191.0,
- fit: BoxFit.fill,
- image: new AssetImage('assets/img/logo2.png')),
- ),
- Padding(
- padding: EdgeInsets.only(top: 20.0),
- child: _buildMenuBar(context),
- ),
- Expanded(
- flex: 2,
- child: PageView(
- controller: _pageController,
- onPageChanged: (i) {
- if (i == 0) {
- setState(() {
- right = Colors.white;
- left = Colors.black;
- });
- } else if (i == 1) {
- setState(() {
- right = Colors.black;
- left = Colors.white;
- });
- }
- },
- children: <Widget>[
- new ConstrainedBox(
- constraints: const BoxConstraints.expand(),
- child: _buildSignIn(context),
- ),
- new ConstrainedBox(
- constraints: const BoxConstraints.expand(),
- child: _buildSignUp(context),
- ),
- ],
- ),
- ),
- ],
- ),
- ),
- ),
- ),
- );
- }
- @override
- void dispose() {
- myFocusNodePassword.dispose();
- myFocusNodeEmail.dispose();
- myFocusNodeName.dispose();
- _pageController?.dispose();
- super.dispose();
- }
- @override
- void initState() {
- super.initState();
- SystemChrome.setPreferredOrientations([
- DeviceOrientation.portraitUp,
- DeviceOrientation.portraitDown,
- ]);
- _pageController = PageController();
- }
- void showInSnackBar(String value) {
- FocusScope.of(context).requestFocus(new FocusNode());
- _scaffoldKey.currentState?.removeCurrentSnackBar();
- _scaffoldKey.currentState.showSnackBar(new SnackBar(
- content: new Text(
- value,
- textAlign: TextAlign.center,
- style: TextStyle(
- color: Colors.white,
- fontSize: 16.0,
- fontFamily: "WorkSansSemiBold"),
- ),
- backgroundColor: Colors.blue,
- duration: Duration(seconds: 3),
- ));
- }
- Widget _buildMenuBar(BuildContext context) {
- return Container(
- width: 300.0,
- height: 50.0,
- decoration: BoxDecoration(
- color: Color(0x552B2B2B),
- borderRadius: BorderRadius.all(Radius.circular(25.0)),
- ),
- child: CustomPaint(
- painter: TabIndicationPainter(pageController: _pageController),
- child: Row(
- mainAxisAlignment: MainAxisAlignment.spaceEvenly,
- children: <Widget>[
- Expanded(
- child: FlatButton(
- splashColor: Colors.transparent,
- highlightColor: Colors.transparent,
- onPressed: _onSignInButtonPress,
- child: Text(
- "Log In",
- style: TextStyle(
- color: left,
- fontSize: 16.0,
- fontFamily: "WorkSansSemiBold"),
- ),
- ),
- ),
- //Container(height: 33.0, width: 1.0, color: Colors.white),
- Expanded(
- child: FlatButton(
- splashColor: Colors.transparent,
- highlightColor: Colors.transparent,
- onPressed: _onSignUpButtonPress,
- child: Text(
- "Daftar Baru",
- style: TextStyle(
- color: right,
- fontSize: 16.0,
- fontFamily: "WorkSansSemiBold"),
- ),
- ),
- ),
- ],
- ),
- ),
- );
- }
- Widget _buildSignIn(BuildContext context) {
- return Container(
- padding: EdgeInsets.only(top: 23.0),
- child: Column(
- children: <Widget>[
- Stack(
- alignment: Alignment.topCenter,
- overflow: Overflow.visible,
- children: <Widget>[
- Card(
- elevation: 2.0,
- color: Colors.white,
- shape: RoundedRectangleBorder(
- borderRadius: BorderRadius.circular(8.0),
- ),
- child: Container(
- width: 300.0,
- height: 190.0,
- child: Column(
- children: <Widget>[
- Padding(
- padding: EdgeInsets.only(
- top: 20.0, bottom: 20.0, left: 25.0, right: 25.0),
- child: TextField(
- focusNode: myFocusNodeEmailLogin,
- controller: loginEmailController,
- keyboardType: TextInputType.emailAddress,
- style: TextStyle(
- fontFamily: "WorkSansSemiBold",
- fontSize: 16.0,
- color: Colors.black),
- decoration: InputDecoration(
- border: InputBorder.none,
- icon: Icon(
- FontAwesomeIcons.envelope,
- color: Colors.black,
- size: 22.0,
- ),
- hintText: "Email",
- hintStyle: TextStyle(
- fontFamily: "WorkSansSemiBold", fontSize: 17.0),
- ),
- ),
- ),
- Container(
- width: 250.0,
- height: 1.0,
- color: Colors.grey[400],
- ),
- Padding(
- padding: EdgeInsets.only(
- top: 20.0, bottom: 20.0, left: 25.0, right: 25.0),
- child: TextField(
- focusNode: myFocusNodePasswordLogin,
- controller: loginPasswordController,
- obscureText: _obscureTextLogin,
- style: TextStyle(
- fontFamily: "WorkSansSemiBold",
- fontSize: 16.0,
- color: Colors.black),
- decoration: InputDecoration(
- border: InputBorder.none,
- icon: Icon(
- FontAwesomeIcons.lock,
- size: 22.0,
- color: Colors.black,
- ),
- hintText: "Password",
- hintStyle: TextStyle(
- fontFamily: "WorkSansSemiBold", fontSize: 17.0),
- suffixIcon: GestureDetector(
- onTap: _toggleLogin,
- child: Icon(
- _obscureTextLogin
- ? FontAwesomeIcons.eye
- : FontAwesomeIcons.eyeSlash,
- size: 15.0,
- color: Colors.black,
- ),
- ),
- ),
- ),
- ),
- ],
- ),
- ),
- ),
- Container(
- margin: EdgeInsets.only(top: 170.0),
- decoration: new BoxDecoration(
- borderRadius: BorderRadius.all(Radius.circular(5.0)),
- boxShadow: <BoxShadow>[
- BoxShadow(
- color: Theme.Colors.loginGradientStart,
- offset: Offset(1.0, 6.0),
- blurRadius: 20.0,
- ),
- BoxShadow(
- color: Theme.Colors.loginGradientEnd,
- offset: Offset(1.0, 6.0),
- blurRadius: 20.0,
- ),
- ],
- gradient: new LinearGradient(
- colors: [
- Theme.Colors.loginGradientEnd,
- Theme.Colors.loginGradientStart
- ],
- begin: const FractionalOffset(0.2, 0.2),
- end: const FractionalOffset(1.0, 1.0),
- stops: [0.0, 1.0],
- tileMode: TileMode.clamp),
- ),
- child: MaterialButton(
- highlightColor: Colors.transparent,
- splashColor: Theme.Colors.loginGradientEnd,
- //shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5.0))),
- child: Padding(
- padding: const EdgeInsets.symmetric(
- vertical: 10.0, horizontal: 42.0),
- child: Text(
- "LOGIN",
- style: TextStyle(
- color: Colors.white,
- fontSize: 25.0,
- fontFamily: "WorkSansBold"),
- ),
- ),
- onPressed: () {
- Navigator.push(
- context,
- MaterialPageRoute(builder: (context) => Dashboard()),
- );
- },
- ),
- ),
- ],
- ),
- Padding(
- padding: EdgeInsets.only(top: 10.0),
- child: Row(
- mainAxisAlignment: MainAxisAlignment.center,
- children: <Widget>[
- Container(
- decoration: BoxDecoration(
- gradient: new LinearGradient(
- colors: [
- Colors.white10,
- Colors.white,
- ],
- begin: const FractionalOffset(0.0, 0.0),
- end: const FractionalOffset(1.0, 1.0),
- stops: [0.0, 1.0],
- tileMode: TileMode.clamp),
- ),
- width: 100.0,
- height: 1.0,
- ),
- Padding(
- padding: EdgeInsets.only(left: 15.0, right: 15.0),
- child: Text(
- "Atau",
- style: TextStyle(
- color: Colors.white,
- fontSize: 16.0,
- fontFamily: "WorkSansMedium"),
- ),
- ),
- Container(
- decoration: BoxDecoration(
- gradient: new LinearGradient(
- colors: [
- Colors.white,
- Colors.white10,
- ],
- begin: const FractionalOffset(0.0, 0.0),
- end: const FractionalOffset(1.0, 1.0),
- stops: [0.0, 1.0],
- tileMode: TileMode.clamp),
- ),
- width: 100.0,
- height: 1.0,
- ),
- ],
- ),
- ),
- Row(
- mainAxisAlignment: MainAxisAlignment.center,
- children: <Widget>[
- Padding(
- padding: EdgeInsets.only(top: 10.0, right: 40.0),
- child: GestureDetector(
- onTap: () => showInSnackBar("Facebook button pressed"),
- child: Container(
- padding: const EdgeInsets.all(15.0),
- decoration: new BoxDecoration(
- shape: BoxShape.circle,
- color: Colors.white,
- ),
- child: new Icon(
- FontAwesomeIcons.facebookF,
- color: Color(0xFF0084ff),
- ),
- ),
- ),
- ),
- Padding(
- padding: EdgeInsets.only(top: 10.0),
- child: MaterialButton(
- onPressed: () {
- signInWithGoogle().whenComplete(() {
- Navigator.of(context).push(
- MaterialPageRoute(
- builder: (context) {
- return Dashboard();
- },
- ),
- );
- });
- },
- child: Container(
- padding: const EdgeInsets.all(15.0),
- decoration: new BoxDecoration(
- shape: BoxShape.circle,
- color: Colors.white,
- ),
- child: new Icon(
- FontAwesomeIcons.google,
- color: Color(0xFF0084ff),
- ),
- ),
- ),
- ),
- ],
- ),
- ],
- ),
- );
- }
- Widget _buildSignUp(BuildContext context) {
- return Container(
- padding: EdgeInsets.only(top: 23.0),
- child: Column(
- children: <Widget>[
- Stack(
- alignment: Alignment.topCenter,
- overflow: Overflow.visible,
- children: <Widget>[
- Card(
- elevation: 2.0,
- color: Colors.white,
- shape: RoundedRectangleBorder(
- borderRadius: BorderRadius.circular(8.0),
- ),
- child: Container(
- width: 300.0,
- height: 360.0,
- child: Column(
- children: <Widget>[
- Padding(
- padding: EdgeInsets.only(
- top: 20.0, bottom: 20.0, left: 25.0, right: 25.0),
- child: TextField(
- focusNode: myFocusNodeName,
- controller: signupNameController,
- keyboardType: TextInputType.text,
- textCapitalization: TextCapitalization.words,
- style: TextStyle(
- fontFamily: "WorkSansSemiBold",
- fontSize: 16.0,
- color: Colors.black),
- decoration: InputDecoration(
- border: InputBorder.none,
- icon: Icon(
- FontAwesomeIcons.user,
- color: Colors.black,
- ),
- hintText: "Nama",
- hintStyle: TextStyle(
- fontFamily: "WorkSansSemiBold", fontSize: 16.0),
- ),
- ),
- ),
- Container(
- width: 250.0,
- height: 1.0,
- color: Colors.grey[400],
- ),
- Padding(
- padding: EdgeInsets.only(
- top: 20.0, bottom: 20.0, left: 25.0, right: 25.0),
- child: TextField(
- focusNode: myFocusNodeEmail,
- controller: signupEmailController,
- keyboardType: TextInputType.emailAddress,
- style: TextStyle(
- fontFamily: "WorkSansSemiBold",
- fontSize: 16.0,
- color: Colors.black),
- decoration: InputDecoration(
- border: InputBorder.none,
- icon: Icon(
- FontAwesomeIcons.envelope,
- color: Colors.black,
- ),
- hintText: "Email",
- hintStyle: TextStyle(
- fontFamily: "WorkSansSemiBold", fontSize: 16.0),
- ),
- ),
- ),
- Container(
- width: 250.0,
- height: 1.0,
- color: Colors.grey[400],
- ),
- Padding(
- padding: EdgeInsets.only(
- top: 20.0, bottom: 20.0, left: 25.0, right: 25.0),
- child: TextField(
- focusNode: myFocusNodePassword,
- controller: signupPasswordController,
- obscureText: _obscureTextSignup,
- style: TextStyle(
- fontFamily: "WorkSansSemiBold",
- fontSize: 16.0,
- color: Colors.black),
- decoration: InputDecoration(
- border: InputBorder.none,
- icon: Icon(
- FontAwesomeIcons.lock,
- color: Colors.black,
- ),
- hintText: "Password",
- hintStyle: TextStyle(
- fontFamily: "WorkSansSemiBold", fontSize: 16.0),
- suffixIcon: GestureDetector(
- onTap: _toggleSignup,
- child: Icon(
- _obscureTextSignup
- ? FontAwesomeIcons.eye
- : FontAwesomeIcons.eyeSlash,
- size: 15.0,
- color: Colors.black,
- ),
- ),
- ),
- ),
- ),
- Container(
- width: 250.0,
- height: 1.0,
- color: Colors.grey[400],
- ),
- Padding(
- padding: EdgeInsets.only(
- top: 20.0, bottom: 20.0, left: 25.0, right: 25.0),
- child: TextField(
- controller: signupConfirmPasswordController,
- obscureText: _obscureTextSignupConfirm,
- style: TextStyle(
- fontFamily: "WorkSansSemiBold",
- fontSize: 16.0,
- color: Colors.black),
- decoration: InputDecoration(
- border: InputBorder.none,
- icon: Icon(
- FontAwesomeIcons.lock,
- color: Colors.black,
- ),
- hintText: "Konfirmasi",
- hintStyle: TextStyle(
- fontFamily: "WorkSansSemiBold", fontSize: 16.0),
- suffixIcon: GestureDetector(
- onTap: _toggleSignupConfirm,
- child: Icon(
- _obscureTextSignupConfirm
- ? FontAwesomeIcons.eye
- : FontAwesomeIcons.eyeSlash,
- size: 15.0,
- color: Colors.black,
- ),
- ),
- ),
- ),
- ),
- ],
- ),
- ),
- ),
- Container(
- margin: EdgeInsets.only(top: 340.0),
- decoration: new BoxDecoration(
- borderRadius: BorderRadius.all(Radius.circular(5.0)),
- boxShadow: <BoxShadow>[
- BoxShadow(
- color: Theme.Colors.loginGradientStart,
- offset: Offset(1.0, 6.0),
- blurRadius: 20.0,
- ),
- BoxShadow(
- color: Theme.Colors.loginGradientEnd,
- offset: Offset(1.0, 6.0),
- blurRadius: 20.0,
- ),
- ],
- gradient: new LinearGradient(
- colors: [
- Theme.Colors.loginGradientEnd,
- Theme.Colors.loginGradientStart
- ],
- begin: const FractionalOffset(0.2, 0.2),
- end: const FractionalOffset(1.0, 1.0),
- stops: [0.0, 1.0],
- tileMode: TileMode.clamp),
- ),
- child: MaterialButton(
- highlightColor: Colors.transparent,
- splashColor: Theme.Colors.loginGradientEnd,
- //shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5.0))),
- child: Padding(
- padding: const EdgeInsets.symmetric(
- vertical: 10.0, horizontal: 42.0),
- child: Text(
- "DAFTAR",
- style: TextStyle(
- color: Colors.white,
- fontSize: 25.0,
- fontFamily: "WorkSansBold"),
- ),
- ),
- onPressed: () => showInSnackBar("SignUp button pressed")),
- ),
- ],
- ),
- ],
- ),
- );
- }
- void _onSignInButtonPress() {
- _pageController.animateToPage(0,
- duration: Duration(milliseconds: 500), curve: Curves.decelerate);
- }
- void _onSignUpButtonPress() {
- _pageController?.animateToPage(1,
- duration: Duration(milliseconds: 500), curve: Curves.decelerate);
- }
- void _toggleLogin() {
- setState(() {
- _obscureTextLogin = !_obscureTextLogin;
- });
- }
- void _toggleSignup() {
- setState(() {
- _obscureTextSignup = !_obscureTextSignup;
- });
- }
- void _toggleSignupConfirm() {
- setState(() {
- _obscureTextSignupConfirm = !_obscureTextSignupConfirm;
- });
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement