Flutter漂亮UI（Flutter-Auth）

image

原項目可以在https://github.com/abuanwar072/Welcome-Login-Signup-Page-Flutter找到，官方錄制了相應(yīng)的視頻在https://www.youtube.com/watch?v=ExKYjqgswJg&feature=youtu.be上，基于此編寫學(xué)習(xí)的過程猖败，本項目地址https://github.com/tianrandailove/flutter_auth辽聊。

實現(xiàn)歡迎頁

首先定義主題的顏色努潘，我們在lib目錄下創(chuàng)建constant目錄授帕，并創(chuàng)建color_constant.dart 文件鸭栖。

import 'package:flutter/material.dart';

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

準備資源文件巷查，在根目錄下創(chuàng)建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/

需要使用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

執(zhí)行 pub get 命令许师。
在lib目錄下創(chuàng)建pages/welcome目錄。
先看下welcome頁面的構(gòu)成僚匆，整個頁面由背景層和前景層組成微渠，因此整個界面使用stack布局，使用Positioned配合布局背景層咧擂，column布局前景層逞盆。在pages/welcome目錄下創(chuàng)建components目錄（存放背景層和前景層）。
在components目錄下創(chuàng)建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,
        ],
      ),
    );
  }

}

修改main.dart文件俯逾，刪除其他代碼，只保留 main函數(shù)和MyApp類的代碼舅逸，并替換home節(jié)點的內(nèi)容

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'),
          ),
        ),
      ),
    );
  }
}

運行App桌肴，如下：

image

在lib目錄下創(chuàng)建widgets目錄，在widgets目錄下創(chuàng)建rounded_button.dart文件琉历，這里實現(xiàn)一個圓角按鈕坠七，內(nèi)容如下。

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),
          ),
        ),
      ),
    );
  }
}

接下來在components目錄下創(chuàng)建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:(){
                },
              )
            ],
          ),
        )
    );
  }
}

修改main.dart文件，將Background節(jié)點的child設(shè)置成剛剛創(chuàng)建Body實例蝇恶。

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

運行App拳魁。

image.png

在welcome目錄下創(chuàng)建welcome.dart文件，將整個welcome頁面的渲染內(nèi)容放到這個文件中撮弧。

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(),
    );
  }
}

修改main.dart文件的home節(jié)點為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(),
    );
  }

實現(xiàn)登錄頁

在pages目錄下創(chuàng)建login目錄，在login下創(chuàng)建components目錄想虎。
登錄頁面和歡迎頁面一樣卦尊，采用背景層和前景層的布局方式。
在components目錄下創(chuàng)建background.dart文件實現(xiàn)背景層舌厨。

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,
        ],
      ),
    );
  }
}

在lib/widgets創(chuàng)建text_field_container.dart文件岂却，實現(xiàn)一個文本框容器。

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,
    );
  }
}

在lib/widgets下創(chuàng)建rounded_input_field.dart文件裙椭，實現(xiàn)一個自定義的文本輸入框躏哩。

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,
        ),
      ),
    );
  }
}

在lib/widgets下創(chuàng)建rounded_password_field.dart文件，實現(xiàn)一個人密碼輸入框揉燃。

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,
          ),
        ),
      ),
    );
  }
}

在lib/widgets下創(chuàng)建account_check.dart文件扫尺，實現(xiàn)文案組件。

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,
            ),
          ),
        )
      ],
    );
  }
}

在login/components目錄下創(chuàng)建body.dart實現(xiàn)前景層渲染炊汤。

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: () {
              },
            )
          ],
        ),
      ),
    );
  }
}

在login目錄下創(chuàng)建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(),
    );
  }
}

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

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

運行APP迈倍，并點擊登錄按鈕伤靠，會跳轉(zhuǎn)到登錄頁面。

image.png

實現(xiàn)注冊頁

在pages目錄下創(chuàng)建signup目錄啼染，在signup下創(chuàng)建components目錄宴合。
注冊頁面也是采用背景層和前景層的布局方式焕梅。
在components目錄下創(chuàng)建background.dart文件實現(xiàn)背景層。

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,
        ],
      ),
    );
  }
}

在components目錄下創(chuàng)建or_deivider.dart文件卦洽，實現(xiàn)分割線贞言。

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,
      ),
    );
  }
}

在components目錄下創(chuàng)建socal_icon.dart文件，用于實現(xiàn)社交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,
        ),
      ),
    );
  }
}

在components目錄下創(chuàng)建body.dart文件實現(xiàn)前景層蜗字。

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: () {},
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

在signup目錄下創(chuàng)建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(),
    );
  }
}

修改lib/pages/welcome/components/body.dart文件，為注冊按鈕添加點擊事件粗梭，添加注冊頁的路由争便。

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

運行App，點擊注冊按鈕即可進入注冊頁面断医。

image.png

注冊頁和登錄頁跳轉(zhuǎn)

修改lib/pages/login/components/body.dart文件滞乙，添加跳轉(zhuǎn)注冊頁邏輯。

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

修改lib/pages/signup/components/body.dart文件鉴嗤，添加跳轉(zhuǎn)登錄頁邏輯斩启。

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

運行App，可以在注冊頁和登錄頁互相跳轉(zhuǎn)醉锅。