form login

lib/presentation/screens/login/view/login_form.dart

@@ -2,6 +2,7 @@ import 'package:farm_tpf/authentication/authentication.dart';
 import 'package:farm_tpf/data/repository/authentication_repository.dart';
 import 'package:farm_tpf/presentation/custom_widgets/widget_loading.dart';
 import 'package:farm_tpf/presentation/screens/login/bloc/login_bloc.dart';
+import 'package:farm_tpf/utils/const_color.dart';
 import 'package:flutter/material.dart';
 import 'package:formz/formz.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -32,15 +33,18 @@ class LoginForm extends StatelessWidget {
         }
       },
       child: Align(
-        alignment: const Alignment(0, -1 / 3),
         child: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
           mainAxisSize: MainAxisSize.min,
           children: [
             _UsernameInput(),
             const Padding(padding: EdgeInsets.all(12)),
             _PasswordInput(),
-            const Padding(padding: EdgeInsets.all(12)),
+            const Padding(padding: EdgeInsets.all(16)),
             _LoginButton(),
+            const Padding(padding: EdgeInsets.all(6)),
+            _forgotPasswordButton(),
+            _registerButton()
           ],
         ),
       ),
@@ -48,22 +52,72 @@ class LoginForm extends StatelessWidget {
   }
 }
 
+Widget _forgotPasswordButton() {
+  return Align(
+      alignment: Alignment.centerRight,
+      child: FlatButton(
+          child: Text(
+            'Quên mật khẩu ?',
+          ),
+          onPressed: () {}));
+}
+
+Widget _registerButton() {
+  return Align(
+      alignment: Alignment.bottomCenter,
+      child: FlatButton(
+          child: RichText(
+            text: new TextSpan(
+              style: new TextStyle(
+                fontSize: 14.0,
+                color: Colors.black,
+              ),
+              children: <TextSpan>[
+                new TextSpan(text: 'Không có tài khoản? '),
+                new TextSpan(
+                    text: 'Tạo mới.',
+                    style: new TextStyle(
+                        fontWeight: FontWeight.bold,
+                        color: COLOR_CONST.DEFAULT)),
+              ],
+            ),
+          ),
+          onPressed: () {}));
+}
+
 class _UsernameInput extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return BlocBuilder<LoginBloc, LoginState>(
       buildWhen: (previous, current) => previous.username != current.username,
       builder: (context, state) {
-        return TextField(
-          key: const Key('loginForm_usernameInput_textField'),
-          onChanged: (username) =>
-              context.bloc<LoginBloc>().add(LoginUsernameChanged(username)),
-          decoration: InputDecoration(
-            labelText: 'Tên đăng nhập',
-            errorText:
-                state.username.invalid ? 'Vui lòng nhập tên đăng nhập' : null,
-          ),
-        );
+        return Container(
+            height: 50,
+            padding: EdgeInsets.symmetric(horizontal: 17),
+            decoration: BoxDecoration(
+                shape: BoxShape.rectangle,
+                borderRadius: BorderRadius.circular(10),
+                color: COLOR_CONST.GRAY7),
+            child: Center(
+              child: TextFormField(
+                onChanged: (username) => context
+                    .bloc<LoginBloc>()
+                    .add(LoginUsernameChanged(username)),
+                autovalidate: true,
+                validator: (_) {
+                  return state.username.invalid
+                      ? 'Vui lòng nhập tên đăng nhập'
+                      : null;
+                },
+                maxLines: 1,
+                keyboardType: TextInputType.text,
+                obscureText: false,
+                textAlign: TextAlign.left,
+                decoration: InputDecoration.collapsed(
+                  hintText: 'Tên đăng nhập',
+                ),
+              ),
+            ));
       },
     );
   }
@@ -75,16 +129,33 @@ class _PasswordInput extends StatelessWidget {
     return BlocBuilder<LoginBloc, LoginState>(
       buildWhen: (previous, current) => previous.password != current.password,
       builder: (context, state) {
-        return TextField(
-          key: const Key('loginForm_passwordInput_textField'),
-          onChanged: (password) =>
-              context.bloc<LoginBloc>().add(LoginPasswordChanged(password)),
-          obscureText: true,
-          decoration: InputDecoration(
-            labelText: 'Mật khẩu',
-            errorText: state.password.invalid ? 'Vui lòng nhập mật khẩu' : null,
-          ),
-        );
+        return Container(
+            height: 50,
+            padding: EdgeInsets.symmetric(horizontal: 17),
+            decoration: BoxDecoration(
+                shape: BoxShape.rectangle,
+                borderRadius: BorderRadius.circular(10),
+                color: COLOR_CONST.GRAY7),
+            child: Center(
+              child: TextFormField(
+                onChanged: (password) => context
+                    .bloc<LoginBloc>()
+                    .add(LoginPasswordChanged(password)),
+                autovalidate: true,
+                validator: (_) {
+                  return state.password.invalid
+                      ? 'Vui lòng nhập mật khẩu'
+                      : null;
+                },
+                maxLines: 1,
+                keyboardType: TextInputType.text,
+                obscureText: false,
+                textAlign: TextAlign.left,
+                decoration: InputDecoration.collapsed(
+                  hintText: 'Mật khẩu',
+                ),
+              ),
+            ));
       },
     );
   }
@@ -96,17 +167,26 @@ class _LoginButton extends StatelessWidget {
     return BlocBuilder<LoginBloc, LoginState>(
       buildWhen: (previous, current) => previous.status != current.status,
       builder: (context, state) {
-        return state.status.isSubmissionInProgress
-            ? const CircularProgressIndicator()
-            : RaisedButton(
-                key: const Key('loginForm_continue_raisedButton'),
-                child: const Text('Đăng nhập'),
-                onPressed: state.status.isValidated
-                    ? () {
-                        context.bloc<LoginBloc>().add(const LoginSubmitted());
-                      }
-                    : null,
-              );
+        return SizedBox(
+          width: double.infinity,
+          height: 55,
+          child: FlatButton(
+            onPressed: () {
+              if (state.status.isValidated) {
+                context.bloc<LoginBloc>().add(const LoginSubmitted());
+              }
+            },
+            color: state.status.isValidated
+                ? COLOR_CONST.DEFAULT
+                : COLOR_CONST.GRAY1_50,
+            shape: RoundedRectangleBorder(
+              borderRadius: new BorderRadius.circular(7.0),
+            ),
+            child: Text(
+              'Đăng nhập'.toUpperCase(),
+            ),
+          ),
+        );
       },
     );
   }

lib/presentation/screens/login/view/login_page.dart

@@ -2,8 +2,10 @@ import 'package:farm_tpf/data/repository/authentication_repository.dart';
 import 'package:farm_tpf/presentation/screens/login/bloc/login_bloc.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter/material.dart';
+import 'package:keyboard_dismisser/keyboard_dismisser.dart';
 
 import 'login_form.dart';
+import 'widget_top_welcome.dart';
 
 class LoginPage extends StatelessWidget {
   static Route route() {
@@ -11,20 +13,21 @@ class LoginPage extends StatelessWidget {
   }
 
   @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      body: Padding(
-        padding: const EdgeInsets.all(12),
-        child: BlocProvider(
-          create: (context) {
-            return LoginBloc(
-              authenticationRepository:
-                  RepositoryProvider.of<AuthenticationRepository>(context),
-            );
-          },
-          child: LoginForm(),
+  Widget build(BuildContext context) => KeyboardDismisser(
+          child: Scaffold(
+        body: Padding(
+          padding: const EdgeInsets.all(12),
+          child: BlocProvider(
+            create: (context) {
+              return LoginBloc(
+                authenticationRepository:
+                    RepositoryProvider.of<AuthenticationRepository>(context),
+              );
+            },
+            child: ListView(
+              children: <Widget>[WidgetTopWelcome(), LoginForm()],
+            ),
+          ),
         ),
-      ),
-    );
-  }
+      ));
 }

lib/presentation/screens/login/view/widget_top_welcome.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+
+class WidgetTopWelcome extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        SizedBox(
+          height: 41,
+        ),
+        SizedBox(
+          width: 172,
+          child: FlutterLogo(
+            size: 170,
+          ),
+        ),
+        SizedBox(
+          height: 40,
+        ),
+        Text("Ứng dụng"),
+        Text("Mô tả chi tiết ứng dụng"),
+        SizedBox(
+          height: 30,
+        )
+      ],
+    );
+  }
+}

pubspec.lock

@@ -310,6 +310,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "3.3.0"
+  keyboard_dismisser:
+    dependency: "direct main"
+    description:
+      name: keyboard_dismisser
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.2"
   logging:
     dependency: transitive
     description:

pubspec.yaml

@@ -17,6 +17,7 @@ dependencies:
   equatable: ^1.2.0
   dio: 3.0.9
   formz: ^0.3.0
+  keyboard_dismisser: ^1.0.2
 
 dev_dependencies:
   flutter_test: