update login and register screen

hirosumee · Dec 4, 2019 · 95b68c7 · 95b68c7
1 parent 9e0579e
commit 95b68c7
Show file tree

Hide file tree

Showing 7 changed files with 239 additions and 19 deletions.
diff --git a/lib/components/CustomInput.dart b/lib/components/CustomInput.dart
@@ -3,24 +3,34 @@ import 'package:flutter/material.dart';
 
 class CustomInput extends StatelessWidget {
   String labelText;
-  CustomInput({ this.labelText });
+  Function validator;
+  bool obscure;
+  Function onChanged;
+  TextEditingController controller;
+
+  CustomInput({this.labelText, this.validator, this.obscure = false, this.onChanged, this.controller});
+
   @override
   Widget build(BuildContext context) {
     return TextFormField(
       // The validator receives the text that the user has entered.
-      validator: (value) {
-        if (value.isEmpty) {
-          return 'Please enter some text';
-        }
-        return null;
-      },
+      controller: this.controller,
+      validator: this.validator,
+      obscureText: this.obscure,
+      onChanged: this.onChanged,
       decoration: InputDecoration(
           border: OutlineInputBorder(
-              borderSide:
-                  BorderSide(color: Theme.of(context).primaryColor)),
+              borderSide: BorderSide(color: Theme.of(context).primaryColor)),
           labelText: labelText,
           labelStyle: TextStyle(fontSize: 17.0),
           hasFloatingPlaceholder: true),
     );
   }
+
+  static requiredValidator(String value) {
+    if (value.isEmpty) {
+      return 'Please enter somethings !';
+    }
+    return null;
+  }
 }
diff --git a/lib/components/LoginForm.dart b/lib/components/LoginForm.dart
@@ -1,6 +1,9 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_app/components/CustomInput.dart';
+import 'package:flutter_app/screens/RegisterScreen.dart';
+
+import 'SizeRoute.dart';
 
 class LoginForm extends StatefulWidget {
   @override
@@ -19,24 +22,41 @@ class _LoginFormState extends State<LoginForm> {
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
-          Text('Login'),
+          Text(
+            'LOGIN SCREEN',
+            style: TextStyle(
+                fontSize: 22, fontWeight: FontWeight.w500, letterSpacing: 1.0),
+          ),
           Padding(
-            padding: EdgeInsets.only(top: 10),
+            padding: EdgeInsets.only(top: 20),
           ),
           CustomInput(
             labelText: 'Username',
+            validator: (String value) {
+              if (value.isEmpty) {
+                return 'Please enter your username.';
+              }
+              return null;
+            },
           ),
           Padding(
             padding: EdgeInsets.only(top: 10),
           ),
           CustomInput(
             labelText: 'Password',
+            obscure: true,
+            validator: (String value) {
+              if (value.isEmpty) {
+                return 'Please enter your password.';
+              }
+              return null;
+            },
           ),
           Padding(
-            padding: EdgeInsets.only(top: 10),
+            padding: EdgeInsets.only(top: 20),
           ),
           ButtonTheme(
-            minWidth: 200,
+            minWidth: 240,
             height: 50,
             child: RaisedButton(
               onPressed: () {
@@ -47,9 +67,22 @@ class _LoginFormState extends State<LoginForm> {
               },
               child: Text(
                 'Login',
-                style: TextStyle(fontSize: 17),
+                style: Theme.of(context).textTheme.button,
               ),
             ),
+          ),
+          Padding(
+            padding: EdgeInsets.only(top: 10),
+          ),
+          InkWell(
+            child: Text(
+              'Is it your first time?',
+              style: Theme.of(context).textTheme.display1,
+            ),
+            onTap: () {
+              Navigator.of(context).pop();
+              Navigator.of(context).push(SizeRoute(page: RegisterScreen()));
+            },
           )
         ],
       ),

diff --git a/lib/components/RegisterForm.dart b/lib/components/RegisterForm.dart
@@ -0,0 +1,115 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_app/components/SizeRoute.dart';
+import 'package:flutter_app/screens/LoginScreen.dart';
+import 'package:flutter_app/screens/RegisterScreen.dart';
+
+import 'CustomInput.dart';
+
+class RegisterForm extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() {
+    return _RegisterFormState();
+  }
+}
+
+class _RegisterFormState extends State<RegisterForm> {
+  final _formKey = GlobalKey<FormState>();
+  final _passwordController = TextEditingController();
+  @override
+  Widget build(BuildContext context) {
+    return Form(
+      key: _formKey,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: <Widget>[
+          Text(
+            'REGISTER SCREEN',
+            style: TextStyle(
+                fontSize: 22, fontWeight: FontWeight.w500, letterSpacing: 1.0),
+          ),
+          Padding(
+            padding: EdgeInsets.only(top: 20),
+          ),
+          CustomInput(
+            labelText: 'Username',
+            validator: (String value) {
+              if (value.isEmpty) {
+                return 'Please enter your username.';
+              }
+              return null;
+            },
+          ),
+          Padding(
+            padding: EdgeInsets.only(top: 10),
+          ),
+          CustomInput(
+            labelText: 'Password',
+            obscure: true,
+            controller: _passwordController,
+            validator: (String value) {
+              if (value.isEmpty) {
+                return 'Please enter your password.';
+              }
+              return null;
+            },
+          ),
+          Padding(
+            padding: EdgeInsets.only(top: 10),
+          ),
+          CustomInput(
+            labelText: 'Confirm Password',
+            obscure: true,
+            validator: (String value) {
+              if (value.isEmpty) {
+                return 'Please enter your password.';
+              }
+              if(value != _passwordController.text) {
+                return 'Confirm password must be match password';
+              }
+              return null;
+            },
+          ),
+          Padding(
+            padding: EdgeInsets.only(top: 20),
+          ),
+          ButtonTheme(
+            minWidth: 240,
+            height: 50,
+            child: RaisedButton(
+              onPressed: () {
+                if (_formKey.currentState.validate()) {
+                  Scaffold.of(context)
+                      .showSnackBar(SnackBar(content: Text('Processing Data')));
+                }
+              },
+              child: Text(
+                'Login',
+                style: Theme
+                    .of(context)
+                    .textTheme
+                    .button,
+              ),
+            ),
+          ),
+          Padding(
+            padding: EdgeInsets.only(top: 10),
+          ),
+          InkWell(
+            child: Text(
+              'Do you have a account ?',
+              style: Theme
+                  .of(context)
+                  .textTheme
+                  .display1,
+            ),
+            onTap: () {
+              Navigator.of(context).pop();
+              Navigator.of(context).push(SizeRoute(page: LoginScreen()));
+            },
+          )
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/components/SizeRoute.dart b/lib/components/SizeRoute.dart
@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+
+class SizeRoute extends PageRouteBuilder {
+  final Widget page;
+
+  SizeRoute({this.page})
+      : super(
+          pageBuilder: (
+            BuildContext context,
+            Animation<double> animation,
+            Animation<double> secondaryAnimation,
+          ) =>
+              page,
+          transitionsBuilder: (
+            BuildContext context,
+            Animation<double> animation,
+            Animation<double> secondaryAnimation,
+            Widget child,
+          ) =>
+              Align(
+            child: SizeTransition(
+              sizeFactor: animation,
+              child: child,
+            ),
+          ),
+        );
+}
diff --git a/lib/main.dart b/lib/main.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_app/constants/Constant.dart';
 import 'package:flutter_app/screens/LoginScreen.dart';
+import 'package:flutter_app/screens/RegisterScreen.dart';
 
 void main() => runApp(MyApp());
 
@@ -23,11 +24,21 @@ class MyApp extends StatelessWidget {
           brightness: Brightness.dark,
           primarySwatch: Colors.blue,
           primaryColor: Colors.blue,
-          textTheme: TextTheme(body1: TextStyle(color: Colors.blue, fontSize: 18.0))),
+          textTheme: TextTheme(
+              body1: TextStyle(color: Colors.blue, fontSize: 18.0),
+              button: TextStyle(
+                  fontSize: 18,
+                  fontWeight: FontWeight.w500,
+                  color: Colors.white),
+              display1: TextStyle(
+                  fontSize: 18,
+                  fontWeight: FontWeight.w500,
+                  color: Colors.blue))),
       initialRoute: '/',
       routes: {
         // When navigating to the "/" route, build the FirstScreen widget.
         '/': (context) => LoginScreen(),
+        '/register': (context) => RegisterScreen()
         // When navigating to the "/second" route, build the SecondScreen widget.
       },
     );

diff --git a/lib/screens/LoginScreen.dart b/lib/screens/LoginScreen.dart
@@ -1,7 +1,7 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_app/components/LoginForm.dart';
-import 'package:flutter_app/constants/Constant.dart';
+//import 'package:flutter_app/constants/Constant.dart';
 
 class LoginScreen  extends StatefulWidget{
   @override
@@ -14,9 +14,9 @@ class _LoginState extends State<LoginScreen> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        title: Text(TITLE),
-      ),
+//      appBar: AppBar(
+//        title: Text(TITLE),
+//      ),
       body: Center(
         child: Padding(
           padding: EdgeInsets.only(left: 10.0, right: 10.0),

diff --git a/lib/screens/RegisterScreen.dart b/lib/screens/RegisterScreen.dart
@@ -0,0 +1,24 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_app/components/RegisterForm.dart';
+
+class RegisterScreen extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() {
+    return _RegisterState();
+  }
+}
+
+class _RegisterState extends State<RegisterScreen> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(
+        child: Padding(
+          padding: EdgeInsets.only(left: 10.0, right: 10.0),
+          child: RegisterForm(),
+        ),
+      ),
+    );
+  }
+}