0

android/app/build.gradle

@@ -26,7 +26,7 @@ apply plugin: 'kotlin-android'
 apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
 
 android {
-    compileSdkVersion flutter.compileSdkVersion
+    compileSdkVersion 33
     ndkVersion flutter.ndkVersion
 
     compileOptions {
@@ -40,7 +40,7 @@ android {
         // You can update the following values to match your application needs.
         // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
         minSdkVersion flutter.minSdkVersion
-        targetSdkVersion flutter.targetSdkVersion
+        targetSdkVersion 33
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
     }

android/build.gradle

@@ -6,7 +6,7 @@ buildscript {
     }
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:7.2.0'
+        classpath 'com.android.tools.build:gradle:7.2.2'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
     }
 }

android/gradle/wrapper/gradle-wrapper.properties

@@ -2,4 +2,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.5-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.3-bin.zip

lib/main.dart

@@ -20,7 +20,7 @@ class MyApp extends StatelessWidget {
       debugShowCheckedModeBanner: false,
       title: 'Flutter Auth',
       theme: Config.themeData,
-      initialRoute: Routes.login,
+      initialRoute: Routes.welcome,
       onGenerateRoute: Routes.onGenerateRoute,
     );
   }

lib/models/config.dart

@@ -11,8 +11,7 @@ class Config {
       scaffoldBackgroundColor: Colors.white,
       elevatedButtonTheme: ElevatedButtonThemeData(
         style: ElevatedButton.styleFrom(
-          elevation: 0,
-          primary: kPrimaryColor,
+          elevation: 0, backgroundColor: kPrimaryColor,
           shape: const StadiumBorder(),
           maximumSize: const Size(double.infinity, 56),
           minimumSize: const Size(double.infinity, 56),

lib/pages/background.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+
+/// Description: background for login and register page
+/// Time       : 08/24/2023 Thursday
+/// Author     : liuyuqi.gov@msn.cn
+class Background extends StatelessWidget {
+  Widget child;
+  String topImg, bottomImg;
+  Background(
+      {super.key,
+      required this.child,
+      this.topImg = "assets/images/main_top.png",
+      this.bottomImg = "assets/images/main_bottom.png"});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      resizeToAvoidBottomInset: false,
+      body: Container(
+        // color: Colors.green,
+        width: double.infinity,
+        height: MediaQuery.of(context).size.height,
+        child: Stack(
+          alignment: Alignment.center,
+          // alignment: Alignment.topCenter,
+          children: [
+            Positioned(
+                top: 0,
+                left: 0,
+                child: Image.asset(
+                  topImg,
+                  width: 120,
+                )),
+            // Positioned(
+            //     bottom: 0,
+            //     right: 0,
+            //     child: Image.asset(
+            //       bottomImg,
+            //       width: 120,
+            //     )),
+            SafeArea(
+                child: Container(
+              margin: const EdgeInsets.only(left: 20, right: 20),
+              child: child,
+            ))
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages/login_page.dart

@@ -1,4 +1,10 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_auth/models/config.dart';
+import 'package:flutter_auth/pages/background.dart';
+import 'package:flutter_auth/pages/register_page.dart';
+import 'package:flutter_auth/views/already_have_an_account_check.dart';
+import 'package:flutter_auth/views/responsive.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 
 /// Description: login page
 /// Time       : 08/24/2023 Thursday
@@ -13,8 +19,142 @@ class LoginPage extends StatefulWidget {
 class _LoginPageState extends State<LoginPage> {
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-        appBar: AppBar(title: const Text('Login Page')),
-        body: const Placeholder());
+    return Background(
+        child: SingleChildScrollView(
+      child: SafeArea(
+        child: Responsive(
+            mobile: buildLoginMobile(), desktop: buildLoginDesktop()),
+      ),
+    ));
+  }
+
+  Widget buildLoginDesktop() {
+    return Row(
+      children: [
+        Expanded(child: LoginTop()),
+        Expanded(
+            child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            SizedBox(
+              width: 450,
+              child: LoginForm(),
+            )
+          ],
+        ))
+      ],
+    );
+  }
+
+  Widget buildLoginMobile() {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        LoginTop(),
+        Row(
+          children: [
+            Spacer(),
+            Expanded(
+              child: LoginForm(),
+              flex: 8,
+            ),
+            Spacer()
+          ],
+        )
+      ],
+    );
+  }
+}
+
+class LoginForm extends StatelessWidget {
+  const LoginForm({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Form(
+      child: Column(
+        children: [
+          TextFormField(
+            keyboardType: TextInputType.emailAddress,
+            textInputAction: TextInputAction.next,
+            cursorColor: kPrimaryColor,
+            onSaved: (email) {},
+            decoration: InputDecoration(
+              hintText: "Your email",
+              prefixIcon: Padding(
+                padding: const EdgeInsets.all(defaultPadding),
+                child: Icon(Icons.person),
+              ),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.symmetric(vertical: defaultPadding),
+            child: TextFormField(
+              textInputAction: TextInputAction.done,
+              obscureText: true,
+              cursorColor: kPrimaryColor,
+              decoration: InputDecoration(
+                hintText: "Your password",
+                prefixIcon: Padding(
+                  padding: const EdgeInsets.all(defaultPadding),
+                  child: Icon(Icons.lock),
+                ),
+              ),
+            ),
+          ),
+          const SizedBox(height: defaultPadding),
+          Hero(
+            tag: "login_btn",
+            child: ElevatedButton(
+              onPressed: () {},
+              child: Text(
+                "Login".toUpperCase(),
+              ),
+            ),
+          ),
+          const SizedBox(height: defaultPadding),
+          AlreadyHaveAnAccountCheck(
+            press: () {
+              Navigator.push(
+                context,
+                MaterialPageRoute(
+                  builder: (context) {
+                    return RegisterPage();
+                  },
+                ),
+              );
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class LoginTop extends StatelessWidget {
+  const LoginTop({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Text(
+          "LOGIN",
+          style: TextStyle(fontWeight: FontWeight.bold),
+        ),
+        SizedBox(height: defaultPadding * 2),
+        Row(
+          children: [
+            const Spacer(),
+            Expanded(
+              flex: 8,
+              child: SvgPicture.asset("assets/icons/login.svg"),
+            ),
+            const Spacer(),
+          ],
+        ),
+        SizedBox(height: defaultPadding * 2),
+      ],
+    );
   }
 }

lib/pages/register_page.dart

@@ -1,4 +1,7 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_auth/models/config.dart';
+import 'package:flutter_auth/pages/background.dart';
+import 'package:flutter_auth/views/responsive.dart';
 
 /// Description: register page
 /// Time       : 08/24/2023 Thursday
@@ -13,8 +16,58 @@ class RegisterPage extends StatefulWidget {
 class _RegisterPageState extends State<RegisterPage> {
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-        appBar: AppBar(title: const Text('Register Page')),
-        body: const Placeholder());
+    return Background(
+        child: SingleChildScrollView(
+      child: Responsive(
+        desktop: buildRegisterDesktop(),
+        mobile: buildRegisterMobile(),
+      ),
+    ));
+  }
+
+  Widget buildRegisterDesktop() {
+    return Row(
+      children: [
+        Expanded(child: RegisterTop()),
+        Expanded(
+            child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            SizedBox(
+              width: 450,
+              child: RegisterForm(),
+            ),
+            SizedBox(
+              height: defaultPadding / 2,
+            ),
+            // SocalSigUp()
+          ],
+        ))
+      ],
+    );
+  }
+
+  Widget buildRegisterMobile() {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        RegisterTop(),
+        Row(
+          children: [
+            Spacer(),
+            Expanded(
+              child: RegisterForm(),
+              flex: 8,
+            ),
+            Spacer()
+          ],
+        )
+      ],
+    );
   }
 }
+
+class RegisterTop {
+}
+
+class RegisterForm {}

lib/pages/welcome/welcome_image.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_auth/models/config.dart';
+import 'package:flutter_svg/svg.dart';
+
+class WelcomeImage extends StatelessWidget {
+  const WelcomeImage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        const Text(
+          "欢迎使用app",
+          style: TextStyle(fontWeight: FontWeight.bold),
+        ),
+        const SizedBox(
+          height: defaultPadding * 2,
+        ),
+        Row(
+          children: [
+            const Spacer(),
+            Expanded(
+                flex: 8, // 1:8:1 根据屏幕宽度显示图片大小
+                child: SvgPicture.asset(
+                  "assets/icons/chat.svg",
+                )),
+            const Spacer()
+          ],
+        ),
+        const SizedBox(
+          height: defaultPadding * 2,
+        )
+      ],
+    );
+  }
+}

lib/pages/welcome/welcome_page.dart

@@ -0,0 +1,102 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_auth/models/config.dart';
+import 'package:flutter_auth/pages/login_page.dart';
+import 'package:flutter_auth/pages/register_page.dart';
+import 'package:flutter_auth/pages/welcome/welcome_image.dart';
+import 'package:flutter_auth/pages/background.dart';
+import 'package:flutter_auth/views/responsive.dart';
+
+/// Description: welcome page
+/// Time       : 08/24/2023 Thursday
+/// Author     : liuyuqi.gov@msn.cn
+class WelcomePage extends StatefulWidget {
+  const WelcomePage({super.key});
+
+  @override
+  State<WelcomePage> createState() => _WelcomePageState();
+}
+
+class _WelcomePageState extends State<WelcomePage> {
+  @override
+  Widget build(BuildContext context) {
+    return Background(
+        child: SingleChildScrollView(
+      child: SafeArea(
+        child: Responsive(
+            mobile: buildWelcomeMobile(), desktop: buildWelcomeDesktop()),
+      ),
+    ));
+  }
+
+  Widget buildWelcomeMobile() {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        const WelcomeImage(),
+        Row(
+          children: [
+            const Spacer(),
+            Expanded(
+              flex: 8,
+              child: buildLoginAndSignupBtn(),
+            ),
+            const Spacer()
+          ],
+        )
+      ],
+    );
+  }
+
+  Widget buildWelcomeDesktop() {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.end,
+      children: [
+        const Expanded(child: WelcomeImage()),
+        Expanded(
+            child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            SizedBox(
+              width: 450,
+              child: buildLoginAndSignupBtn(),
+            )
+          ],
+        ))
+      ],
+    );
+  }
+
+  Widget buildLoginAndSignupBtn() {
+    return Column(
+      children: [
+        Hero(
+          tag: "login_btn",
+          child: ElevatedButton(
+            child: const Text("登录"),
+            onPressed: () {
+              Navigator.push(context, MaterialPageRoute(builder: (context) {
+                return const LoginPage();
+              }));
+            },
+          ),
+        ),
+        const SizedBox(
+          height: 16,
+        ),
+        ElevatedButton(
+          onPressed: () {
+            Navigator.push(context, MaterialPageRoute(builder: (context) {
+              return const RegisterPage();
+            }));
+          },
+          style: ElevatedButton.styleFrom(
+              backgroundColor: kPrimaryLightColor, elevation: 0),
+          child: const Text(
+            "注册",
+            style: TextStyle(color: Colors.black),
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/pages/welcome_page.dart

@@ -1,20 +0,0 @@
-import 'package:flutter/material.dart';
-
-/// Description: welcome page
-/// Time       : 08/24/2023 Thursday
-/// Author     : liuyuqi.gov@msn.cn
-class WelcomePage extends StatefulWidget {
-  const WelcomePage({super.key});
-
-  @override
-  State<WelcomePage> createState() => _WelcomePageState();
-}
-
-class _WelcomePageState extends State<WelcomePage> {
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-        appBar: AppBar(title: const Text('Welcome Page')),
-        body: const Placeholder());
-  }
-}

lib/routes.dart

@@ -2,20 +2,24 @@ import 'package:flutter/material.dart';
 import 'package:flutter_auth/pages/home_page.dart';
 import 'package:flutter_auth/pages/login_page.dart';
 import 'package:flutter_auth/pages/register_page.dart';
+import 'package:flutter_auth/pages/welcome/welcome_page.dart';
 
 class Routes {
   static const String login = "/login";
   static const String home = "/home";
   static const String register = "/register";
+  static const String welcome = "/welcome";
 
   static MaterialPageRoute<dynamic> onGenerateRoute(RouteSettings settings) {
     switch (settings.name) {
       case home:
-        return MaterialPageRoute(builder: (_) => HomePage());
+        return MaterialPageRoute(builder: (_) => const HomePage());
       case login:
         return MaterialPageRoute(builder: (_) => const LoginPage());
       case register:
-        return MaterialPageRoute(builder: (_) => RegisterPage());
+        return MaterialPageRoute(builder: (_) => const RegisterPage());
+      case welcome:
+        return MaterialPageRoute(builder: (_) => const WelcomePage());
       default:
         return MaterialPageRoute(builder: (_) => const HomePage());
     }

lib/views/already_have_an_account_check.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/src/widgets/framework.dart';
+import 'package:flutter/src/widgets/placeholder.dart';
+import 'package:flutter_auth/models/config.dart';
+
+class AlreadyHaveAnAccountCheck extends StatelessWidget {
+  final bool login;
+  final Function? press;
+  const AlreadyHaveAnAccountCheck({
+    Key? key,
+    this.login = true,
+    required this.press,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: <Widget>[
+        Text(
+          login ? "Don’t have an Account ? " : "Already have an Account ? ",
+          style: const TextStyle(color: kPrimaryColor),
+        ),
+        GestureDetector(
+          onTap: press as void Function()?,
+          child: Text(
+            login ? "Sign Up" : "Sign In",
+            style: const TextStyle(
+              color: kPrimaryColor,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+        )
+      ],
+    );
+  }
+}

lib/views/background.dart

@@ -1,19 +0,0 @@
-import 'package:flutter/material.dart';
-
-/// Description: background for login and register page
-/// Time       : 08/24/2023 Thursday
-/// Author     : liuyuqi.gov@msn.cn
-class Background extends StatelessWidget {
-  Widget child;
-  String topImg, bottomImg;
-  Background(
-      {super.key, required this.child, this.topImg = "", this.bottomImg = ""});
-
-  @override
-  Widget build(BuildContext context) {
-    return Stack(
-      alignment: Alignment.center,
-      children: [],
-    );
-  }
-}