add login

lib/main.dart

@@ -9,6 +9,7 @@ import 'package:flutter_go/utils/shared_preferences.dart';
 import 'package:flutter_go/views/home.dart';
 import 'package:flutter_go/model/search_history.dart';
 import 'package:flutter_go/utils/analytics.dart' as Analytics;
+import 'package:flutter_go/views/login_page/login_page.dart';
 //import 'views/welcome_page/index.dart';
 
 const int ThemeColor = 0xFFC91B3A;
@@ -25,7 +26,8 @@ class MyApp extends StatelessWidget {
   }
   showWelcomePage() {
     // 暂时关掉欢迎介绍
-    return AppPage();
+    // return AppPage();
+    return LoginPage();
 //    bool showWelcome = sp.getBool(SharedPreferencesKeys.showWelcome);
 //    if (showWelcome == null || showWelcome == true) {
 //      return WelcomePage();

lib/routers/router_handler.dart

@@ -6,6 +6,7 @@ import '../widgets/404.dart';
 import 'package:flutter_go/components/full_screen_code_dialog.dart';
 import 'package:flutter_go/views/web_page/web_view_page.dart';
 import 'package:flutter_go/views/home.dart';
+import 'package:flutter_go/views/login_page/login_page.dart';
 
 // app的首页
 var homeHandler = new Handler(
@@ -26,6 +27,10 @@ var widgetNotFoundHandler = new Handler(
     handlerFunc: (BuildContext context, Map<String, List<String>> params) {
   return new WidgetNotFound();
 });
+var loginPageHandler = new Handler(
+    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
+  return LoginPage();
+});
 
 var fullScreenCodeDialog = new Handler(
     handlerFunc: (BuildContext context, Map<String, List<String>> params) {

lib/routers/routers.dart

@@ -12,6 +12,7 @@ class Routes {
   static String widgetDemo = '/widget-demo';
   static String codeView = '/code-view';
   static String webViewPage = '/web-view-page';
+  static String loginPage = '/loginpage';
 
   static void configureRoutes(Router router) {
     List widgetDemosList = new WidgetDemoList().getDemos();
@@ -22,6 +23,7 @@ class Routes {
 
     router.define('/category/:type', handler: categoryHandler);
     router.define('/category/error/404', handler: widgetNotFoundHandler);
+    router.define(loginPage, handler: loginPageHandler);
     router.define(codeView,handler:fullScreenCodeDialog);
     router.define(webViewPage,handler:webViewPageHand);
       widgetDemosList.forEach((demo) {

lib/views/login_page/login_page.dart

@@ -0,0 +1,218 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_spinkit/flutter_spinkit.dart';
+
+class LoginPage extends StatefulWidget {
+  @override
+  _LoginPageState createState() => _LoginPageState();
+}
+
+class _LoginPageState extends State<LoginPage> {
+  // 利用FocusNode和_focusScopeNode来控制焦点 可以通过FocusNode.of(context)来获取widget树中默认的_focusScopeNode
+  FocusNode _emailFocusNode = new FocusNode();
+  FocusNode _passwordFocusNode = new FocusNode();
+  FocusScopeNode _focusScopeNode = new FocusScopeNode();
+
+  GlobalKey<FormState> _signInFormKey = new GlobalKey();
+
+  bool isShowPassWord = false;
+  String username = '';
+  String password = '';
+
+// 创建登录界面的TextForm
+  Widget buildSignInTextForm() {
+    return new Container(
+      decoration: new BoxDecoration(
+        borderRadius: BorderRadius.all(Radius.circular(8)),
+      ),
+      width: MediaQuery.of(context).size.width * 0.8,
+      height: 190,
+      //  * Flutter提供了一个Form widget，它可以对输入框进行分组，然后进行一些统一操作，如输入内容校验、输入框重置以及输入内容保存。
+      child: new Form(
+        key: _signInFormKey,
+        child: new Column(
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            Flexible(
+              child: Padding(
+                padding: const EdgeInsets.only(
+                    left: 25, right: 25, top: 20, bottom: 20),
+                child: new TextFormField(
+                  //关联焦点
+                  focusNode: _emailFocusNode,
+                  onEditingComplete: () {
+                    if (_focusScopeNode == null) {
+                      _focusScopeNode = FocusScope.of(context);
+                    }
+                    _focusScopeNode.requestFocus(_passwordFocusNode);
+                  },
+
+                  decoration: new InputDecoration(
+                      icon: new Icon(
+                        Icons.email,
+                        color: Colors.black,
+                      ),
+                      hintText: "Github 登录名",
+                      border: InputBorder.none),
+                  style: new TextStyle(fontSize: 16, color: Colors.black),
+                  //验证
+                  validator: (value) {
+                    if (value.isEmpty) {
+                      return "登录名不可为空!";
+                    }
+                  },
+                  onSaved: (value) {
+                    setState(() {
+                      username = value;
+                    });
+                  },
+                ),
+              ),
+            ),
+            new Container(
+              height: 1,
+              width: MediaQuery.of(context).size.width * 0.75,
+              color: Colors.grey[400],
+            ),
+            Flexible(
+              child: Padding(
+                padding: const EdgeInsets.only(left: 25, right: 25, top: 20),
+                child: new TextFormField(
+                  focusNode: _passwordFocusNode,
+                  decoration: new InputDecoration(
+                    icon: new Icon(
+                      Icons.lock,
+                      color: Colors.black,
+                    ),
+                    hintText: "Github 登录密码",
+                    border: InputBorder.none,
+                    suffixIcon: new IconButton(
+                      icon: new Icon(
+                        Icons.remove_red_eye,
+                        color: Colors.black,
+                      ),
+                      onPressed: showPassWord,
+                    ),
+                  ),
+                  //输入密码，需要用*****显示
+                  obscureText: !isShowPassWord,
+                  style: new TextStyle(fontSize: 16, color: Colors.black),
+                  validator: (value) {
+                    if (value == null || value.isEmpty) {
+                      return "密码不可为空!";
+                    }
+                  },
+                  onSaved: (value) {
+                    setState(() {
+                      password = value;
+                    });
+                  },
+                ),
+              ),
+            ),
+            new Container(
+              height: 1,
+              width: MediaQuery.of(context).size.width * 0.75,
+              color: Colors.grey[400],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget buildSignInButton() {
+    return new GestureDetector(
+      child: new Container(
+        padding: EdgeInsets.only(left: 42, right: 42, top: 10, bottom: 10),
+        decoration: new BoxDecoration(
+            borderRadius: BorderRadius.all(Radius.circular(5)),
+            color: Theme.of(context).primaryColor),
+        child: new Text(
+          "LOGIN",
+          style: new TextStyle(fontSize: 25, color: Colors.white),
+        ),
+      ),
+      onTap: () {
+        // 利用key来获取widget的状态FormState,可以用过FormState对Form的子孙FromField进行统一的操作
+        if (_signInFormKey.currentState.validate()) {
+          // 如果输入都检验通过，则进行登录操作
+          Scaffold.of(context)
+              .showSnackBar(new SnackBar(content: new Text("执行登录操作")));
+          //调用所有自孩子的save回调，保存表单内容
+          _signInFormKey.currentState.save();
+        }
+      },
+    );
+  }
+
+// 点击控制密码是否显示
+  void showPassWord() {
+    setState(() {
+      isShowPassWord = !isShowPassWord;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: SingleChildScrollView(
+        child: Container(
+          height: MediaQuery.of(context).size.height,
+          width: MediaQuery.of(context).size.width,
+          color: Theme.of(context).primaryColor,
+          child: Center(
+            child: Container(
+              width: MediaQuery.of(context).size.width * 0.85,
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.all(Radius.circular(8.0)),
+                color: Colors.white,
+                image: DecorationImage(
+                  image: AssetImage(
+                    'assets/images/paimaiLogo.png',
+                  ),
+                  fit: BoxFit.scaleDown,
+                  alignment: Alignment.bottomRight,
+                ),
+              ),
+              child: Stack(
+                children: <Widget>[
+                  Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: <Widget>[
+                      SizedBox(height: 35.0),
+                      Image.asset(
+                        'assets/images/FlutterGo.png',
+                        fit: BoxFit.contain,
+                        width: 100.0,
+                        height: 100.0,
+                      ),
+                      buildSignInTextForm(),
+                      buildSignInButton(),
+                      SizedBox(height: 35.0),
+                    ],
+                  ),
+                  Positioned(
+                    top: 0,
+                    left: 0,
+                    bottom: 0,
+                    child: Opacity(
+                      opacity: .5,
+                      child: Container(
+                        width: MediaQuery.of(context).size.width * 0.85,
+                        decoration: BoxDecoration(
+                          borderRadius: BorderRadius.all(Radius.circular(8.0)),
+                          color: Colors.black,
+                        ),
+                        child: SpinKitPouringHourglass(color: Colors.white),
+                      ),
+                    ),
+                  )
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}