Flutter漂亮UI（Flutter-Auth）

原項目可以在https://github.com/abuanwar072/Welcome-Login-Signup-Page-Flutter找到，官方錄製了相應的視頻在https://www.youtube.com/watch?v=ExKYjqgswJg&feature=youtu.be上，基於此編寫學習的過程，本項目地址https://github.com/tianrandailove/flutter_auth。

實現歡迎頁

1. 首先定義主題的顏色，我們在lib目錄下創建constant目錄，並創建color_constant.dart 文件。

import 'package:flutter/material.dart';

const kPrimaryColor = Color(0xFF6F35A5); //深色
const kPrimaryLightColor = Color(0xFFF1E6FF); //淺色

2. 準備資源文件，在根目錄下創建assets文件，並將資源拷貝到這裏，並編輯pubspec.yaml文件配置資源文件的引用。

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/
    - assets/icons/

3. 需要使用flutter_svg渲染svg資源，編輯pubspec.yaml文件，引入flutter_svg包。

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.3
  flutter_svg: ^0.17.4

dev_dependencies:
  flutter_test:
    sdk: flutter

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

4. 執行 pub get 命令。
5. 在lib目錄下創建pages/welcome目錄。
6. 先看下welcome頁面的構成，整個頁面由背景層和前景層組成，因此整個界面使用stack佈局，使用Positioned配合佈局背景層，column佈局前景層。在pages/welcome目錄下創建components目錄（存放背景層和前景層）。
7. 在components目錄下創建background.dart 文件，該文件用於渲染welcome頁面背景。

import 'package:flutter/material.dart';

class Background extends StatelessWidget{
  final Widget child;

  const Background({Key key,@required this.child}):super(key:key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      height: size.height,
      width: double.infinity,
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Positioned(
            top: 0,
            left: 0,
            child: Image.asset("assets/images/main_top.png",
            width: size.width*0.3,),
          ),
          Positioned(
            bottom: 0,
              left: 0,
            child: Image.asset("assets/images/main_bottom.png",
            width: size.width*0.2,),
          )
          ,
          child,
        ],
      ),
    );
  }

}

8. 修改main.dart文件，刪除其他代碼，只保留 main函數和MyApp類的代碼，並替換home節點的內容

import 'package:flutter/material.dart';
import 'package:flutterauth/pages/welcome/components/background.dart';
import 'package:flutterauth/pages/welcome/welcome.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Auth',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        body: Background(
          child: Center(
            child: Text('WELCOME'),
          ),
        ),
      ),
    );
  }
}

9. 運行App，如下：

10. 在lib目錄下創建widgets目錄，在widgets目錄下創建rounded_button.dart文件，這裏實現一個圓角按鈕，內容如下。

import 'package:flutter/material.dart';
import 'package:flutterauth/constant/color_constant.dart';

class RoundedButton extends StatelessWidget {
  final String text;
  final Function press;
  final Color color, textColor;

  const RoundedButton(
      {Key key,
      this.text,
      this.press,
      this.color = kPrimaryColor,
      this.textColor = Colors.white})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      margin: EdgeInsets.symmetric(
        vertical: 10,
      ),
      width: size.width * 0.8,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(29),
        child: FlatButton(
          padding: EdgeInsets.symmetric(vertical: 20, horizontal: 40),
          color: color,
          onPressed: press,
          child: Text(
            text,
            style: TextStyle(color: textColor),
          ),
        ),
      ),
    );
  }
}

11. 接下來在components目錄下創建body.dart 文件，該文件用於渲染前景層。

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:flutterauth/constant/color_constant.dart';
import 'package:flutterauth/pages/login/login.dart';
import 'package:flutterauth/pages/signup/sign_up.dart';
import 'package:flutterauth/pages/welcome/components/background.dart';
import 'package:flutterauth/pages/widgets/rounded_button.dart';

class Body extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Background(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("WELCOME",
              style: TextStyle(fontWeight:FontWeight.bold),),
              SizedBox(height: size.height*0.05,),
              SvgPicture.asset("assets/icons/chat.svg",height: size.height*0.45,),
              SizedBox(height: size.height*0.05,),
              RoundedButton(
                text: "SIGN IN",
                press: (){
                },
              ),
              RoundedButton(
                text:"SIGN UP",
                color: kPrimaryLightColor,
                textColor: Colors.black,
                press:(){
                },
              )
            ],
          ),
        )
    );
  }
}

12. 修改main.dart文件，將Background節點的child設置成剛剛創建Body實例。

home: Scaffold(
        body: Background(
          child:Body(),
        ),
      ),

13. 運行App。

14. 在welcome目錄下創建welcome.dart文件，將整個welcome頁面的渲染內容放到這個文件中。

import 'package:flutter/material.dart';
import 'package:flutterauth/pages/welcome/components/body.dart';

class Welcome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Body(),
    );
  }
}

15. 修改main.dart文件的home節點爲Welcome實例。

Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Auth',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Welcome(),
    );
  }

實現登錄頁

1. 在pages目錄下創建login目錄，在login下創建components目錄。
2. 登錄頁面和歡迎頁面一樣，採用背景層和前景層的佈局方式。
3. 在components目錄下創建background.dart文件實現背景層。

import 'package:flutter/material.dart';

class Background extends StatelessWidget {
  final Widget child; //前景層元素做爲子元素
  const Background({Key key, @required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      width: double.infinity,
      height: size.height,
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Positioned(
            top: 0,
            left: 0,
            child: Image.asset(
              "assets/images/main_top.png",
              width: size.width * 0.35,
            ),
          ),
          Positioned(
            bottom: 0,
            right: 0,
            child: Image.asset(
              "assets/images/login_bottom.png",
              width: size.width * 0.4,
            ),
          ),
          child,
        ],
      ),
    );
  }
}

4. 在lib/widgets創建text_field_container.dart文件，實現一個文本框容器。

import 'package:flutter/material.dart';
import 'package:flutterauth/constant/color_constant.dart';

class TextFieldContainer extends StatelessWidget {
  final Widget child;

  const TextFieldContainer({Key key, @required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10),
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
      width: size.width * 0.8,
      decoration: BoxDecoration(
          color: kPrimaryLightColor, borderRadius: BorderRadius.circular(29)),
      child: child,
    );
  }
}

5. 在lib/widgets下創建rounded_input_field.dart文件，實現一個自定義的文本輸入框。

import 'package:flutter/material.dart';
import 'package:flutterauth/constant/color_constant.dart';
import 'package:flutterauth/pages/widgets/text_field_container.dart';

class RoundedInputField extends StatelessWidget {
  final String hintText;
  final IconData icon;
  final ValueChanged<String> onChanged;

  const RoundedInputField({
    Key key,
    this.hintText,
    this.icon = Icons.person,
    this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFieldContainer(
      child: TextField(
        onChanged: onChanged,
        cursorColor: kPrimaryColor,
        decoration: InputDecoration(
          icon: Icon(icon,color: kPrimaryColor,),
          hintText: hintText,
          border: InputBorder.none,
        ),
      ),
    );
  }
}

6. 在lib/widgets下創建rounded_password_field.dart文件，實現一個人密碼輸入框。

import 'package:flutter/material.dart';
import 'package:flutterauth/constant/color_constant.dart';
import 'package:flutterauth/pages/widgets/text_field_container.dart';

class RoundedPasswordField extends StatelessWidget {
  final ValueChanged<String> onChanged;

  const RoundedPasswordField({
    Key key,
    this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFieldContainer(
      child: TextField(
        obscureText: true,
        onChanged: onChanged,
        cursorColor: kPrimaryColor,
        decoration: InputDecoration(
          icon: Icon(
            Icons.lock,
            color: kPrimaryColor,
          ),
          hintText: "Password",
          border: InputBorder.none,
          suffixIcon: Icon(
            Icons.visibility,
            color: kPrimaryColor,
          ),
        ),
      ),
    );
  }
}

7. 在lib/widgets下創建account_check.dart文件，實現文案組件。

import 'package:flutter/material.dart';
import 'package:flutterauth/constant/color_constant.dart';

class AccountCheck extends StatelessWidget {
  final bool login;
  final Function press;

  const AccountCheck({
    Key key,
    this.login = true,
    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: TextStyle(color: kPrimaryColor),
        ),
        GestureDetector(
          onTap: press,
          child: Text(
            login ? "Sign Up" : "Sign In",
            style: TextStyle(
              color: kPrimaryColor,
              fontWeight: FontWeight.bold,
            ),
          ),
        )
      ],
    );
  }
}

8. 在login/components目錄下創建body.dart實現前景層渲染。

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutterauth/pages/login/components/background.dart';
import 'package:flutterauth/pages/signup/sign_up.dart';
import 'package:flutterauth/pages/widgets/account_check.dart';
import 'package:flutterauth/pages/widgets/rounded_button.dart';
import 'package:flutterauth/pages/widgets/rounded_input_field.dart';
import 'package:flutterauth/pages/widgets/rounded_password_field.dart';

class Body extends StatelessWidget {
  const Body({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Background(
      child: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Text(
              "LOGIN",
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(
              height: size.height * 0.03,
            ),
            SvgPicture.asset(
              "assets/icons/login.svg",
              height: size.height * 0.35,
            ),
            SizedBox(
              height: size.height * 0.03,
            ),
            RoundedInputField(
              hintText: "Your Email",
              onChanged: (value) {},
            ),
            RoundedPasswordField(
              onChanged: (value) {},
            ),
            RoundedButton(
              text: "LOGIN",
              press: () {},
            ),
            SizedBox(
              height: size.height * 0.03,
            ),
            AccountCheck(
              press: () {
              },
            )
          ],
        ),
      ),
    );
  }
}

9. 在login目錄下創建login.dart文件，渲染整個登錄頁面。

import 'package:flutter/material.dart';
import 'package:flutterauth/pages/login/components/body.dart';

class Login extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Body(),
    );
  }
}

10. 修改lib/pages/welcome/components/body.dart文件，修改登錄按鈕的點擊事件，添加登錄頁的路由。

RoundedButton(
                text: "SIGN IN",
                press: (){
                  Navigator.push(context, MaterialPageRoute(
                    builder: (context){
                      return Login();
                    }
                  ));
                },
              ),

11. 運行APP，並點擊登錄按鈕，會跳轉到登錄頁面。

實現註冊頁

1. 在pages目錄下創建signup目錄，在signup下創建components目錄。
2. 註冊頁面也是採用背景層和前景層的佈局方式。
3. 在components目錄下創建background.dart文件實現背景層。

import 'package:flutter/material.dart';

class Background extends StatelessWidget {
  final Widget child;

  const Background({
    Key key,
    @required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      height: size.height,
      width: double.infinity,
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Positioned(
            top: 0,
            left: 0,
            child: Image.asset(
              "assets/images/signup_top.png",
              width: size.width * 0.35,
            ),
          ),
          Positioned(
            bottom: 0,
            left: 0,
            child: Image.asset(
              "assets/images/main_bottom.png",
              width: size.width * 0.25,
            ),
          ),
          child,
        ],
      ),
    );
  }
}

4. 在components目錄下創建or_deivider.dart文件，實現分割線。

import 'package:flutter/material.dart';
import 'package:flutterauth/constant/color_constant.dart';

class OrDivider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      margin: EdgeInsets.symmetric(vertical: size.height * 0.02),
      width: size.width * 0.8,
      child: Row(
        children: <Widget>[
          buildDivider(),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10),
            child: Text(
              "OR",
              style: TextStyle(
                color: kPrimaryColor,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
          buildDivider(),
        ],
      ),
    );
  }

  Expanded buildDivider() {
    return Expanded(
      child: Divider(
        color: Color(0xffd9d9d9),
        height: 1.5,
      ),
    );
  }
}

5. 在components目錄下創建socal_icon.dart文件，用於實現社交icon渲染。

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutterauth/constant/color_constant.dart';

class SocalIcon extends StatelessWidget {
  final String iconSrc;
  final Function press;

  const SocalIcon({
    Key key,
    this.press,
    this.iconSrc,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: press,
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 10),
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(
          border: Border.all(width: 2, color: kPrimaryLightColor),
          shape: BoxShape.circle,
        ),
        child: SvgPicture.asset(
          iconSrc,
          height: 20,
          width: 20,
        ),
      ),
    );
  }
}

6. 在components目錄下創建body.dart文件實現前景層。

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutterauth/pages/login/login.dart';
import 'package:flutterauth/pages/signup/components/background.dart';
import 'package:flutterauth/pages/signup/components/or_divider.dart';
import 'package:flutterauth/pages/signup/components/socal_icon.dart';
import 'package:flutterauth/pages/widgets/account_check.dart';
import 'package:flutterauth/pages/widgets/rounded_button.dart';
import 'package:flutterauth/pages/widgets/rounded_input_field.dart';
import 'package:flutterauth/pages/widgets/rounded_password_field.dart';

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Background(
      child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "SIGNUP",
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(
              height: size.height * 0.03,
            ),
            SvgPicture.asset(
              "assets/icons/signup.svg",
              height: size.height * 0.35,
            ),
            RoundedInputField(
              hintText: "Your Email",
              onChanged: (value) {},
            ),
            RoundedPasswordField(
              onChanged: (value) {},
            ),
            RoundedButton(
              text: "SIGNUP",
              press: () {},
            ),
            SizedBox(
              height: size.height * 0.03,
            ),
            AccountCheck(
              login: false,
              press: () {
              },
            ),
            OrDivider(),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SocalIcon(
                  iconSrc: "assets/icons/facebook.svg",
                  press: () {},
                ),
                SocalIcon(
                  iconSrc: "assets/icons/twitter.svg",
                  press: () {},
                ),
                SocalIcon(
                  iconSrc: "assets/icons/google-plus.svg",
                  press: () {},
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

7. 在signup目錄下創建sign_up.dart文件，渲染整個註冊頁面。

import 'package:flutter/material.dart';

import 'components/body.dart';

class SignUp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Body(),
    );
  }
}

8. 修改lib/pages/welcome/components/body.dart文件，爲註冊按鈕添加點擊事件，添加註冊頁的路由。

RoundedButton(
                text:"SIGN UP",
                color: kPrimaryLightColor,
                textColor: Colors.black,
                press:(){
                  Navigator.push(context, MaterialPageRoute(
                    builder: (context){
                      return SignUp();
                    }
                  ));
                },
              )

9. 運行App，點擊註冊按鈕即可進入註冊頁面。

   
   

註冊頁和登錄頁跳轉

1. 修改lib/pages/login/components/body.dart文件，添加跳轉註冊頁邏輯。

AccountCheck(
              press: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) {
                  return SignUp();
                }));
              },
            )

2. 修改lib/pages/signup/components/body.dart文件，添加跳轉登錄頁邏輯。

AccountCheck(
              login: false,
              press: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) {
                  return Login();
                }));
              },
            )

3. 運行App，可以在註冊頁和登錄頁互相跳轉。