The next thing I want to talk about is some issues that should be paid attention to in the login interface. The login interface of the app usually has several modules such as password login, verification code login, forgotten password and registered account. The function implementation is relatively simple, mainly the design of some details, because I am not a professional UI designer, so I don’t I can talk about how to design and how to look good, mainly talking about the function realization part.
In the demo, I mainly did account login, verification code login and forget password three functions. In fact, the codes implemented by the three functional modules of verification code login, forgotten password, and account registration are similar, and the functions can be reused. This will be explained below.
The logic implemented by the account and password login interface mainly includes 1. Local verification of the legality of the account and password, 2. Submit to the background to determine whether the login is successful, if yes, enter the main interface. Otherwise, log in again.
Two of the text boxes are implemented by TextField, and each text box uses a decorator to do some prompt functions. The code above is part of the code below.
TextEditingController passwordController = new TextEditingController();
Widget PasswordField()
{
return new TextField(
textAlign: TextAlign.left,
style: new TextStyle(fontSize: 20),
controller:passwordController,
obscureText: isObscure,
//autovalidate: validataPassword,
//focusNode: passwordFocus,
onChanged: (text) => { setState(() => password = text); },
//validator: (value) => { return value.Trim().Length > 0 ? null : "密码不能为空"; },
decoration: new InputDecoration(
hintText: "请输入密码",
hintStyle: new TextStyle(color: Color.fromARGB(255, 221, 221, 221),fontSize:15),
suffixIcon: password == "" ? null :
new Container(child:new Row(
mainAxisSize: MainAxisSize.min,
children: PasswordIcon()))
)
);
}
List<Widget> PasswordIcon()
{
return new List<Widget> {
new GestureDetector(child: new Icon(isObscure?Icons.visibility_off:Icons.visibility),
onTap: () => { setState(()=> { isObscure=!isObscure; }); }),
new GestureDetector(child: new Icon(Icons.clear),onTap: () => { setState(()=> { passwordController.text = ""; }); })};
}The code mainly realizes the realization of the password box, mainly including the realization of hiding or password, clearing the password, and prompting the user to enter these functions. Unlike UGUI directly dragging and dropping UI components, all components of UIWidgets need to be written by themselves. Although the writing process is cumbersome, the degree of freedom is quite large. Almost every attribute of every component can be edited, and if you master the skills If so, many functional components can be reused, and a set of custom component libraries can be created.
The login button is implemented with a RaisedButton, which changes the color according to user input, mainly for login verification. ,
new Container(
height: 48,
constraints: new BoxConstraints(minWidth: float.PositiveInfinity, maxHeight: float.PositiveInfinity),
child: new RaisedButton(
shape:new RoundedRectangleBorder(borderRadius:BorderRadius.circular(5)),
color: password != "" && accountController.text != "" ? Colors.blue : Color.fromARGB(255, 85, 85, 85),
child: new Text("登录", style: new TextStyle(color: Color.white, fontSize: 15)),
onPressed: () => {
if (password == "" || account == "")
{
// ShowMessage("账号或密码不能为空");
}
else
{
Login(account, password);
}
})),First, in order to use a container as the parent node of RaisedButton, and set the child node filling, so that there is no need to set the button size, and directly fill it according to the parent node. At the same time, shape is used to make the button rounded, and the color of the button is changed by judging whether the account password is empty. When you click the button, it will first verify locally. If the verification fails, it will pop up a box, otherwise enter the background judgment.
Next, let's talk about the verification code login and forget the password function
The verification code login, forget the password, including account registration functions are very similar, basically by obtaining a mobile phone or email, and then sending an application to the background interface, and then using the verification code to determine whether it is my own operation, so as to log in, modify the password, and register the account These three functions.
The design of this interface for sending verification code is similar to that of password login. The main thing to pay attention to is the module that is input after receiving the verification code, because the verification code input interface of most apps is not a simple text box to enter, but through some Good-looking styles guide user input. At this time, we need to develop a combination of some component functions to achieve this effect.
For example, the realization of this text box is actually realized by using Container, Row, TextField and image. This effect is actually rewritten by referring to a blogger's flutter article. The address is here . The general implementation principle is to use A hidden TextField, and it will get the focus as soon as you enter it. The input box of the verification code is actually intercepted one by one based on the data obtained by this TextField and displayed on the corresponding box. Entering the last character will automatically submit the data. The flashing focus prompt on the box is actually realized with a flashing gif, which will automatically flash in the text box next to the text. The implementation code of the upper part of the following code
Widget VerificationBox()
{
return new Container(
height: 60,
child:new Stack(
children:new List<Widget> {
new Row(
mainAxisAlignment:MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: GetInputCell()
),
new Container(
height:60,
width:float.PositiveInfinity,
child:new TextField(
keyboardType:TextInputType.number,
inputFormatters:new List<TextInputFormatter>{ new LengthLimitingTextInputFormatter(cellCount) },
decoration:new InputDecoration(border:InputBorder.none),
cursorWidth:0,
style:new TextStyle(color:Colors.transparent),
controller:controller,
autofocus:true,
onChanged:(str)=>
{
setState(()=>
{
code=str;
if(str.Length==cellCount)
{
Debug.Log("提交检测")
}
});
}
)
)
}
)
);
}
string MidStrEx(string sourse, string startstr, string endstr)
{
string result = string.Empty;
int startindex, endindex;
try
{
startindex = sourse.IndexOf(startstr);
if (startindex == -1)
return result;
string tmpstr = sourse.Substring(startindex + startstr.Length);
endindex = tmpstr.IndexOf(endstr);
if (endindex == -1)
return result;
result = tmpstr.Remove(endindex);
}
catch (Exception ex)
{
Debug.Log("MidStrEx Err:" + ex.Message);
}
return result;
}
List<Widget> GetInputCell()
{
List<Widget> list = new List<Widget>();
for (int i = 0; i < cellCount; i++)
{
list.Add(new Expanded(
flex: 1,
child: new Center(child: new Container(
width: 50,
height: 50,
margin: EdgeInsets.only(left: 5, right: 5),
alignment: Alignment.center,
child: GetFoucus(i),
decoration:new BoxDecoration(border: new Border(bottom: new BorderSide(width:1,color: Colors.grey)))
//decoration:new BoxDecoration(border:Border.all(color:Colors.grey,width:1))
)
))
);
}
return list;
}
Widget GetFoucus(int index)
{
if (code.Length == index)
{
return new Container(width: 45, height: 45, child: Image.network(Application.streamingAssetsPath + "/Icons/flash.gif"));
}
else
{
return new Text(
data: GetIndexChar(index),
style: new TextStyle(fontSize: 40, color: Colors.black, fontWeight: FontWeight.w900)
);
}
}
string GetIndexChar(int index)
{
if (code == null || string.IsNullOrEmpty(code))
{
return "";
}
if (code.Length > index)
{
return code[index].ToString();
}
else
{
return "";
}
}
}Forgot your password is similar to account registration and SMS login, so I won’t explain them here.