flutter編寫精美的登錄頁面

更新時(shí)間：2021年05月19日 11:37:49 作者：__卓原

這篇文章主要為大家詳細(xì)介紹了flutter編寫精美的登錄頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了flutter編寫精美的登錄頁面的具體代碼，供大家參考，具體內(nèi)容如下

先看效果圖;

源代碼已上傳到github

我們先看一下頁面 , 首先這個(gè)頁面,我們并沒有用到AppBar,當(dāng)然也就沒有自帶返回功能.
然后下面有個(gè)Login的文字以及一條橫線.

屏幕中上方是填寫帳號(hào)以及密碼的2個(gè)輸入框,密碼輸入框有隱藏和顯示密碼的按鈕.

下方是登錄按鈕以及其他登錄方式.

看一下主體布局:

 return Scaffold(
  body: Form(
   key: _formKey,
   child: ListView(
    padding: EdgeInsets.symmetric(horizontal: 22.0),
    children: <Widget>[
    SizedBox(
     height: kToolbarHeight,
    ),
    buildTitle(),
    buildTitleLine(),
    SizedBox(height: 70.0),
    buildEmailTextField(),
    SizedBox(height: 30.0),
    buildPasswordTextField(context),
    buildForgetPasswordText(context),
    SizedBox(height: 60.0),
    buildLoginButton(context),
    SizedBox(height: 30.0),
    buildOtherLoginText(),
    buildOtherMethod(context),
    buildRegisterText(context),
    ],
   )));

頁面在一個(gè)Scaffold中包裹著, 然后整體布局是縱向的,于是我們用ListView來做外層控件,因?yàn)槭怯休斎肟?所以我們又用了Form來包裹住整體.

標(biāo)題部分

buildTitle(),
buildTitleLine(),

分別實(shí)現(xiàn)了Login的文字組件和下方的一個(gè)橫線組件.

Login:

Padding(
  padding: EdgeInsets.all(8.0),
  child: Text(
  'Login',
  style: TextStyle(fontSize: 42.0),
  ),
 );

橫線:

Padding(
  padding: EdgeInsets.only(left: 12.0, top: 4.0),
  child: Align(
  alignment: Alignment.bottomLeft,
  child: Container(
   color: Colors.black,
   width: 40.0,
   height: 2.0,
  ),
  ),
 );

可以看到,都是用Padding做外層組件,前者包裹了一個(gè)Text,后者包裹了一個(gè)Container.

輸入框

TextFormField buildPasswordTextField(BuildContext context) {
 return TextFormField(
  onSaved: (String value) => _password = value,
  obscureText: _isObscure,
  validator: (String value) {
  if (value.isEmpty) {
   return '請(qǐng)輸入密碼';
  }
  },
  decoration: InputDecoration(
   labelText: 'Password',
   suffixIcon: IconButton(
    icon: Icon(
    Icons.remove_red_eye,
    color: _eyeColor,
    ),
    onPressed: () {
    setState(() {
     _isObscure = !_isObscure;
     _eyeColor = _isObscure
      ? Colors.grey
      : Theme.of(context).iconTheme.color;
    });
    })),
 );
 }

 TextFormField buildEmailTextField() {
 return TextFormField(
  decoration: InputDecoration(
  labelText: 'Emall Address',
  ),
  validator: (String value) {
  var emailReg = RegExp(
   r"[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?");
  if (!emailReg.hasMatch(value)) {
   return '請(qǐng)輸入正確的郵箱地址';
  }
  },
  onSaved: (String value) => _email = value,
 );
 }

用TextFormField 來實(shí)現(xiàn)輸入框, 帳號(hào)我們規(guī)定是郵箱,所以用了正則表達(dá)式來驗(yàn)證:

 var emailReg = RegExp(
  r"[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?");

如果不符合,在提交的時(shí)候會(huì)給出相應(yīng)的提示.

密碼輸入那里使用了判空的方法,多了一個(gè)顯示/隱藏密碼的按鈕:

 decoration: InputDecoration(
   labelText: 'Password',
   suffixIcon: IconButton(
    icon: Icon(
    Icons.remove_red_eye,
    color: _eyeColor,
    ),
    onPressed: () {
    setState(() {
     _isObscure = !_isObscure;
     _eyeColor = _isObscure
      ? Colors.grey
      : Theme.of(context).iconTheme.color;
    });
    })),

可以看到在decotation中設(shè)置,suffixIcon是在后面加一個(gè)圖標(biāo),這里給它一個(gè)點(diǎn)擊方法是改變是否顯示密碼的,并更改圖標(biāo)的顏色.

登錄

 Align buildLoginButton(BuildContext context) {
 return Align(
  child: SizedBox(
  height: 45.0,
  width: 270.0,
  child: RaisedButton(
   child: Text(
   'Login',
   style: Theme.of(context).primaryTextTheme.headline,
   ),
   color: Colors.black,
   onPressed: () {
   if (_formKey.currentState.validate()) {
    ///只有輸入的內(nèi)容符合要求通過才會(huì)到達(dá)此處
    _formKey.currentState.save();
    //TODO 執(zhí)行登錄方法
    print('email:$_email , assword:$_password');
   }
   },
   shape: StadiumBorder(side: BorderSide()),
  ),
  ),
 );
 }

登錄按鈕,是一個(gè)RaiseButton,點(diǎn)擊的時(shí)候,我們判斷輸入框內(nèi)容,符合條件會(huì)執(zhí)行登錄方法.

其他帳號(hào)登錄

 ButtonBar buildOtherMethod(BuildContext context) {
 return ButtonBar(
  alignment: MainAxisAlignment.center,
  children: _loginMethod
   .map((item) => Builder(
    builder: (context) {
     return IconButton(
      icon: Icon(item['icon'],
       color: Theme.of(context).iconTheme.color),
      onPressed: () {
      //TODO : 第三方登錄方法
      Scaffold.of(context).showSnackBar(new SnackBar(
       content: new Text("${item['title']}登錄"),
       action: new SnackBarAction(
       label: "取消",
       onPressed: () {},
       ),
      ));
      });
    },
    ))
   .toList(),
 );
 }

其他帳號(hào)登錄,這里我以facebook,twitter和google為例來實(shí)現(xiàn)的
ButtonBar是一個(gè)按鈕的組合,我們放了3個(gè)IconButton, 并在list中定義了支持的登錄方式. 點(diǎn)擊圖標(biāo)實(shí)現(xiàn)對(duì)應(yīng)的登錄方法.

其他都是些text使用,跟login大致相同,不再介紹了,想了解請(qǐng)看源碼.github

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: