[the external chain image transfer fails, and the source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-ekogkz67-163106606054) (/ / upload images. Jianshu. IO / upload_images / 16595031-0569b7ef72c3b468. PNG? Imagemogr2 / Auto orient / strip|imageview2 / 2 / w / 828 / format / webp)]
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-nhsyjdra-163106606057) (/ / upload images. Jianshu. IO / upload_images / 16595031-3cf5ad8f0cc9ba3c. PNG? Imagemogr2 / Auto orient / strip|imageview2 / 2 / w / 828 / format / webp)]
Code structure
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-38vwlt8f-163106606058) (/ / upload images. Jianshu. IO / upload_images / 16595031-43af1323a2729e18. PNG? Imagemogr2 / Auto original / strip|imageview2 / 2 / w / 734 / format / webp)]
The name of each class. I believe you can know the corresponding function class at a glance. The role of each class, I have comments in the code, you can look at the code.
Mainly used controls
-
Row and Column are used to arrange sub layouts in horizontal or vertical directions
-
Stack is used to realize layout stacking, and Positioned control is used to realize absolute positioning
-
Decorative effect with Container
-
Use TextFormField to realize text input, and use Form to manage these textformfields
-
Use the Key to get the status of the widget
-
InheritedWidget can be used to pass data to child controls
-
Using PageView and PageController to realize page sliding switching
Add dependencies in pubspec.yaml
-
font_awesome_flutter, this is a flutter icon library
-
Add a picture at the top of the login interface and declare the resource path. The following writing method will import the resources under the entire folder into the application, and can be declared without one resource by one.
-
random_pk. Let's talk about the role of this library. On the one hand, it provides random colors for containers. On the other hand, I think we can debug the layout of this colored Container. The RandomContainer is the same as the Container. Just wrap the child. Then you can judge whether the size of the drawn layout is correct by the size of the Container background. It looks more intuitive, and you don't have to write container+color manually. When you don't need it, just remove this layer of RandomContainer. When I use it at ordinary times, I find it really useful. You can try it.
random_pk: any font_awesome_flutter: any //Omit some codes assets: - assets/
code implementation
1. Use the code template to generate code and create a new empty page (it is really troublesome to manually type a piece of stateful code)
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
@override
Widget build(BuildContext context) {
return Container();
}
}
2. Write code according to the layout
There's nothing to say in this part. It's mainly to be familiar with the use of some controls. Just write the layout step by step according to the UI draft.
For example, the implementation of TextForm for entering account and password
/**
* Create TextForm for login interface
*/
Widget buildSignInTextForm() {
return new Container(
decoration:
new BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8))
, color: Colors.white
),
width: 300,
height: 190,
/**
* Flutter A Form widget is provided, which can group input boxes,
* Then perform some unified operations, such as input content verification, input box reset and input content saving.
*/
child: new Form(
key: _SignInFormKey,
//To enable automatic verification of input content, it's better to manually verify it by yourself, otherwise every time you modify a child's TextFormField, other textformfields will also be verified, which doesn't feel very good
// autovalidate: true,
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(
//Associated focus
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: "Email Address",
border: InputBorder.none
),
style: new TextStyle(fontSize: 16, color: Colors.black),
//verification
validator: (value) {
if (value.isEmpty) {
return "Email can not be empty!";
}
},
onSaved: (value) {
},
),
),
),
new Container(
height: 1,
width: 250,
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: "Password",
border: InputBorder.none,
suffixIcon: new IconButton(icon: new Icon(
Icons.remove_red_eye, color: Colors.black,),
onPressed: showPassWord)
),
//Enter the password, which needs to be displayed with *****
obscureText: !isShowPassWord,
style: new TextStyle(fontSize: 16, color: Colors.black),
validator: (value) {
if (value == null || value.isEmpty || value.length < 6) {
return "Password'length must longer than 6!";
}
},
onSaved: (value) {
},
),
),
),
],
),),
);
}
For example, the implementation of PageView
PageController _pageController;
PageView _pageView;
int _currentPage = 0;
@override
void initState() {
super.initState();
For example, the implementation of PageView
PageController _pageController;
PageView _pageView;
int _currentPage = 0;
@override
void initState() {
super.initState();